/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:algolia-filter-collection (INDEX:1) */
/* ⚠ Auto-generated from src/sections/algolia-filter-collection/algolia-filter-collection.css — do not edit directly. */
/* src/sections/algolia-filter-collection/algolia-filter-collection.css */
/* Les feuilles partagées (link, cta, gallery_list, algolia-filter-shared) sont
   servies par assets/theme-shared.css — voir src/assets/theme-shared.css.
   Ne pas les réimporter ici : preprocessCSS les recopierait dans ce bloc. */
@layer reset, base, components, variants, settings;

/* Divergences propres à la page collection ; tout le reste vient du tronc
 * importé ci-dessus.
 *
 * `.filter-bar_list-tag` n'ajoute qu'un `justify-content` au bloc du tronc :
 * les tags sont centrés ici, alignés à gauche sur la recherche. Déclaré après
 * l'import, donc il gagne à spécificité égale.
 *
 * `body:has(header.is-scroll-down) t-filter` est confinée au desktop ici,
 * contrairement à la recherche où elle s'applique à toutes les tailles. */
@layer components {
  .filter-bar_list-tag {
    justify-content: center;
  }
}
@layer components {
  @media screen and (min-width: 768px) {
    body:has(header.is-scroll-down) t-filter {
      top: 0;
    }
  }
}
/* END_SECTION:algolia-filter-collection */

/* START_SECTION:algolia-filter (INDEX:2) */
/* ⚠ Auto-generated from src/sections/algolia-filter/algolia-filter.css — do not edit directly. */
/* src/sections/algolia-filter/algolia-filter.css */
/* Les feuilles partagées (link, cta, gallery_list, algolia-filter-shared) sont
   servies par assets/theme-shared.css — voir src/assets/theme-shared.css.
   Ne pas les réimporter ici : preprocessCSS les recopierait dans ce bloc. */
@layer reset, base, components, variants, settings;

/* Divergences propres à la page de recherche ; tout le reste vient du tronc
 * importé ci-dessus.
 *
 * `body:has(header.is-scroll-down) t-filter` est ici hors media query, alors
 * que la collection la confine au desktop — c'est la seule divergence de
 * comportement. Les deux règles `.link.v-secondary` n'existent que sur cette
 * page, et sont la raison de l'import de `link.css`. */
@layer components {
  body:has(header.is-scroll-down) t-filter {
    top: 0;
  }
  .filter-legend .link.v-secondary .cta--label,
  .filter-content-input .link.v-secondary .cta--label,
  .filter-bar_container-tag .link.v-secondary .cta--label {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 135%;
    letter-spacing: 0;
  }
  .filter-legend .link.v-secondary .cta--label__text,
  .filter-content-input .link.v-secondary .cta--label__text,
  .filter-bar_container-tag .link.v-secondary .cta--label__text {
    padding-bottom: 0;
    color: var(--Content-secondary, #4d4d4d);
  }
}
/* END_SECTION:algolia-filter */

/* START_SECTION:algolia-header-search (INDEX:3) */
/* ⚠ Auto-generated from src/sections/algolia-header-search/algolia-header-search.css — do not edit directly. */
/* src/sections/algolia-header-search/algolia-header-search.css */
@layer reset, base, components, variants, settings;

@layer components {
  c-algolia-header-search {
    pointer-events: none;
    visibility: hidden;

    &:has(.header-search[open]) {
      pointer-events: auto;
      visibility: visible;
    }
  }

  .header-search {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    display: grid;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100svh;
    padding: 1.25rem 0 1.25rem;
    border: none;
    box-sizing: border-box;
    align-content: flex-start;
    justify-items: center;
    row-gap: 0.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background-color: var(--color-white);
    opacity: 0;
    pointer-events: none;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition:
      clip-path 0.9s cubic-bezier(0.48, -0.01, 0.34, 0.99),
      opacity 0.3s 0.6s cubic-bezier(0.48, -0.01, 0.34, 0.99);

    @media (width >=64rem) {
      padding: 1.25rem 0 3rem;

      /* Gabarit du panneau, déclaré une seule fois : l'état vide
         (`.header-search__push`) et le panneau de résultats
         (`[data-algolia-results]`) le consomment tous deux, et ne peuvent donc
         plus diverger. */
      --header-search-columns: 65.58vw 0.0625rem 21.38vw;
      --header-search-column-gap: calc(var(--spacing) * 20);
    }

    &[open] {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
      opacity: 1;
      pointer-events: auto;
      transition:
        clip-path 0.9s cubic-bezier(0.48, -0.01, 0.34, 0.99),
        opacity 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99);
    }
  }

  .header-search::backdrop {
    display: none;
    visibility: hidden;
  }

  .header-search__logo {
    display: none;
  }

  .header-search__icon-search {
    display: none;
  }

  .header-search__form-search {
    width: 100%;
    display: grid;
    column-gap: calc(var(--spacing) * 5);
    padding: 0.625rem 0.625rem 0.625rem 1rem;
    border: 1px solid var(--Gris-Nacre, #e6e5e5);
  }

  .header-search__close {
    width: fit-content;
    /* padding-bottom: calc(var(--spacing) * 5); */

    @media (width >=64rem) {
      padding-bottom: calc(var(--spacing) * 12);
    }
  }

  .header-search__close svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .header-search__container {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: calc(var(--spacing) * 5);
    padding-inline: 1rem;

    @media screen and (min-width: 1024px) {
      padding-inline: 0;
    }

    width: 100%;
  }

  .header-search__input {
    width: 100%;
    border: none;
    /* Le navigateur applique `1px 2px` de padding à tout `input` : le texte
       partait décalé de 2px et le champ gagnait 4px de haut, ce qui suffit à
       lui donner l'air d'un champ natif plutôt que du filet de la maquette. */
    padding: 0;
    box-sizing: border-box;
    font-family: 'Apercu Pro', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
    background-color: transparent;
    letter-spacing: 0.00625rem;
  }

  .header-search__input::placeholder {
    font-weight: 300;
  }

  .header-search__input::-webkit-search-cancel-button {
    position: relative;
    right: 0;
    -webkit-appearance: none;
    height: 1.5rem;
    width: 1.5rem;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1LjM0MTEgOS45MDY3NEMxNS4zNzg3IDkuOTAxODMgMTUuMzUxMyA5LjgzMzE0IDE1LjQ0NjkgOS44ODUxNUMxNS44OTI2IDkuODk1OTQgMTQuOTg3IDkuMTI4NTIgMTUuMDQzIDkuMzgyN0MxNC43Nzg0IDkuMzczODYgMTQuNzIwNCA5LjY2OTI1IDE0LjYwNjUgOS42NzIyQzE0LjY2MzQgOS43ODQwNyAxNC40ODU0IDkuNjUzNTUgMTQuNTEzOSA5LjgzMTE3QzE0LjQ1OTkgOS44ODUxNSAxNC40OTM1IDEwLjAyNjUgMTQuMzg5NyA5Ljk2MjY4QzE0LjE4ODMgMTAuMDA1OSAxNC4zMDIyIDEwLjE2ODggMTQuMTUwNiAxMC4xMTQ4QzE0LjEyMzIgMTAuMjQzMyAxNC4xNjI4IDEwLjMzMTcgMTQuMDgzNSAxMC40MTUxQzEzLjk1MTIgMTAuMzYzMSAxMy42NzI0IDEwLjUwNTQgMTMuNjY4MyAxMC41MDU0QzEzLjYxMTQgMTAuNjg5OSAxMy4zNzAyIDEwLjcxOTMgMTMuMjQ2MSAxMS4wMzkyQzEzLjE4OTEgMTEuMTgzNSAxMy4yMDMzIDEwLjk5MjEgMTMuMTcwOCAxMC45OThDMTMuMDQ4NyAxMC45OTQxIDEyLjk1NjEgMTEuMDE0NyAxMy4wNDU2IDEwLjg3MDRDMTIuODQyMSAxMC45MDA5IDEyLjc5NTMgMTAuNTA4MyAxMi43MDU4IDEwLjMwOTFDMTIuNDEyNyAxMC4yMDggMTIuMTkzIDEwLjEzMTUgMTIuMTIwNyA5LjgyNzI1QzExLjg5NjkgOS41NjUyMyAxMS42MTkxIDkuNTI1OTcgMTEuNDcwNSA5LjI4MTYyQzExLjE0NSA5LjQ2NDE1IDEwLjY4NzEgOS45MDQ3OCAxMS4xMzE3IDkuOTAwODVDMTEuMTAxMiA5Ljk3MzQ3IDExLjIyOTQgOS45Njg1NiAxMS4zMDY3IDkuOTc2NDFDMTEuMjI3NCAxMC4xNDIzIDExLjYxMiAxMC4xMTU4IDExLjY0MjUgMTAuMzY5QzExLjY4NDIgMTAuNTE2MiAxMS43NTQ0IDEwLjUwNzMgMTEuODIyNiAxMC41NTY0QzExLjc3MjcgMTAuNjIxMiAxMS45MjIzIDEwLjU1NjQgMTEuOTQwNiAxMC41OTE3QzExLjk0OTggMTAuNjI0MSAxMS44ODc3IDEwLjcyMTMgMTEuOTg1NCAxMC42Mzg4QzExLjk0NjcgMTAuNzk5OCAxMi4xNzk3IDEwLjc5NjggMTIuMjUzIDEwLjg4NDJDMTIuMTc2NyAxMS4xMTE4IDEyLjE1NTMgMTEuMDI1NSAxMi4yNzY0IDExLjE0MjNDMTIuNTgyNyAxMS4xNzc2IDEyLjQ1NTUgMTEuNDg0OCAxMi43NDg1IDExLjUxODFDMTIuODE1NyAxMS41NjYyIDEyLjc3NyAxMS41MDgzIDEyLjczMDIgMTEuNTcxMUMxMi43MjcyIDExLjY4OTkgMTIuNzQ2NSAxMS43NzcyIDEyLjU5NjkgMTEuNjkxOEMxMi42Mjg1IDExLjg4ODEgMTIuMjIyNSAxMS45MzMyIDEyLjAxNDkgMTIuMDE5NkMxMS45MTExIDEyLjMwMjIgMTEuODMwNyAxMi41MTQyIDExLjUxNTMgMTIuNTgzOUMxMS4yNDM2IDEyLjc5OTggMTEuMjAyOSAxMy4wNjc3IDEwLjk0OTYgMTMuMjExQzExLjEzODggMTMuNTI2IDExLjU5NTcgMTMuOTY2NiAxMS41OTI2IDEzLjUzNzdDMTEuNjY1OSAxMy41NzExIDExLjY2MjkgMTMuNDQzNSAxMS42NzEgMTMuMzY5QzExLjg0MyAxMy40NDU1IDExLjgxNTUgMTMuMDc0NiAxMi4wNzggMTMuMDQ1MUMxMi4yMzA2IDEzLjAwNDkgMTIuMjIxNSAxMi45MzYyIDEyLjI3MjMgMTIuODcxNEMxMi4zMzk1IDEyLjkxOTUgMTIuMjcyMyAxMi43NzUyIDEyLjMwOSAxMi43NTc2QzEyLjM0MjUgMTIuNzQ4NyAxMi40NDIzIDEyLjgwODYgMTIuMzU3OCAxMi43MTQ0QzEyLjYxNzMgMTIuNzIxMyAxMi40ODYgMTIuMjkyNCAxMi44NDExIDEyLjU0MTdDMTIuNzY4OSAxMi40MDQzIDEzLjAzNDQgMTIuMTg2NCAxMy4xNTE0IDEyLjE3MDdDMTMuMTc4OSAxMi4yMTM5IDEzLjMxOTMgMTEuOTA0OCAxMy4yOTQ5IDEyLjAzNzNDMTMuMzg4NSAxMS45NzE1IDEzLjM2NTEgMTIuMDg5MyAxMy40MjIxIDEyLjA2MzhDMTMuNTM3MSAxMS45ODEzIDEzLjM5ODcgMTIuMTUzMSAxMy40OTU0IDEyLjA4NTNDMTMuNzAyOSAxMi4xNjE5IDEzLjgwMjYgMTIuNDk3NSAxMy45MTc2IDEyLjUwNzNDMTMuOTIxNyAxMi41MjAxIDEzLjkxNjYgMTIuODU5NiAxNC4wMjk1IDEyLjc1NzZDMTQuMjk5MiAxMi44NjU1IDE0LjM1MzEgMTIuOTQ1IDE0LjQwMDkgMTMuMTEyOEMxNC43MDUyIDEzLjE2ODggMTQuODc0MSAxMy4zNTkxIDE0LjkyMTkgMTMuNjE4MkMxNC45MTE3IDE0LjA0ODEgMTUuNzA1NCAxMy4xNzQ2IDE1LjQ0MjggMTMuMjI4NkMxNS40NTIgMTIuOTczNSAxNS4xNDU3IDEyLjkxNzUgMTUuMTQyNyAxMi44MDc2QzE1LjAyNjcgMTIuODYyNiAxNS4xNjIgMTIuNjg5OSAxNC45Nzc4IDEyLjcxODNDMTQuOTIxOSAxMi42NjYzIDE0Ljc3NTQgMTIuNjk4NyAxNC44NDE1IDEyLjU5ODZDMTQuNzk2NyAxMi40MDQzIDE0LjYyNzggMTIuNTE1MiAxNC42ODM4IDEyLjM2OEMxNC41NDk1IDEyLjM0MTUgMTQuNDU4OSAxMi4zODA3IDE0LjM3MjQgMTIuMzAzMkMxNC40MjY0IDEyLjE3NDYgMTQuMjc3OCAxMS45MDc3IDE0LjI3ODggMTEuOTAyOEMxNC4wOTE2IDExLjgxMjUgMTQuMDc0MyAxMS43MDM2IDEzLjc3ODIgMTEuNDk2NUMxMy44MjIgMTEuNTEyMiAxMy43MDUgMTEuMzc0OCAxMy44MTA4IDExLjQ1MDRDMTMuNzQzNiAxMS4zNjAxIDEzLjg2NDcgMTEuMzgyNyAxMy44MzgzIDExLjMyNzdDMTMuNzUyOCAxMS4yMTY4IDEzLjkzMDggMTEuMzUwMyAxMy44NjA2IDExLjI1NzFDMTMuOTM5IDExLjA1NjkgMTQuMjg4IDEwLjk2MDcgMTQuMjk4MiAxMC44NDk4QzE0LjMxMjQgMTAuODQ1OSAxNC42NjM0IDEwLjg0OTggMTQuNTU3NiAxMC43NDE5QzE0LjY2OTUgMTAuNDgxOCAxNC43NTIgMTAuNDMwOCAxNC45MjYgMTAuMzgzN0MxNC45NjU2IDEwLjA5NzEgMTUuMTQ4OCAxMC4wMDg4IDE1LjM0NDEgOS45MDI4MUwxNS4zNDExIDkuOTA2NzRaTTEzLjcyMjMgMTEuNDk3NUMxMy42OTI4IDExLjQ3IDEzLjczMjQgMTEuNDg0OCAxMy43NTc5IDExLjQ5NDZDMTMuNzUxOCAxMS40OTA2IDEzLjc0OTcgMTEuNDgyOCAxMy43MjIzIDExLjQ5NzVaIiBmaWxsPSIjODA4MDgwIi8+CjxwYXRoIGQ9Ik05LjczNDA4IDYuMDgxNTJDOS45NjYwNiA2LjAzMDQ5IDEwLjIxMjMgNi4xNzM3NyAxMC40NzQ4IDYuMTUwMjFDMTAuNzM3MyA2LjEyNjY2IDExLjAwMTkgNi4xNDA0IDExLjI2NjQgNi4xNDYyOUMxMS4zOTk3IDYuMTQ5MjMgMTEuNTI1OSA2LjEyNjY2IDExLjY1NDEgNi4wODU0NEMxMS43NzkyIDYuMDQ1MjEgMTEuOTIyNyA2LjEzNjQ3IDEyLjA0MDcgNi4wMTk2OUMxMi4wNTA5IDYuMDA4OSAxMi4wNzYzIDYuMDE4NzEgMTIuMDkzNiA2LjAxODcxQzEyLjQxMjEgNi4wMTg3MSAxMi43Mzc3IDUuOTY5NjQgMTMuMDQ3IDYuMDMxNDdDMTMuNDA3MiA2LjEwMzExIDEzLjc2MjMgNi4wNTQwNCAxNC4xMTc0IDYuMDgxNTJDMTQuNjk4NCA1Ljk0NDEzIDE1LjI4NDUgNi4wNDUyMSAxNS44Njg1IDYuMDIyNjRDMTYuMDUwNyA2LjAxNTc3IDE2LjIzNDggNS45ODkyNyAxNi40MjIxIDYuMDcyNjlDMTYuNTgxOCA2LjE0NDMzIDE2Ljc3NzIgNi4wMTY3NSAxNi45NDQgNi4xNDEzOEMxNi45NTczIDYuMTUxMTkgMTYuOTkwOCA2LjEyNDcgMTcuMDE1MyA2LjExODgxQzE3LjA3NDMgNi4xMDUwNyAxNy4xMzYzIDYuMDcyNjkgMTcuMTkyMyA2LjA4NDQ2QzE3LjUyNzEgNi4xNTQxNCAxNy41MjYgNi4xNTQxNCAxNy44MDU5IDYuMDkyMzFDMTcuODM5NCA2LjA4NDQ2IDE3Ljg4MDEgNi4xMzc0NiAxNy45MTc4IDYuMTM4NDRDMTguMDcxNCA2LjE0NTMxIDE4LjIyNzEgNi4xNTMxNiAxOC4zNzk3IDYuMTQxMzhDMTguNTE4MSA2LjEzMDU5IDE4LjY2NDYgNi4yMDIyMyAxOC43OTY5IDYuMDg0NDZDMTguODA4MSA2LjA1Nzk3IDE4LjkzNjMgNi4wODE1MiAxOS4wMDQ1IDYuMDk2MjRDMTkuMjUwNyA2LjEzNzQ2IDE5LjQ3MDUgNi4yNzE5IDE5LjYzMjMgNi40NTA1MUMxOS44Mjg2IDYuNjM4OTMgMTkuODQwOCA3LjAwNzkyIDE5LjkyMzMgNy4xNjEwMUMxOS45NjggNy4yMjk3IDE5Ljg0OSA3LjMyODgyIDE5Ljg3NDQgNy4zNjkwNkMxOS45MjIyIDcuNDQ0NjIgMTkuOTM0NCA3LjUxNDMgMTkuOTI1MyA3LjU4ODg4QzE5LjkxNjEgNy42NjE1IDE5Ljg2ODMgNy43MzIxNiAxOS44NjczIDcuODAzOEMxOS44NjYzIDcuODY2NiAxOS45MjEyIDcuOTI5NDEgMTkuOTI1MyA3Ljk5MjIyQzE5LjkzNDQgOC4xNTAyMSAxOS44ODQ2IDguMzE5MDEgMTkuOTQwNiA4LjQ2MzI3QzE5Ljk5OTYgOC42MTgzMiAxOS45ODUzIDguNzY2NSAxOS45OTI0IDguOTE3NjNDMjAuMDAwNiA5LjA3NTYzIDE5Ljk4MzMgOS4yMzM2MyAxOS45OTc1IDkuMzkxNjNDMjAuMDA4NyA5LjUxNDMgMTkuOTU2OCA5LjYyMzIzIDE5LjkyOTQgOS43MzkwM0MxOS45MDE5IDkuODUzODQgMTkuOTg2MyA5Ljk4MjQgMTkuODYzMiAxMC4wODY0QzE5Ljg1ODEgMTAuMDkxMyAxOS44NjMyIDEwLjEwMzEgMTkuODYzMiAxMC4xMTE5QzE5Ljg0MTkgMTAuMzUwNCAxOS44MDYyIDEwLjU4ODkgMTkuODAwMSAxMC44MjczTDE5Ljc5NSAxMi4wNjQ4QzE5Ljc5NCAxMi4xODE2IDE5LjgzNDcgMTIuMzA0MyAxOS43MzQgMTIuNDEzMkMxOS43MTI2IDEyLjQzNTggMTkuNzQ0MiAxMi40ODU4IDE5LjcyODkgMTIuNTE2M0MxOS42NzE5IDEyLjYzMDEgMTkuODY0MiAxMi43MjA0IDE5Ljc3NTcgMTIuODMwM0MxOS42OTY0IDEyLjkyODQgMTkuNzQxMSAxMy4wMzE1IDE5LjczMyAxMy4xMzE2QzE5LjcyMzggMTMuMjQ1NCAxOS43MzUgMTMuMzU5MiAxOS43Mjk5IDEzLjQ3NDFDMTkuNzI1OSAxMy41NTI2IDE5Ljc0MjEgMTMuNjI0MiAxOS43OTcxIDEzLjY4OUMxOS42ODIxIDEzLjc3NTMgMTkuNzU5NCAxMy44OTkgMTkuNzA1NSAxNC4wMDFDMTkuNjY5OSAxNC4wNjc4IDE5LjYzNTMgMTQuMTcxOCAxOS42NzUgMTQuMjIwOUMxOS43NjE1IDE0LjMyOTggMTkuNzIwOCAxNC40Mzc3IDE5LjcyOTkgMTQuNTQ1N0MxOS43NDQyIDE0LjcwNTcgMTkuNzA3NSAxNC44Njc2IDE5Ljc5MSAxNS4wMjU2QzE5LjgyNjYgMTUuMDkyMyAxOS44MDUyIDE1LjE4MjYgMTkuNzk0IDE1LjI2MDFDMTkuNzgzOSAxNS4zMzI3IDE5LjczOTEgMTUuNDAzNCAxOS43MzQgMTUuNDc2QzE5LjcyNDggMTUuNjEwNSAxOS43Mjk5IDE1Ljc0MyAxOS43OTEgMTUuODc2NEMxOS44NTIgMTYuMDI2NiAxOS43MDE0IDE2LjI1MDMgMTkuNjk2NCAxNi40NTI1QzE5LjY5NjQgMTYuNDgzOSAxOS42NTA2IDE2LjUzMjkgMTkuNjE3IDE2LjU1ODVDMTkuNDI4OCAxNi42ODggMTkuMjcxIDE2Ljc2MDYgMTkuMDUxMyAxNi44ODAzQzE4LjgxOTMgMTYuOTc3NSAxOC42OTExIDE2LjkwODggMTguNTU0NyAxNi45MTY3QzE4LjQwOTIgMTYuOTE2NyAxOC4yNTk3IDE2LjkzOTIgMTguMTE5MiAxNi45MDg4QzE4LjAyODcgMTYuODg5MiAxNy45ODM5IDE3LjA0NDIgMTcuODc3MSAxNi45NDcxQzE3LjgxOTEgMTYuODk0MSAxNy43MDYxIDE2LjkyMTYgMTcuNjE3NiAxNi45MTc2QzE3LjUyNzEgMTYuOTEzNyAxNy40MzE0IDE2LjkzNzMgMTcuMzQ1OSAxNi45MTM3QzE2Ljg5MjEgMTYuNzg3MSAxNi40MzEyIDE2Ljg5MjEgMTUuOTc2NCAxNi44NTA5QzE1Ljc4NDEgMTYuODMzMiAxNS41ODE2IDE2LjkyODQgMTUuMzk4NSAxNi43OTFDMTUuMjYyMSAxNi44OTQxIDE1LjA5NTIgMTYuODA1OCAxNC45NjUgMTYuODc1NEMxNC44ODI2IDE2LjkxOTYgMTQuODA5MyAxNi45MTQ3IDE0LjczNCAxNi45MTU3TDEzLjIzMzIgMTYuOTIwNkMxMi45MDQ2IDE2LjkyNzQgMTIuNTc1OSAxNi45NjQ3IDEyLjI0NjMgMTYuOTc3NUMxMi4xNTM3IDE2Ljk4MTQgMTIuMDYzMSAxNi45OTMyIDExLjk2MjQgMTYuOTMwNEMxMS44ODgxIDE2Ljg4MzMgMTEuNzUzOCAxNi44Nzk0IDExLjY1NjEgMTYuOTYwOEMxMS42MzY4IDE2Ljk3NjUgMTEuNTk4MSAxNi45OTAzIDExLjU4MjkgMTYuOTc4NUMxMS4zOTU2IDE2LjgyOTMgMTEuMjEwNSAxNi45ODQ0IDExLjAyNjMgMTYuOTkwM0MxMC42NjYxIDE3LjAwMiAxMC4zMTUxIDE2LjkwODggOS45NTY5MSAxNi45MTg2QzkuODgwNTkgMTYuOTIwNiA5Ljc5MTA2IDE2Ljg3NjQgOS43MzMwNiAxNi45NzY1QzkuNjc0MDQgMTYuODkzMSA5LjYzMDI5IDE2LjkzMzMgOS41NTgwNSAxNi45NzE2QzkuNTIwNCAxNi45OTEyIDkuNDcxNTYgMTcuMDAyIDkuNDIyNzIgMTcuMDAyQzkuMzM5MjkgMTcuMDAyIDkuMjQ4NzMgMTYuOTgwNCA5LjE5Nzg2IDE2Ljk0NjFDOS4wNTk0OCAxNi44NTE5IDguOTI4MjIgMTYuODE4NSA4LjgxMTIxIDE2LjczMDJDOC42NzI4MyAxNi42MTkzIDguNjE5OTIgMTYuNTU5NCA4LjU1ODg3IDE2LjQ5ODZMNy44MDU5MyAxNS42NTY2QzcuNzU3MDkgMTUuNjAwNyA3LjczNDcgMTUuNTI0MSA3LjY5NTAyIDE1LjQ2MDNDNy42NTUzNCAxNS4zOTU2IDcuNTYzNzYgMTUuMzczIDcuNTc2OTkgMTUuMjYzMUM3LjU4MjA4IDE1LjIyMTkgNy41MTA4NSAxNS4xODU1IDcuNDczMjEgMTUuMTQ4MkM3LjMzOTkxIDE1LjAxNTggNy4yMzYxMyAxNC44MzYyIDcuMDY2MjEgMTQuNzY0NUM2Ljg5ODMyIDE0LjY5MzkgNi44MzMyIDE0LjUxMDQgNi42MzM3NyAxNC40ODY4QzYuNTc3ODEgMTQuNDc5OSA2LjU0NzI5IDE0LjM5OTUgNi40OTg0NSAxNC4zNjEyQzYuMjk4IDE0LjIwNTIgNi4xOTExNiAxMy45NTEgNS45MTY0NCAxMy44NzI1QzUuOTE0NDEgMTMuNzUwOCA1LjgyNTg4IDEzLjY4NyA1Ljc0OTU3IDEzLjYxOTNDNS42OTM2MSAxMy41NjkzIDUuNjY3MTUgMTMuNDc1IDUuNTUyMTggMTMuNDk4NkM1LjUzODk1IDEzLjUwMTUgNS41MTk2MiAxMy40ODI5IDUuNTExNDggMTMuNDY5MkM1LjQ2MzY2IDEzLjM4OTcgNS40NTE0NSAxMy4yOTA1IDUuMzY2OTkgMTMuMjMwN0M1LjI5Njc5IDEzLjE4MDYgNS4yMDQxOSAxMy4xNzM4IDUuMTM5MDggMTMuMTA4QzQuOTA2MDcgMTIuODcwNSA0Ljc1NDQ2IDEyLjU2MzQgNC40ODM4MSAxMi4zNTgzQzQuNDczNjMgMTIuMjM5NSA0LjM5NDI3IDEyLjE4MTYgNC4zMTU5MiAxMi4wOTgyQzQuMTM3ODYgMTEuOTEzNyAzLjk0NDU0IDExLjY2MTUgNC4wMTE2OSAxMS4zNjAyQzQuMDUzNDEgMTEuMDg0NSA0LjMzNTI2IDEwLjg0MTEgNC4zODcxNSAxMC43MjcyQzQuNTI2NTQgMTAuNDYxMyA0Ljc3MDc0IDEwLjI5NzQgNC45NjIwMyAxMC4wODI1QzUuMDEwODcgMTAuMDI3NSA1LjA0NTQ3IDkuOTQ1MTEgNS4xNjA0NCA5Ljk2MTc5QzUuMTg3OTIgOS45NjU3MiA1LjIzNzc3IDkuOTAxOTMgNS4yMzM3IDkuODY3NThDNS4yMjM1MyA5Ljc5Mzk4IDUuMjkwNjggOS43ODAyNCA1LjMwNjk2IDkuNzMzMTRDNS4zNTQ3OCA5LjU5OTY3IDUuNjE4MzEgOS42NzMyOCA1LjU4MTY5IDkuNDYzMjdMNS44ODU5MiA5LjE2MTAxTDYuMTkxMTYgOC44NTk3M0M2LjI0IDguODE0NTkgNi4yNzE1NSA4Ljc1NDczIDYuMzY2MTcgOC43NDg4NEM2LjQyOTI2IDguNzQ0OTEgNi41MTI2OSA4LjY3MjI5IDYuNTE3NzggOC42MTQzOUM2LjUyODk3IDguNDc2MDIgNi42MzU4MSA4LjQyMzAzIDYuNzEyMTIgOC4zNDM1NEM2Ljk0MTA2IDguMTA2MDUgNy4xNzQwNiA3Ljg3MTUxIDcuNDE1MjEgNy42NDQ4MkM3LjUyMTAzIDcuNTQ1NyA3LjY0OTIzIDcuNDY5MTUgNy43NjcyNiA3LjM4MDgzQzcuODg2MzEgNy4yOTE1MyA3Ljk0NzM2IDcuMTQwNCA4LjExMDE2IDcuMDk4MkM4LjEyMTM1IDcuMDk1MjYgOC4xMzA1MSA3LjA4MjUgOC4xMzY2MSA3LjA3MTcxQzguMTY4MTUgNy4wMjE2NiA4LjE4ODUgNi45NjA4MSA4LjIzMjI2IDYuOTI0NUM4LjI4OTI0IDYuODc2NDIgOC40MTY0MiA2Ljg2MTcgOC40MjE1MSA2LjgwODdDOC40MzE2OCA2LjcwMzcgOC41MjQyOCA2LjcxNTQ3IDguNTc0MTMgNi42NzYyMkM4LjcxOTYzIDYuNTYyMzggOC45MjcyIDYuNjAxNjQgOS4wNjY2IDYuNzYwNjJDOS4wOTcxMiA2Ljc5NTk0IDkuMTE5NTEgNi44NDU5OSA5LjEyNzY1IDYuODg5MTdDOS4xNzg1MiA3LjE2MTAxIDkuMTY5MzcgNy4xNTQxNCA4Ljk5MTMxIDcuMzQ5NDNDOC43NjY0NCA3LjU5NjczIDguNDM4ODEgNy43MzcwNiA4LjIzNjMzIDguMDA1OTVDNy45OTUxOCA4LjA3OTU2IDcuODg3MzMgOC4yOTU0NSA3LjcxMDI4IDguNDM2NzdDNy41MjUxIDguNTgzOTcgNy4yODU5OSA4LjY4NTA1IDcuMTc0MDYgOC44OTMxQzcuMDYzMTYgOS4xMDAxNiA2Ljg5MzIzIDkuMjQ3MzcgNi43MzI0NyA5LjQwNTM3QzYuNjA5MzUgOS41MjUwOSA2LjQ1NTcxIDkuNjE0MzkgNi4zMjU0NyA5LjcyODIzQzYuMTkxMTYgOS44NDY5OCA2LjA4NTM0IDkuOTk2MTQgNS45Mzg4MyAxMC4wOTgyQzUuODQ4MjcgMTAuMTYyIDUuNzEwOTEgMTAuMTkwNCA1LjY3MTIyIDEwLjI5MzVDNS41ODM3MiAxMC41MTkyIDUuMzU3ODQgMTAuNjI0MiA1LjIzOTgxIDEwLjgxMzZDNS4xNTczOSAxMC45NDYxIDUuMDUzNjEgMTEuMDU4IDQuOTQ2NzcgMTEuMTY3OUw0Ljc5MTA5IDExLjMzMDhDNC43Njk3MyAxMS4zNTYzIDQuNzU3NTIgMTEuMzg2NyA0Ljc1NjUgMTEuNDE3MUM0Ljc1NjUgMTEuNDg2OCA0Ljc5MjExIDExLjUzNjkgNC44MDk0MSAxMS41NzkxQzQuODIzNjUgMTEuNjA1NiA0LjgyMDYgMTEuNjAxNiA0LjgyOTc2IDExLjY3NjJDNC44NTMxNiAxMS43NjU1IDQuOTM2NTkgMTEuODUwOSA1LjA1NzY4IDExLjg3NzRDNS4xMDc1MyAxMS44ODgyIDUuMTcxNjQgMTEuOTI0NSA1LjE3OTc4IDExLjk2NTdDNS4yMTQzNyAxMi4xMzg0IDUuMzU2ODIgMTIuMjIyOCA1LjQ2NzczIDEyLjMyODhDNS41Mzc5MyAxMi4zOTY1IDUuNTQ5MTMgMTIuNTM1OSA1LjYxODMxIDEyLjU1MTZDNS43MzUzMyAxMi41NzcxIDUuNzc4MDYgMTIuNjU5NSA1Ljg0OTI5IDEyLjcxOTRDNS44OTkxNCAxMi43NjE2IDUuOTc0NDQgMTIuNzk0IDUuOTU1MTEgMTIuODkyMUM1Ljk1MDAyIDEyLjkxODYgNS45OTA3MiAxMi45Njc3IDYuMDE4MTkgMTIuOTY4N0M2LjE3NjkyIDEyLjk3MTYgNi4yMjY3OCAxMy4wOTcyIDYuMzEzMjYgMTMuMTc4N0M2LjUyMDgzIDEzLjM3NDkgNi43MjQzMyAxMy41NzYxIDYuOTIxNzIgMTMuNzgzMkM3LjA4NDUyIDEzLjk1MzkgNy4zMzI3OSAxNC4wMzM0IDcuNDY3MSAxNC4yMzI2QzcuNjUwMjUgMTQuMjYwMSA3LjcyOTYxIDE0LjQwNjMgNy44Mzc0NyAxNC41MTYzQzcuOTE5ODggMTQuNTk5NyA3Ljk3NTg1IDE0LjcwODYgOC4wNDQwMiAxNC44MDY3QzguMTExMTcgMTQuOTAzOSA4LjIwNzg0IDE0Ljk3MTYgOC4yNjA3NSAxNS4wOTIzQzguMzI1ODYgMTUuMjQxNSA4LjQ5Mzc1IDE1LjMzMzcgOC42MDU2OCAxNS40NjAzQzguNjY2NzMgMTUuNTI5IDguNzgzNzQgMTUuNTYwNCA4Ljc2NjQ0IDE1LjY5QzguNzY0NCAxNS43MDc2IDguNzk1OTUgMTUuNzM2MSA4LjgxNzMxIDE1LjczNzFDOC45ODMxNyAxNS43NDY5IDkuMDY5NjUgMTUuODc2NCA5LjExNDQyIDE1Ljk4MTRDOS4yMTMxMiAxNi4xODE2IDkuMjU5OTIgMTYuMTgxNiA5LjM1NDU1IDE2LjIxNjlDOS4zOTUyNSAxNi4yMzk1IDkuNTk4NzUgMTYuMjE2OSA5LjcyNzk3IDE2LjIyNzdDOS44MzE3NiAxNi4yMzQ2IDkuOTM0NTIgMTYuMjEyIDEwLjA0MzQgMTYuMjU4MkMxMC4xMjY4IDE2LjI5MzUgMTAuMjM4OCAxNi4yMzQ2IDEwLjMzNzQgMTYuMjI3N0MxMC40MzcyIDE2LjIyMDkgMTAuNTM3OSAxNi4yMjU4IDEwLjYzNzYgMTYuMjI1OEgxMS4yOTI5QzExLjQxMDkgMTYuMjI1OCAxMS41MyAxNi4yMTc5IDExLjY0OCAxNi4yMjc3QzExLjc1ODkgMTYuMjM3NiAxMS44Njg4IDE2LjI4MTcgMTEuOTgwNyAxNi4yODU2QzEyLjI5MzEgMTYuMjk4NCAxMi41OTkzIDE2LjE4MjYgMTIuOTEzNyAxNi4yMjQ4QzEyLjk5ODIgMTYuMTQ3MyAxMy4wODA2IDE2LjIwMzIgMTMuMTY5MSAxNi4yMTc5QzEzLjI1MDUgMTYuMjMxNyAxMy4zNDYyIDE2LjI2NSAxMy40Mjc2IDE2LjE4NDZDMTMuNDUgMTYuMTYyIDEzLjQ5MzcgMTYuMTY2OSAxMy41MjczIDE2LjE2MUMxMy42MDI2IDE2LjE0OTIgMTMuNjY4NyAxNi4yMjQ4IDEzLjc1ODMgMTYuMTY4OUMxMy44MjEzIDE2LjEyOTYgMTMuOTE5IDE2LjE2NzkgMTQuMDAwNCAxNi4xNTlDMTQuMDg1OSAxNi4xNTAyIDE0LjE4MjYgMTYuMjA2MiAxNC4yNTQ4IDE2LjEwN0MxNC40MDQ0IDE2LjI1NDIgMTQuNTQ3OCAxNi4wMjg1IDE0LjY5NzQgMTYuMDk2MkMxNC43NDQyIDE2LjExNzggMTQuNzk2MSAxNi4xMjU3IDE0Ljg0NiAxNi4xMzk0QzE0Ljg3MDQgMTYuMTQ2MyAxNC44OTg5IDE2LjE2NDkgMTQuOTIwMiAxNi4xNTgxQzE1LjMxODEgMTYuMDI0NiAxNS43MjUxIDE2LjEzMjUgMTYuMTI2IDE2LjA5NTNDMTYuMTc1OCAxNi4wOTA0IDE2LjIyMjYgMTYuMDYxOSAxNi4yNzI1IDE2LjA0ODJDMTYuMjk1OSAxNi4wNDEzIDE2LjMyMjMgMTYuMDM4MyAxNi4zNDU3IDE2LjA0NDJDMTYuNTY1NSAxNi4wOTgyIDE2LjU2NDUgMTYuMDk2MiAxNi43NyAxNi4wNDEzQzE2LjgyMTkgMTYuMDI3NSAxNi44Nzc5IDE2LjAzOTMgMTYuOTMwOCAxNi4wMzM0QzE3LjA2OTIgMTYuMDE3NyAxNy4yMDQ1IDE2LjA0MzIgMTcuMzQ4IDE1Ljk4MTRDMTcuNDkxNCAxNS45MTk2IDE3LjY0ODEgMTYuMDMwNSAxNy43OTY3IDE2LjA3ODZDMTcuOTI5IDE2LjEyMDggMTguMDU5MiAxNi4xNjg5IDE4LjIwNDcgMTYuMTY0TDE4Ljc1MDEgMTYuMTU3MUMxOC45MTQ5IDE2LjE2MyAxOC45MjUxIDE2LjE0MjQgMTkuMDAwNCAxNi4wOTA0QzE5LjAxMzYgMTYuMDc4NiAxOS4wNDkyIDE2LjA3MDcgMTkuMDMxOSAxNi4wNDcyQzE4Ljk1OTcgMTUuOTQ1MSAxOC44NzczIDE1Ljk1MyAxOS4wNzM2IDE1Ljk0MDJDMTkuMDgyOCAxNS45MzkyIDE5LjA4MjggMTUuOTIzNSAxOS4wNzI2IDE1LjkxOTZDMTguOTUzNiAxNS44NDIxIDE5LjAxMTYgMTUuNzIzMyAxOS4wMTU2IDE1LjYyODFDMTkuMDI4OSAxNS4yNTYyIDE4Ljg5NzYgMTQuODkxMSAxOC45NDU0IDE0LjUxODJDMTguOTUzNiAxNC40NTg0IDE4LjkyMzEgMTQuMzc2OSAxOC45NjE3IDE0LjM0MTZDMTkuMDQ0MSAxNC4yNjcgMTguOTExOSAxNC4yMzA3IDE4Ljk0MDQgMTQuMTY1OUMxOC45NjQ4IDE0LjExMTkgMTguOTE3IDE0LjAzMTUgMTguOTUwNSAxMy45ODUzQzE5LjA3MTYgMTMuODIwNSAxOS4wMzUgMTMuNjM2IDE4Ljk5NDMgMTMuNDgwOUMxOC45NTY2IDEzLjMzNTcgMTguOTEzOSAxMy4xODU1IDE4Ljk1NDYgMTMuMDU1QzE5LjAzNSAxMi43OTY5IDE4Ljk5OTQgMTIuNTQxOCAxOS4wMDc1IDEyLjI4NDdDMTkuMDE2NyAxMi4wMjE3IDE5LjAxNDYgMTEuNzU4NyAxOS4wMDc1IDExLjQ5NDdDMTkuMDA0NSAxMS4zODY3IDE5LjA1NDMgMTEuMjcxOSAxOC45NDc1IDExLjE3MThDMTguOTI2MSAxMS4xNTEyIDE4LjkzODMgMTEuMTAzMSAxOC45NDU0IDExLjA2ODhDMTguOTYzOCAxMC45ODczIDE5LjAwNTUgMTAuOTA3OCAxOS4wMDU1IDEwLjgyNzNDMTkuMDA1NSAxMC43NDY5IDE4Ljk2MjcgMTAuNjY3NCAxOC45NDU0IDEwLjU4NTlDMTguOTMyMiAxMC41MjAyIDE4Ljk0NTQgMTAuNDU5MyAxOC44ODk1IDEwLjM5MTZDMTguODQ3OCAxMC4zNDI2IDE4Ljg4MjQgMTAuMjU2MiAxOC45MzgzIDEwLjE3ODdDMTkuMDUwMiAxMC4wMjQ2IDE5LjE2NDIgOS44NjQ2NCAxOS4xNDM5IDkuNjY3MzlDMTkuMTI2NiA5LjQ5MjcxIDE5LjE0MzkgOS4zMTcwNCAxOS4xMzc3IDkuMTQxMzhDMTkuMTM1NyA5LjA2Nzc4IDE5LjE0MzkgOC45OTgxIDE5LjA5MDkgOC45MTk2QzE5LjA0MzEgOC44NDg5NCAxOS4wNjM1IDguNzMwMTkgMTkuMDk4MSA4LjY0MzgzQzE5LjE1MyA4LjUwODQxIDE5LjE2MTIgOC4zODM3OCAxOS4wOTgxIDguMjUxMjlDMTkuMDc1NyA4LjIwNjE1IDE5LjA3NjcgOC4xNTEyIDE5LjA3NTcgOC4xMDExNVY3LjE3OTY1QzE5LjA3NTcgNy4wODY0MyAxOS4wNTUzIDcuMDU5OTMgMTkuMTI3NiA3LjAyMzYyQzE5LjAzMDkgNy4wMTk2OSAxOS4wNTMzIDYuOTkwMjUgMTkuMDQzMSA2Ljk2MDgxQzE5LjAzMTkgNi45MjI1NCAxOS4wMjg5IDYuODU4NzUgMTguOTg2MSA2LjgyNDRDMTguOTMzMiA2Ljc4MzE5IDE4Ljg3NzMgNi43NzYzMiAxOC43OTU5IDYuODMzMjRDMTguNjgzOSA2Ljg4NDI3IDE4LjU0OTYgNi44MDA4NSAxOC40Mjg2IDYuODc1NDNDMTguNDA2MiA2Ljg4OTE3IDE4LjM1ODMgNi44MzcxNiAxOC4zMjQ4IDYuODQyMDdDMTguMTg2NCA2Ljg2MDcxIDE4LjAzNjggNi43NzgyOCAxNy45MDk2IDYuOTAwOTVDMTcuODk5NSA2LjkxMTc0IDE3Ljg2ODkgNi45MTA3NiAxNy44NTY3IDYuOTAwOTVDMTcuNjk4IDYuNzc1MzQgMTcuNTQwMyA2Ljg3MDUzIDE3LjM4MjYgNi45MDI5MUMxNy4yMTA2IDYuOTM5MjIgMTcuMDUzOSA2LjgzNjE4IDE2Ljg4NiA2LjgzODE0QzE2LjY5NDcgNi44NDEwOSAxNi40OTYzIDYuODc4MzggMTYuMzE0MiA2LjgzMDI5QzE2LjAwMTggNi43NDY4OCAxNS42OTA1IDYuNzg4MDkgMTUuMzgwMSA2Ljc3ODI4QzE1LjA2MjcgNi43Njg0NyAxNC43NDMyIDYuNzY5NDUgMTQuNDI1NyA2Ljc3ODI4QzE0LjI4NzQgNi43ODIyMSAxNC4xNSA2LjgyNjM3IDE0LjAxMTYgNi44MzYxOEMxMy44NTggNi44NDY5OCAxMy43MDIzIDYuODM4MTQgMTMuNTQ3NiA2LjgzODE0TDEzLjExMTEgNi44MzYxOEMxMy4wNDMgNi44MzQyMiAxMi45Njc3IDYuODcwNTMgMTIuOTA3NiA2Ljc5MjAyQzEyLjg5NTQgNi43NzYzMiAxMi44NTM3IDYuNzcwNDMgMTIuODM2NCA2Ljc4MjIxQzEyLjcxMTMgNi44NjY2IDEyLjU5MTIgNi44NjE3IDEyLjQ2NSA2Ljc4NTE1QzEyLjQyOTQgNi43NjM1NiAxMi4zNzU1IDYuNzgzMTkgMTIuMzMyOCA2Ljc3MjM5QzEyLjIxMzcgNi43NDA5OSAxMi4xMTA5IDYuODE0NTkgMTIgNi44MzcxNkMxMS44OTgzIDYuODU4NzUgMTEuNzgzMyA2Ljc4MDI0IDExLjY5MjggNi44OTcwMkMxMS42ODA1IDYuOTEyNzMgMTEuNjMwNyA2LjkxMzcxIDExLjYxNDQgNi44OTgwMUMxMS40MTA5IDYuNzAxNzMgMTEuMTc3OSA3LjAyNzU0IDEwLjk3NDQgNi44NDY5OEMxMC44OTMgNi45NTg4NSAxMC44MDk2IDYuODMxMjcgMTAuNzQ1NSA2Ljg0Njk4QzEwLjY1MTkgNi44NzE1MSAxMC41NjIzIDYuOTAwOTUgMTAuNDY1NyA2Ljg5ODk5QzEwLjM3NTEgNi44OTcwMiAxMC4yODM1IDYuODkyMTIgMTAuMTkzIDYuODk4OTlDMTAuMDI3MSA2LjkxMjczIDkuODU5MjMgNi44NjE3IDkuNjkzMzggNi45NTI5NkM5LjYzODQzIDYuOTgzMzggOS41MzQ2NSA3LjAwMzAxIDkuNDY2NDggNi45MTQ2OUM5LjQ1OTM1IDYuODk4OTkgOS40MDU0MyA2LjkwMDk1IDkuNDA5NSA2LjkwNTg2QzkuMzcwODMgNi45MzcyNiA5LjI4MjMxIDYuODc1NDMgOS4xMjk2OCA2Ljc5MjAyQzkuMDQ4MjkgNi43MzYwOCA4Ljk1NjcxIDYuNjU5NTQgOC45MDM4IDYuNTcxMjFDOC44NzUzMSA2LjUyODA0IDguOTMxMjcgNi40Mzc3NSA4Ljk3NDAxIDYuMzczOTZDOS4wNDIxOCA2LjI2MjA5IDkuMTQyOTEgNi4xMzI1NSA5LjMwMTY0IDYuMDg5MzdDOS41MDYxNiA2LjA0NzE3IDkuNTYyMTIgNi4wNzg1NyA5LjczMDAxIDYuMDc1NjNMOS43MzQwOCA2LjA4MTUyWiIgZmlsbD0iIzgwODA4MCIvPgo8L3N2Zz4K');
  }

  @media screen and (min-width: 1024px) {
    .header-search__input::-webkit-search-cancel-button {
      top: 0.1875rem;
    }
  }

  .header-search__content {
    max-width: 100%;
  }

  @media screen and (max-width: 1023px) {
    .header-search {
      align-content: start;
    }

    .header-search__content {
      width: 100%;
      min-height: 0;
    }
  }

  .header-search__recent-searches {
    display: grid;
    row-gap: calc(var(--spacing) * 6);
    width: 100%;
    padding-block-start: calc(var(--spacing) * 4);

    &[hidden] {
      display: none;
    }

    @media screen and (min-width: 1024px) {
      padding-inline: 0;
      padding-block-start: 0;
    }
  }

  .header-search__recent-list {
    display: grid;
    gap: 0.625rem;
    justify-items: flex-start;
    padding-inline-start: 0;

    & li {
      display: flex;
      min-height: 1.875rem;
      /* Retrait horizontal nul, des deux côtés : rien ne peint le fond de la
         puce — le `border-radius` et la transition ci-dessous n'ont aucune règle
         de survol en face — donc ce padding ne faisait que pousser l'icône vers
         la droite, hors de l'alignement des titres du panneau. */
      padding-block: 0.4375rem;
      padding-inline: 0;
      justify-content: center;
      align-items: center;
      border-radius: 3px;
      transition: 0.15s ease-out;
    }

    & a {
      display: flex;
      align-items: center;
      gap: calc(var(--spacing) * 3);
      color: inherit;
    }
  }

  .header-search__recent-icon {
    display: flex;
    inline-size: 1rem;
    block-size: 1rem;
    flex: 0 0 auto;

    & svg {
      inline-size: 1rem;
      block-size: 1rem;
    }
  }

  /* `snippets/picture.liquid` enveloppe l'image dans un `<picture>`. Les règles
     `img { aspect-ratio; height }` des blocs push ci-dessous visent l'image en
     enfant direct de son `<a>` : sortir le `<picture>` du flux le leur rend, et
     le rendu reste identique à ce qu'il était avant la bascule vers le snippet. */
  .header-search__push picture {
    display: contents;
  }

  .header-search__push {
    display: grid;
    row-gap: calc(var(--spacing) * 16);

    @media screen and (min-width: 1024px) {
      display: grid;
      grid-template-columns: var(--header-search-columns);
      /* Une piste par bloc de la colonne 1 — jamais une de plus : `row-gap`
         s'applique entre toutes les pistes déclarées, y compris vides, donc une
         piste en trop se paie en écart visible. D'où la variante ci-dessous
         plutôt qu'une quatrième piste inconditionnelle.

         La déclaration doit rester complète : les `grid-row: 1 / -1` du filet et
         de la colonne 3 se calent sur la dernière ligne *explicite*. */
      grid-template-rows: 0fr auto auto;

      /* L'historique n'est rendu que s'il reste une entrée après filtrage sur la
         requête ; sinon le conteneur porte `hidden` et n'occupe aucune piste. */
      &:has(.header-search__recent-searches:not([hidden])) {
        grid-template-rows: auto 0fr auto auto;
      }

      & > .header-search__recent-searches {
        grid-column: 1;
        grid-row: 1;
      }

      column-gap: var(--header-search-column-gap);
      align-items: start;
      align-content: start;
    }

    & .block-push-related-search {
      display: none;
    }

    &[hidden] {
      display: none;
    }
  }

  .block-trending-search {
    display: grid;
    row-gap: calc(var(--spacing) * 8);
    padding-top: calc(var(--spacing) * 8);

    @media screen and (min-width: 1024px) {
      grid-column: 1 / span 1;
      padding-top: initial;
    }

    & .block-trending-search__title {
      padding-left: 1rem;

      @media screen and (min-width: 1024px) {
        padding-left: 0;
      }
    }

    & .inside {
      overflow: scroll;
      width: 100%;
      padding-inline: 1rem;

      @media screen and (min-width: 1024px) {
        padding-inline: 0;
      }

      & ul {
        display: flex;
        column-gap: calc(var(--spacing) * 6);
        width: max-content;
        flex-wrap: nowrap;

        & li {
          display: flex;
          height: 1.875rem;
          padding: 0.4375rem 0.5rem;
          justify-content: center;
          align-items: center;
          border-radius: 3px;
          color: var(--Content-secondary, #4d4d4d);

          border: 1px solid var(--Border-secondary, #717171);

          color: var(--Content-secondary, #4d4d4d);
          transition: 0.15s ease-out;

          & :hover {
            text-decoration: var(--color-black);
          }
        }
      }
    }

    & a {
      color: inherit;
    }
  }

  .block-push-iconics {
    display: grid;
    row-gap: calc(var(--spacing) * 8);

    @media screen and (min-width: 1024px) {
      grid-column: 1 / span 1;
    }

    .block-push-iconics__title {
      padding-left: 1rem;

      @media screen and (min-width: 1024px) {
        padding-left: 0;
      }
    }

    .inside {
      overflow: scroll;
      width: 100%;
      padding-inline: 1rem;

      @media screen and (min-width: 1024px) {
        padding-inline: 0;
      }

      .block-push-iconics__container {
        display: flex;
        column-gap: calc(var(--spacing) * 5);
        width: max-content;
        flex-wrap: nowrap;

        @media screen and (min-width: 1024px) {
          width: 100%;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          column-gap: calc(var(--spacing) * 10);
        }

        .block-push-iconics__push {
          max-width: 73.07vw;
          display: grid;
          row-gap: calc(var(--spacing) * 8);
          text-align: center;
          grid-template-rows: auto 1fr;
          padding-bottom: var(--spacings-small-xl, 1rem);

          @media screen and (min-width: 1024px) {
            max-width: unset;
          }

          a {
            display: grid;
          }

          img {
            aspect-ratio: 4 / 3;
            height: 100%;
          }

          .push__text {
            display: flex;
            flex-flow: column nowrap;
            align-items: flex-start;
            justify-content: flex-start;
            row-gap: calc(var(--spacing) * 4);
            text-align: start;

            .push__link {
              padding-top: var(--spacings-small-l);
              justify-self: center;
            }

            & a {
              margin-block-start: auto;
            }
          }
        }
      }
    }
  }

  .block-push-new-trending {
    display: grid;
    margin-block-start: 1.25rem;
    row-gap: calc(var(--spacing) * 8);

    @media screen and (min-width: 1024px) {
      grid-column: 1 / span 1;
      margin-block-start: 0rem;
    }

    & .block-push-new-trending__title {
      padding-left: 1rem;

      @media screen and (min-width: 1024px) {
        padding-inline: 0;
      }
    }

    & .inside {
      overflow: scroll;
      width: 100%;
      padding-inline: 1rem;

      @media screen and (min-width: 1024px) {
        padding-inline: 0;
      }

      & .block-push-new-trending__container {
        display: flex;
        column-gap: calc(var(--spacing) * 5);
        width: max-content;
        flex-wrap: nowrap;

        @media screen and (min-width: 1024px) {
          width: 100%;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          column-gap: calc(var(--spacing) * 10);
        }

        & .block-push-new-trending__push {
          max-width: 73.07vw;
          display: grid;
          width: 100%;
          align-content: flex-start;
          row-gap: calc(var(--spacing) * 8);
          padding-bottom: var(--spacings-small-xl, 1rem);

          .push__text {
            display: grid;
            row-gap: calc(var(--spacing) * 4);
          }

          & a {
            display: grid;
          }

          & img {
            aspect-ratio: 4 / 3;
            width: 100%;
          }
        }
      }
    }
  }

  .border-desktop {
    display: none;

    @media screen and (min-width: 1024px) {
      grid-column: 2 / span 1;
      grid-row: 1 / -1;
      display: block;
      width: 0.0625rem;
      background-color: var(--Gris-Nacre, #e6e5e5);
      height: 100%;
    }
  }

  .block-push-about-diptyque {
    display: grid;
    border-top: 1px solid var(--Gris-Nacre, #e6e5e5);
    padding-top: calc(var(--spacing) * 16);
    row-gap: calc(var(--spacing) * 8);
    margin-inline: 1rem;

    @media screen and (min-width: 1024px) {
      grid-column: 3 / span 1;
      grid-row: 1 / -1;
      margin-inline: 0;
      border-top: none;
      align-self: flex-start;
      padding-top: 0;
    }

    .inside {
      overflow: scroll;
      width: 100%;

      .block-push-about-diptyque__container {
        display: grid;

        .block-push-about-diptyque__push {
          display: grid;
          align-content: start;
          row-gap: calc(var(--spacing) * 8);

          .push__text {
            text-align: start;
            display: flex;
            flex-flow: column nowrap;
            align-items: flex-start;
            justify-content: flex-start;
            row-gap: calc(var(--spacing) * 4);

            .push__link {
              padding-top: var(--spacings-small-l);
              justify-self: center;
            }
          }

          img {
            aspect-ratio: 4 / 3;
            height: 100%;
          }
        }
      }
    }

    & .customer-service {
      display: grid;
      padding-top: calc(var(--spacing) * 12);
      row-gap: calc(var(--spacing) * 8);

      & .customer-service__menu {
        display: grid;
        row-gap: calc(var(--spacing) * 6);

        & .customer-service__item {
          display: flex;
          align-items: center;
          column-gap: calc(var(--spacing) * 5);
        }
      }
    }
  }

  .block-push-related-search {
    display: grid;
    border-top: 1px solid var(--Gris-Nacre, #e6e5e5);
    padding-top: calc(var(--spacing) * 16);
    row-gap: calc(var(--spacing) * 8);

    @media screen and (min-width: 1024px) {
      grid-column: 3 / span 1;
      grid-row: 1 / span 2;
      border-top: none;
      align-self: flex-start;
      padding-top: 0;
      margin-inline: 0;
    }

    .inside {
      overflow: scroll;
      width: 100%;

      .block-push-related-search__container {
        display: grid;

        .block-push-related-search__push {
          display: grid;
          align-content: start;
          row-gap: calc(var(--spacing) * 8);

          .push__text {
            text-align: left;
            display: grid;

            row-gap: calc(var(--spacing) * 4);
            padding: 0 0 var(--spacings-small-xl, 1rem) 0;

            .push__link {
              padding-top: var(--spacings-small-l);
              justify-self: flex-start;
            }
          }

          img {
            aspect-ratio: 4 / 3;
            height: 100%;
          }
        }
      }
    }
  }

  [data-predictive-result] {
    display: none;

    @media screen and (min-width: 1024px) {
      position: relative;
      grid-column: 1 / span 1;
      border-top: none;
      display: none;
      height: fit-content;
    }

    &:has(.is-open),
    &:has(.is-no-result) {
      display: block;

      @media screen and (min-width: 1024px) {
        display: block;
      }
    }
  }

  .predictive-queries {
    display: grid;
    padding-inline: 1rem;

    @media screen and (min-width: 1024px) {
      padding-inline: 0;
      padding: 0;
    }

    &:empty {
      padding: 0;
    }

    & li {
      padding-block: 0.3125rem;

      & em {
        font-style: normal;
        font-weight: 700;
      }

      & mark {
        background-color: transparent;
        font-weight: 400;
      }

      &:first-child {
        padding-block-start: 0;
      }
    }
  }

  .header-search__product-result {
    display: grid;
    gap: calc(var(--spacing) * 8);
    padding-inline: 1rem;

    @media screen and (min-width: 1024px) {
      padding-inline: 0;
    }

    & .result-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    & .container-result {
      display: grid;
      gap: calc(var(--spacing) * 10);
      grid-template-columns: repeat(2, minmax(9.375rem, 1fr));

      @media screen and (min-width: 1024px) {
        display: flex;
        align-content: flex-start;
        height: fit-content;
        flex-wrap: wrap;
      }
    }

    & .product-card {
      @media screen and (min-width: 1024px) {
        max-width: calc(20% - 1.25rem);
        min-width: 8.625rem;
        height: auto !important;
      }
    }
  }

  @media screen and (min-width: 1024px) {
    .header-search__logo {
      display: block;
    }

    /* Le filet est porté par l'input et non par le formulaire : mesuré sur la
       prod, il démarre après la loupe et s'arrête avant la croix. Son
       `padding-bottom` vaut 4px — le trait colle au texte, l'air sous la barre
       vient du `padding-bottom` du formulaire, pas d'ici. */
    .header-search__input {
      width: 100%;
      border: none;
      border-bottom: 1px solid var(--color-gris-nacre, #e6e5e5);
      box-sizing: border-box;
      font-family: 'Apercu Pro', sans-serif;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5rem;
      letter-spacing: 0.00625rem;
      padding: 0 0 var(--spacing);
    }

    .header-search__icon-search {
      display: block;
    }

    .header-search {
      padding-top: calc(var(--spacing) * 12);
      padding-inline: calc(var(--spacing) * 16);
    }

    /* 24px sous le filet, comme la prod. Le `@media (width >= 64rem)` imbriqué
       qui portait 48px est retiré : 64rem et le 1024px du bloc parent sont le
       même point de rupture, il ne pouvait donc qu'écraser la valeur voulue. */
    .header-search__form-search {
      width: 100%;
      padding: 0;
      padding-bottom: calc(var(--spacing) * 6);
      display: grid;
      grid-template-columns: auto 1fr;
      border: none;
    }
  }
}

/* ─── Algolia trending search block ───────────────────────────────────────── */
.block-algolia-trending-search {
  display: grid;
  row-gap: calc(var(--spacing) * 8);
  padding-top: calc(var(--spacing) * 8);

  @media screen and (min-width: 1024px) {
    grid-column: 1 / span 1;
    padding-top: initial;
  }

  /* Rien à lister (index vide, requête en échec, Algolia non configuré) : le
     retrait mobile tombe avec le contenu. L'enveloppe, elle, reste une piste de
     la grille — la passer en `display: none` rejouerait le placement automatique
     contre le `grid-template-rows: 0fr auto auto` de `.header-search__push`, et
     le push suivant hériterait de la piste `0fr`, donc d'une hauteur
     min-content. */
  &:has(algolia-trending[hidden]) {
    padding-top: 0;
  }

  algolia-trending {
    display: grid;
    row-gap: calc(var(--spacing) * 8);

    /* Le `display: grid` ci-dessus l'emporte sur le `display: none` que la
       feuille UA attache à `[hidden]` : sans cette paire, l'attribut ne
       masquerait rien. Le titre du bloc est rendu à l'intérieur de cet élément,
       donc il se masque avec lui. Même appariement que `.header-search__push`. */
    &[hidden] {
      display: none;
    }
  }

  .block-trending-search__title {
    padding-left: 1rem;

    @media screen and (min-width: 1024px) {
      padding-left: 0;
    }
  }

  & .inside {
    overflow: scroll;
    width: 100%;
    padding-inline: 1rem;

    @media screen and (min-width: 1024px) {
      padding-inline: 0;
    }

    & ul {
      display: flex;
      gap: calc(var(--spacing) * 6);
      flex-wrap: wrap;

      @media screen and (max-width: 1023px) {
        width: max-content;
        flex-wrap: nowrap;
      }

      & li {
        display: flex;
        height: 1.875rem;
        padding: 0.4375rem 0.5rem;
        justify-content: center;
        align-items: center;
        border-radius: 3px;
        color: var(--Content-secondary, #4d4d4d);
        border: 1px solid var(--Border-secondary, #717171);
        transition: 0.15s ease-out;
      }
    }
  }

  & a {
    color: inherit;
  }
}

/* ─── Algolia results layout ───────────────────────────────────────────────── */
[data-algolia-results] {
  width: 100%;
  display: grid;
  row-gap: calc(var(--spacing) * 16);

  @media screen and (min-width: 1024px) {
    /* Même gabarit que l'état vide, déclaré sur `.header-search` — les deux ne
       peuvent donc plus diverger. Le repli garde la règle valide si le point de
       bascule de la déclaration et celui d'ici venaient à ne plus coïncider. */
    grid-template-columns: var(
      --header-search-columns,
      65.58vw 0.0625rem 21.38vw
    );
    column-gap: var(--header-search-column-gap, calc(var(--spacing) * 20));
    align-items: start;
    align-content: start;
  }

  &[hidden] {
    display: none;
  }

  & .algolia-results__main {
    display: grid;
    row-gap: calc(var(--spacing) * 8);

    @media screen and (min-width: 1024px) {
      grid-column: 1;
      grid-row: 1;
    }
  }

  & .algolia-results__border {
    display: none;

    @media screen and (min-width: 1024px) {
      display: block;
      grid-column: 2;
      grid-row: 1;
      width: 0.0625rem;
      background-color: var(--Gris-Nacre, #e6e5e5);
      align-self: stretch;
    }
  }

  & .algolia-results__sidebar {
    display: grid;
    row-gap: calc(var(--spacing) * 12);
    padding-inline: 1rem;

    @media screen and (min-width: 1024px) {
      grid-column: 3;
      grid-row: 1;
      padding-inline: 0;
    }

    [data-algolia-explore] {
      &:empty,
      &[hidden] {
        display: none;
      }

      /* Le push reprend le design de `_push-iconics`, mais son container est
         dimensionné pour l'empty state (3 colonnes au desktop, carrousel
         horizontal au mobile). Dans cette sidebar les pushes s'empilent sur une
         seule colonne, et les paddings latéraux sont déjà portés par elle. */
      .block-push-iconics__title {
        padding-left: 0;
      }

      .inside {
        overflow: visible;
        padding-inline: 0;
      }

      .block-push-iconics__container {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        row-gap: calc(var(--spacing) * 8);

        & .block-push-iconics__push {
          max-width: unset;
        }
      }
    }
  }

  & em {
    font-style: normal;
    font-weight: 700;
  }
}

/* Algolia query suggestions — reprend exactement .predictive-queries */
[data-algolia-queries] .predictive-queries {
  padding-inline: 1rem;
  padding-top: 1rem;

  @media screen and (min-width: 1024px) {
    padding-inline: 0;
    padding-top: 0;
  }
}

/* ─── Algolia sidebar panels (explore, sections) ──────────── */
.algolia-sidebar__section {
  display: grid;
  row-gap: calc(var(--spacing) * 8);
}

.algolia-sidebar__list {
  display: grid;
  row-gap: 1.25rem;

  .algolia-sidebar__section {
    display: grid;
    row-gap: calc(var(--spacing) * 20);
  }

  .algolia-sidebar__link {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  & a {
    color: inherit;
  }
}

.button--header-search {
  block-size: 1.25rem;
  padding-inline: initial;
  font-size: 0.875rem;
  background-color: transparent;
  border: none;
  box-shadow: none;
  appearance: none;
  text-decoration: underline;
  text-underline-offset: calc(var(--spacing) * 3);
  transition: 0.3s ease;

  &:hover {
    text-underline-offset: calc(var(--spacing) * 2);
  }

  &::after {
    content: '';
    position: absolute;
    inline-size: calc(100% + 1rem);
    block-size: calc(100% + 1.5rem);
    top: calc(50% - 0.25rem);
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/* ── Chrome de la recherche ───────────────────────────────────────────────
     Le formulaire, l'input et le bouton submit sont désormais rendus par le
     thème lui-même (composant SearchForm) avec ses propres classes : plus
     aucun wrapper `.aa-*` à neutraliser, et plus de règles !important pour
     masquer un bouton clear que la lib n'injecte plus. autocomplete-core est
     headless — il ne produit aucun DOM. */

/* Occupe la piste 1fr du conteneur sans repousser le bouton de fermeture :
     min-width:0 laisse la piste rétrécir sous la largeur du contenu. */
.header-search__autocomplete {
  width: 100%;
  min-width: 0;
}

.header-search__autocomplete .header-search__form-search {
  display: flex;
  align-items: center;
  /* 10px, la valeur de la prod. Hors de l'échelle de 4px du thème, d'où la
     valeur littérale — `calc(var(--spacing) * 2.5)` dirait la même chose en
     moins lisible. C'est cette règle qui s'applique, pas le `column-gap` du
     layer : le bloc n'est pas layered. */
  column-gap: 10px;
  width: 100%;
  min-width: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
}

/* Le formulaire est sorti de ce reset : il portait `border: none`, ce qui
   effaçait le filet du design dès que le champ prenait le focus — c'est-à-dire
   en permanence, le panneau ne s'ouvrant que focus pris. Seuls la boîte de focus
   du navigateur et l'ombre sont neutralisées ici. */
.header-search__autocomplete .header-search__form-search:focus-within {
  outline: none;
  box-shadow: none;
}

/* Bords neutralisés un par un plutôt qu'avec le raccourci `border`, qui
   emportait aussi `border-bottom` : ce bloc vit hors `@layer components`, donc
   il bat le filet du design quelle que soit la spécificité, et la variante
   `:focus` le battait même une fois le layer contourné. C'est ce qui avait fait
   disparaître le trait sous le champ. Ce qui reste à neutraliser ici, c'est la
   boîte du navigateur — pas la maquette. */
.header-search__autocomplete .header-search__input,
.header-search__autocomplete .header-search__input:focus,
.header-search__autocomplete .header-search__input:focus-visible {
  border-top: none;
  border-right: none;
  border-left: none;
  outline: none;
  box-shadow: none;
  border-radius: 0;
}

/* Pas d'`appearance: none` ici : sur un `input[type="search"]`, cette seule
   déclaration supprime les décorations natives du champ — dont
   `::-webkit-search-cancel-button`, la croix d'effacement que le thème restyle
   plus haut avec l'icône de marque. Le reste du chrome natif est déjà neutralisé
   explicitement (bords, contour, ombre, fond), donc `appearance` n'a plus rien à
   couvrir et coûtait la croix. */
.header-search__autocomplete .header-search__input {
  flex: 1;
  width: 100%;
  min-width: 0;
  background-color: transparent;
}

/* Bouton submit = l'icône de recherche de la marque. */
.header-search__autocomplete .header-search__icon-search {
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: currentColor;
  cursor: pointer;
}

.header-search__autocomplete .header-search__icon-search svg {
  width: 1.5rem;
  height: 1.5rem;
  display: block;
}

/* Le champ n'a pas de place pour un libellé visible, mais le combobox doit
   avoir un nom accessible : getInputProps() et getRootProps() renvoient tous
   deux un aria-labelledby qui pointe ici. */
.header-search__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Item actif de la navigation clavier ──────────────────────────────────
   aria-selected est posé par getItemProps() : une seule source de vérité pour
   l'état ARIA et pour le rendu, donc les deux ne peuvent pas diverger. Les
   flèches déplacent cet état ; sans repère visuel la navigation est
   inutilisable. Le même attribut suit le survol souris (onMouseMove), ce qui
   aligne gratuitement les deux modes de pointage. */
[data-algolia-results] .predictive-queries li[aria-selected='true'] p,
[data-algolia-results] .algolia-sidebar__list li[aria-selected='true'] a {
  text-decoration: underline;
  text-underline-offset: calc(var(--spacing) * 2);
}

/* Repère purement clavier : `ProductCard` retire `onMouseMove` de `itemProps`,
   donc `aria-selected` ne peut plus venir du pointeur. Inutile de neutraliser
   quoi que ce soit au survol — il n'y a plus rien à neutraliser. */
[data-algolia-results] .product-card[aria-selected='true'] {
  outline: 1px solid var(--color-black);
  outline-offset: calc(var(--spacing) * 2);
}

/* Les listes portent role="listbox" via getListProps() ; le rôle ne doit rien
   changer au rendu — les puces sont déjà retirées par les règles ci-dessus,
   mais un role explicite fait retomber certains navigateurs sur le style par
   défaut de la liste. */
[data-algolia-results] [role='listbox'] {
  list-style: none;
}
/* END_SECTION:algolia-header-search */

/* START_SECTION:algolia-main-collection (INDEX:4) */
/* ⚠ Auto-generated from src/sections/algolia-main-collection/algolia-main-collection.css — do not edit directly. */
/* src/sections/algolia-main-collection/algolia-main-collection.css */
/* Les feuilles partagées (link, cta, gallery_list, algolia-filter-shared) sont
   servies par assets/theme-shared.css — voir src/assets/theme-shared.css.
   Ne pas les réimporter ici : preprocessCSS les recopierait dans ce bloc. */
@layer components {
  .hero-search {
    display: grid;
    row-gap: calc(var(--spacing) * 4);
    text-align: center;
    padding-block-start: calc(var(--spacing) * 16);
    padding-inline: calc(var(--spacing) * 8);

    @media (width >=48rem) {
      padding-block-start: calc(var(--spacing) * 20);
    }

    & h1 {
      color: var(--color-content-primary);
    }

    & p {
      color: var(--color-content-secondary);
    }

    & form {
      background: var(--color-white);
      display: flex;
      align-items: center;
      width: 100%;
      padding: 1.25rem 1rem 2.5rem 1rem;
      column-gap: calc(var(--spacing) * 5);

      @media (width >=64rem) {
        max-width: 20.25rem;
        justify-self: center;
      }

      & input[type='search'] {
        flex: 1;
        padding-bottom: 0.3125rem;
        border-bottom: 1px solid var(--Gris-Nacre, #e6e5e5);
        background: transparent;
      }
    }
  }

  .no-result-search {
    display: grid;
    text-align: center;
    row-gap: calc(var(--spacing) * 16);
    padding-block: calc(var(--spacing) * 20);

    & .search-grid {
      display: grid;
      gap: calc(var(--spacing) * 10);
      grid-template: auto / repeat(2, 1fr);
      column-gap: calc(var(--spacing) * 10);
      row-gap: calc(var(--spacing) * 15);
      padding-inline: calc(var(--spacing) * 8);
      padding-block-start: calc(var(--spacing) * 16);
      @media (width >=64rem) {
        grid-template-columns: repeat(4, 1fr);
        margin-inline: auto;
        padding-inline: calc(var(--spacing) * 16);
      }
    }
  }

  /* ── Algolia IS — hits grid ─────────────────────────────────────────────── */

  /* Hits grid is a `<ul data-ais-grid class="collection-grid">` — neutralize list chrome */
  [data-ais-hits] ul,
  [data-ais-hits] ol,
  .ais-InfiniteHits-list.collection-grid,
  ul.collection-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    min-height: 100vh;
  }

  [data-ais-hits] li,
  .ais-hits-item,
  ul.collection-grid > li {
    list-style: none;
  }

  /* Hide load-more button when all results are displayed */
  .ais-load-more--disabled {
    display: none;
  }

  /* ── Algolia IS — dynamicWidgets / refinementList ────────────────────────── */

  /* Keep the IS wrapper transparent so it inherits the parent grid */
  .ais-DynamicWidgets {
    display: contents;
  }

  /* `dynamicWidgets` crée un conteneur par attribut de `facetOrdering`, avant
     même de savoir s'il aura des valeurs. Quand la facette revient vide, le
     rendu ne produit rien mais le conteneur reste — et comme le wrapper est en
     `display: contents`, il devient un item de la grille du panneau : il ne se
     voit pas, mais il consomme une rangée, donc une deuxième `row-gap`. C'est
     le double écart observé entre Contenance et Format sur les collections où
     Sélections n'a aucune valeur. */
  .ais-DynamicWidgets-widget:empty {
    display: none;
  }

  /* Facet value list */
  .ais-rl-list {
    display: grid;
    row-gap: calc(var(--spacing) * 5);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  /* IS v4: <label> wraps <input>, so override the sibling-based checkbox layout */
  li.input-checkbox:has(.ais-RefinementList-label) {
    display: block;
  }

  /* The IS v4 label takes the flex role instead of the li */
  .ais-RefinementList-label {
    display: flex;
    column-gap: 0.5rem;
    align-items: center;
    cursor: pointer;
    width: 100%;
  }

  .ais-RefinementList-checkbox {
    accent-color: var(--color-black);
    flex-shrink: 0;
  }

  .ais-RefinementList-labelText {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 140%;
  }

  /* Disabled item (count = 0, not refined) */
  li.input-checkbox:has(input:disabled) .ais-RefinementList-label {
    color: var(--color-gray-nacre);
  }

  /* Per-facet IS render container */
  .ais-facet-container {
    padding-block-start: calc(var(--spacing) * 8);
  }

  /* See all / See less link */
  .ais-show-more {
    margin-block-start: calc(var(--spacing) * 5);
    display: inline-block;
  }

  /* ── Algolia IS — active filter tags ───────────────────────────────────── */

  /* Le tag cliquable pour désactiver un filtre */
  .tag_filter {
    cursor: pointer;
  }

  .tag_filter svg {
    width: calc(var(--spacing) * 6);
    flex-shrink: 0;
  }

  /* ── Query Rule Banner (page search) ──────────────────────────────────────── */
  /* Réutilise .block-push-related-search — override grid-column (pas de contexte grid ici) */
  [data-ais-rule-banner]:not(:empty) {
    margin-block-end: calc(var(--spacing) * 12);
  }

  [data-ais-rule-banner] .block-push-related-search {
    grid-column: unset;
    grid-row: unset;
    max-width: 30rem;
  }
}

@layer components {
  /* Réservation de la boîte grille avant le premier rendu Preact.
   *
   * `[data-ais-hits]` sort du serveur vide : la grille n'existe qu'après le
   * bundle, le CDN, la requête Algolia et le rendu. Mesuré en prod, le
   * conteneur passait de 0 à ~6848 px, ce qui poussait tout le groupe footer
   * — remonté sous la barre de filtres au premier paint — hors de l'écran.
   * C'était l'essentiel du CLS de la PLP.
   *
   * Le `:has()` tient sur l'état réel (une cellule rendue), pas sur la
   * présence du conteneur : `renderHitsSkeleton` crée `[data-ais-grid]` vide
   * ~300 ms avant l'arrivée des hits, et un garde sur le conteneur seul
   * relâcherait la réservation pendant cet intervalle — le footer remonterait
   * puis redescendrait, deux décalages au lieu d'un.
   *
   * La valeur reprend celle que `.collection-grid` porte déjà ci-dessous : le
   * plancher est donc continu au moment où Preact prend la main, sans saut. */
  [data-ais-hits]:not(:has([data-ais-grid] > *)) {
    min-height: 100vh;
  }

  .collection-grid {
    min-height: 100vh;
  }

  .collection-grid,
  .collection-grid--next {
    list-style: none;
    display: grid;
    justify-self: center;
    grid-template: auto / repeat(2, 1fr);
    column-gap: calc(var(--spacing) * 10);
    row-gap: calc(var(--spacing) * 15);
    padding-inline: calc(var(--spacing) * 8);
    padding-block-start: calc(var(--spacing) * 16);

    @media (width >=48rem) {
      padding-block-start: calc(var(--spacing) * 20);
    }

    li {
      list-style: none;
    }

    /* `video` était absent de cette liste : une vidéo de push plus large que sa
     * piste élargissait la colonne et décalait toute la grille. `max-width` +
     * `min-width: 0` sont le garde-fou standard contre ce débordement — la
     * piste doit pouvoir descendre sous la taille intrinsèque du média. */
    c-media-card.algolia-rule-push,
    c-media-card.algolia-rule-push .algolia-rule-push__media,
    c-media-card.algolia-rule-push picture,
    c-media-card.algolia-rule-push img,
    c-media-card.algolia-rule-push video {
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }

    c-media-card.algolia-rule-push .algolia-rule-push__media {
      display: block;
    }

    /* `video` était absent ici aussi : sans `height` ni `aspect-ratio`, une
     * vidéo de push se cale sur sa hauteur intrinsèque et ne s'aligne pas sur
     * les cartes produit voisines, alors que l'image le fait. */
    c-media-card.algolia-rule-push img,
    c-media-card.algolia-rule-push video {
      height: 100%;
      object-fit: cover;
      aspect-ratio: var(--ratio-mobile, 4 / 3);
    }

    /* Same span rule as search: `--push-columns` is on the `<li>` from HitsGrid. */
    .collection-grid > li[style*='--push-columns'],
    c-media-card.algolia-rule-push[style*='--push-columns'] {
      grid-column: span min(var(--push-columns), 2);
    }

    @media screen and (min-width: 768px) {
      .collection-grid > li[style*='--push-columns'],
      c-media-card.algolia-rule-push[style*='--push-columns'] {
        grid-column: span min(var(--push-columns), 4);
      }
    }
  }

  [data-rerender-more] {
    display: grid;
    justify-content: center;
    justify-items: center;
    row-gap: 1rem;
    padding-top: 2.5rem;
  }

  .collection-grid--next {
    grid-column: 1/ -1;
    visibility: hidden;
    padding-top: 0;
    max-height: 0;
    overflow: hidden;

    @media screen and (min-width: 768px) {
      grid-template: auto / repeat(4, 1fr);
      row-gap: calc(var(--spacing) * 30);
      padding-inline: calc(var(--spacing) * 16);
    }

    &.is-current {
      visibility: hidden;
    }

    &.is-active {
      padding-top: calc(var(--spacing) * 20);
      visibility: visible;
      max-height: max-content;
    }
  }

  @media screen and (min-width: 768px) {
    .collection-grid {
      grid-template: auto / repeat(4, 1fr);
      row-gap: calc(var(--spacing) * 30);
      min-height: 100vh;

      align-items: flex-start;
      margin: 0 auto;
      padding-top: calc(var(--spacing) * 20);
      padding-inline: calc(var(--spacing) * 16);
    }

    .collection-grid
      c-media-card.algolia-rule-push
      .algolia-rule-push__media
      img,
    .collection-grid
      c-media-card.algolia-rule-push
      .algolia-rule-push__media
      video {
      aspect-ratio: var(--ratio-desktop, 4 / 3);
    }
  }

  /* Hiding see more button when no more products are to be shown */
  [data-rerender-more]:has([data-max-pages='1']) button {
    display: none;
  }

  t-collection:not(:has(.collection-grid ~ .collection-grid--next:empty))
    [data-rerender-more]
    button {
    display: none;
  }
}
/* END_SECTION:algolia-main-collection */

/* START_SECTION:algolia-main-search (INDEX:5) */
/* ⚠ Auto-generated from src/sections/algolia-main-search/algolia-main-search.css — do not edit directly. */
/* src/sections/algolia-main-search/algolia-main-search.css */
/* Les feuilles partagées (link, cta, gallery_list, algolia-filter-shared) sont
   servies par assets/theme-shared.css — voir src/assets/theme-shared.css.
   Ne pas les réimporter ici : preprocessCSS les recopierait dans ce bloc. */
@layer components {
  .hero-search {
    display: grid;
    row-gap: calc(var(--spacing) * 4);
    text-align: center;
    padding-block-start: calc(var(--spacing) * 16);
    padding-inline: calc(var(--spacing) * 8);

    @media (width >=48rem) {
      padding-block-start: calc(var(--spacing) * 20);
    }

    & h1 {
      color: var(--color-content-primary);
    }

    & p {
      color: var(--color-content-secondary);
    }

    & form {
      background: var(--color-white);
      display: flex;
      align-items: center;
      width: 100%;
      padding: 1.25rem 1rem 2.5rem 1rem;
      column-gap: calc(var(--spacing) * 5);

      @media (width >=64rem) {
        max-width: 20.25rem;
        justify-self: center;
      }

      & input[type='search'] {
        flex: 1;
        padding-bottom: 0.3125rem;
        border-bottom: 1px solid var(--Gris-Nacre, #e6e5e5);
        background: transparent;
      }
    }
  }

  .no-result-search {
    display: grid;
    text-align: center;
    row-gap: calc(var(--spacing) * 16);
    padding-block: calc(var(--spacing) * 20);

    & .search-grid {
      display: grid;
      gap: calc(var(--spacing) * 10);

      @media (width >=64rem) {
        grid-template-columns: repeat(4, 1fr);
        /* max-width: var(--max-width);*/
        margin-inline: auto;
        padding-inline: calc(var(--spacing) * 16);
      }
    }
  }

  /* ── Algolia IS — hits grid ─────────────────────────────────────────────── */

  /* Hits grid is a `<ul data-ais-grid class="collection-grid">` — neutralize list chrome */
  [data-ais-hits] ul,
  [data-ais-hits] ol,
  .ais-InfiniteHits-list.collection-grid,
  ul.collection-grid,
  ul.search-grid {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  [data-ais-hits] li,
  .ais-hits-item,
  ul.collection-grid > li,
  ul.search-grid > li {
    list-style: none;
  }

  /* Hide load-more button when all results are displayed */
  .ais-load-more--disabled {
    display: none;
  }

  /* ── Algolia IS — dynamicWidgets / refinementList ────────────────────────── */

  /* Keep the IS wrapper transparent so it inherits the parent grid */
  .ais-DynamicWidgets {
    display: contents;
  }

  /* `dynamicWidgets` crée un conteneur par attribut de `facetOrdering`, avant
     même de savoir s'il aura des valeurs. Quand la facette revient vide, le
     rendu ne produit rien mais le conteneur reste — et comme le wrapper est en
     `display: contents`, il devient un item de la grille du panneau : il ne se
     voit pas, mais il consomme une rangée, donc une deuxième `row-gap`. */
  .ais-DynamicWidgets-widget:empty {
    display: none;
  }

  /* Facet value list */
  .ais-rl-list {
    display: grid;
    row-gap: calc(var(--spacing) * 5);
    list-style: none;
    padding: 0;
    margin: 0;
  }

  /* IS v4: <label> wraps <input>, so override the sibling-based checkbox layout */
  li.input-checkbox:has(.ais-RefinementList-label) {
    display: block;
  }

  /* The IS v4 label takes the flex role instead of the li */
  .ais-RefinementList-label {
    display: flex;
    column-gap: 0.5rem;
    align-items: center;
    cursor: pointer;
    width: 100%;
  }

  .ais-RefinementList-checkbox {
    accent-color: var(--color-black);
    flex-shrink: 0;
  }

  .ais-RefinementList-labelText {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 140%;
  }

  /* Disabled item (count = 0, not refined) */
  li.input-checkbox:has(input:disabled) .ais-RefinementList-label {
    color: var(--color-gray-nacre);
  }

  /* Per-facet IS render container */
  .ais-facet-container {
    padding-block-start: calc(var(--spacing) * 8);
  }

  /* See all / See less link */
  .ais-show-more {
    margin-block-start: calc(var(--spacing) * 5);
    display: inline-block;
  }

  /* ── Algolia IS — active filter tags ───────────────────────────────────── */

  /* Le tag cliquable pour désactiver un filtre */
  .tag_filter {
    cursor: pointer;
  }

  .tag_filter svg {
    width: calc(var(--spacing) * 6);
    flex-shrink: 0;
  }

  /* ── Query Rule Banner (page search) ──────────────────────────────────────── */
  /* Réutilise .block-push-related-search — override grid-column (pas de contexte grid ici) */
  [data-ais-rule-banner]:not(:empty) {
    margin-block-end: calc(var(--spacing) * 12);
  }

  [data-ais-rule-banner] .block-push-related-search {
    grid-column: unset;
    grid-row: unset;
    max-width: 30rem;
  }
}

@layer components {
  .collection-grid {
    min-height: 100svh;
  }

  .collection-grid,
  .collection-grid--next {
    list-style: none;
    display: grid;
    justify-self: center;
    grid-template: auto / repeat(2, 1fr);
    column-gap: calc(var(--spacing) * 10);
    row-gap: calc(var(--spacing) * 15);
    padding-inline: calc(var(--spacing) * 8);
    padding-block-start: calc(var(--spacing) * 16);

    @media (width >=48rem) {
      padding-block-start: calc(var(--spacing) * 20);
    }

    li {
      list-style: none;
    }

    c-media-card.algolia-rule-push .algolia-rule-push__media,
    c-media-card.algolia-rule-push picture,
    c-media-card.algolia-rule-push img {
      width: 100%;
    }

    c-media-card.algolia-rule-push .algolia-rule-push__media {
      display: block;
    }

    c-media-card.algolia-rule-push img {
      height: 100%;
      object-fit: cover;
      aspect-ratio: var(--ratio-mobile, 4 / 3);
    }

    /* Largeur du push, portée par le champ `columns` du metaobject
       push_page_collection_search ("1" ou "4"). Le plafond doit suivre le
       nombre réel de colonnes de .collection-grid, sinon un push `4` déborde
       la grille — d'où le @media aligné sur celui de la grille (2 → 4 cols à
       768px) plutôt qu'un @container : les deux valeurs doivent basculer au
       même point de rupture, exactement.

       Les custom properties vivent sur le `<li>` (HitsGrid) ; l'ancienne règle
       sur `c-media-card` reste pour un éventuel enfant direct. */
    .collection-grid > li[style*='--push-columns'],
    c-media-card.algolia-rule-push[style*='--push-columns'] {
      grid-column: span min(var(--push-columns), 2);
    }

    @media screen and (min-width: 768px) {
      .collection-grid > li[style*='--push-columns'],
      c-media-card.algolia-rule-push[style*='--push-columns'] {
        grid-column: span min(var(--push-columns), 4);
      }
    }
  }

  [data-rerender-more] {
    display: grid;
    justify-content: center;
    justify-items: center;
    row-gap: 1rem;
    padding-top: 2.5rem;
  }

  .collection-grid--next {
    grid-column: 1/ -1;
    visibility: hidden;
    padding-top: 0;
    max-height: 0;
    overflow: hidden;

    @media screen and (min-width: 768px) {
      grid-template: auto / repeat(4, 1fr);
      row-gap: calc(var(--spacing) * 30);
      padding-inline: calc(var(--spacing) * 16);
    }

    &.is-current {
      visibility: hidden;
    }

    &.is-active {
      padding-top: calc(var(--spacing) * 20);
      visibility: visible;
      max-height: max-content;
    }
  }

  @media screen and (min-width: 768px) {
    .collection-grid {
      grid-template: auto / repeat(4, 1fr);
      row-gap: calc(var(--spacing) * 30);
      align-items: flex-start;
      margin: 0 auto;
      padding-top: calc(var(--spacing) * 20);
      padding-inline: calc(var(--spacing) * 16);
    }

    .collection-grid
      c-media-card.algolia-rule-push
      .algolia-rule-push__media
      img {
      aspect-ratio: var(--ratio-desktop, 4 / 3);
    }
  }

  /* Hiding see more button when no more products are to be shown */
  [data-rerender-more]:has([data-max-pages='1']) button {
    display: none;
  }

  t-collection:not(:has(.collection-grid ~ .collection-grid--next:empty))
    [data-rerender-more]
    button {
    display: none;
  }
}
/* END_SECTION:algolia-main-search */

/* START_SECTION:breadcrumb (INDEX:8) */
/* ⚠ Auto-generated from src/sections/breadcrumb/breadcrumb.css — do not edit directly. */
/* src/sections/breadcrumb/breadcrumb.css */
@layer components {
  .breadcrumb {
    list-style: none;
    padding-block: var(--spacings-medium-xs);
    display: flex;
    column-gap: var(--spacings-small-xs);
    color: var(--color-gray);
    margin: 0 auto;
    align-items: center;
    padding-inline: calc(var(--spacing) * 10);

    @media screen and (min-width: 768px) {
      padding-inline: calc(var(--spacing) * 20);
    }
  }

  .breadcrumb > li {
    display: inline-flex;
    align-items: center;
    column-gap: var(--spacings-small-xs);
  }

  .breadcrumb_icon {
    line-height: normal;
    width: 0.5rem;
  }
  .breadcrumb_current {
    font-size: 0.625rem;
    line-height: 130%;
    font-family: var(--font-body);
    font-weight: 300;
  }
  .breadcrumb_current span {
    text-decoration: underline;
  }
}
/* END_SECTION:breadcrumb */

/* START_SECTION:cart-samples (INDEX:10) */
/* no inject — merged section (samples + packaging) */
  @layer components {
    .cart-samples-section,
    .cart-packaging-section {
      box-sizing: border-box;
      width: 100%;
      padding: 0 var(--spacings-large-xl-xs, 3.5rem) var(--spacings-medium-xl, 3rem);
      background-color: var(--color-white);
    }

    @media screen and (max-width: 1024px) {
      .cart-samples-section,
      .cart-packaging-section {
        padding: 0 var(--spacings-medium-xs, 1.25rem) var(--spacings-medium-m, 2rem);
      }
    }

    /* Le conteneur reste rendu pour l'inner swap, mais garderait sa bande
       blanche et ses 3rem de padding : c'est son contenu qui le replie. */
    .cart-samples-section:has([data-cart-block-hidden]),
    .cart-packaging-section:has([data-cart-block-hidden]) {
      display: none;
    }
  }
/* END_SECTION:cart-samples */

/* START_SECTION:cart-summary (INDEX:11) */
/* ⚠ Auto-generated from src/sections/cart-summary/cart-summary.css — do not edit directly. */
/* src/sections/cart-summary/cart-summary.css */
@layer components {
  /* Cart summary / totals (single-column layout) */

  .cart-summary {
    background-color: var(--color-white);
  }

  .cart__total-container {
    z-index: 4;
    box-sizing: border-box;
    width: 100%;
    height: fit-content;
    padding: var(--spacings-medium-xl, 3rem) var(--spacings-large-xl-xs, 3.5rem);
    background-color: var(--color-white);
  }
  .container-cart-summary {
    transition: 0.15s 0.1s cubic-bezier(0.48, -0.01, 0.34, 0.99);

    position: sticky;
    top: 4rem;
  }
  body:has(header.is-scroll-down) .container-cart-summary {
    top: 0;
  }

  .cart__subtotal,
  .cart__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacings-small-l, 0.75rem);
  }

  .cart__subtotal--discount {
    margin-top: -0.5rem;
  }

  .cart__delivery-informations {
    color: var(--color-content-secondary);
  }

  .cart__discount {
    display: block;
    margin-top: var(--spacings-medium-l, 2.5rem);
  }

  .cart__discount-label {
    color: var(--color-content-secondary);
    margin-bottom: var(--spacings-small-m, 0.5rem);
  }

  .cart__discount-input-field {
    height: 2.75rem;
  }

  .cart__discount-button .button {
    margin: 0;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1rem;
    letter-spacing: 0;
    text-transform: uppercase;
    padding: 0 0.625rem;
    min-width: 5.375rem;
    height: 2.75rem;
  }

  .cart__discount-button .button svg {
    display: none;
  }

  .cart__discount-input-container {
    display: flex;
  }

  .cart__button .button {
    margin-top: var(--spacings-medium-xs, 1.25rem);
  }

  .cart__discount-error,
  .cart__discount-applied {
    display: flex;
    align-items: center;
    gap: var(--spacings-small-m, 0.5rem);
    margin-top: var(--spacings-small-m, 0.5rem);
  }

  .cart__discount-error span {
    color: var(--color-red);
  }

  .cart__discount-applied-label {
    color: var(--color-vert);
  }

  .cart__discount--mobile {
    display: none;
    text-align: left;
  }

  .cart__subtotal--mobile {
    display: none;
    margin-bottom: var(--spacings-small-m, 0.5rem);
  }

  .cart__total--mobile {
    display: none;
  }

  @media screen and (max-width: 1024px) {
    /* On mobile the checkout block becomes a fixed bottom bar,
       the breakdown is shown inline above (subtotal/total/discount --mobile). */
    .cart__total-container {
      position: fixed;
      z-index: 4;
      left: 0;
      right: 0;
      top: unset;
      bottom: 0;
      width: 100%;
      padding: var(--spacings-small-xl, 1rem) var(--spacings-medium-xs, 1.25rem)
        var(--spacings-medium-m, 2rem);
      border-top: 1px solid var(--color-gray-nacre);
    }

    .cart-summary {
      padding: 0 var(--spacings-medium-xs, 1.25rem);
    }

    .cart__subtotal,
    .cart__discount--desktop {
      display: none;
    }

    .cart__subtotal--mobile {
      display: flex;
    }

    .cart__total--mobile {
      display: flex;
    }

    .cart__discount--mobile {
      display: block;
      margin-top: var(--spacings-medium-m, 2rem);
    }

    .cart__subtotal--discount {
      margin-bottom: var(--spacings-small-m, 0.5rem);
    }
  }
}
/* END_SECTION:cart-summary */

/* START_SECTION:collection-panel (INDEX:12) */
@layer components {
    .section-collection-panel {
      max-width: var(--max-width);
      padding-block-start: 2.9375rem;
      padding-block-end: 2.5rem;
      margin: 0 auto;
      display: grid;
      row-gap: calc(var(--spacing) * 16);
      padding-inline: calc(var(--spacing) * 8);

      @media screen and (min-width: 768px) {
        padding-block-start: 3.5rem;
        padding-block-end: 3.5rem;
      }

      & img {
        object-fit: contain !important;
      }

      & .collection-panel__title {
        text-align: center;
        scroll-margin-top: 6.25rem;
      }

      .grid-collection {
        list-style: none;
        margin: 0;
        padding: 0;
        column-gap: var(--spacings-small-m);
        row-gap: var(--spacings-medium-m);

        @media screen and (min-width: 768px) {
          column-gap: var(--spacings-small-xl);
          row-gap: var(--spacings-medium-l);
        }
      }

      & .collection-panel__container {
        display: grid;
        grid-template-columns: 1fr 1fr;

        @media screen and (min-width: 768px) {
          grid-template: auto / repeat(4, 1fr);
        }
      }

      & .collection-panel__btn {
        justify-self: center;
        width: fit-content;
        margin: 0 auto;

        @media screen and (min-width: 768px) {
          padding-top: 2rem;
        }
      }
    }

    .t-panel {
      position: fixed;
      top: 0;
      right: 0;
      z-index: 10;
      width: 100%;
      height: 100vh;
      visibility: hidden;
      opacity: 0;
      display: grid;
      transition: all 0.3s ease-in-out;

      & .t-panel__bg {
        background-color: rgba(0, 0, 0, 0.5);
        grid-column: 1 / -1;
        grid-row: 1/-1;
        cursor: pointer;
      }

      &.is-open {
        visibility: visible;
        opacity: 1;

        & .t-panel__inside {
          grid-column: 1 / -1;
          grid-row: 1/-1;
          transform: translateX(0);
          opacity: 1;

          & .collection-panel__container {
            opacity: 1;
          }
        }
      }

      & .t-panel__inside {
        background-color: white;
        width: 100%;
        height: 100vh;
        overflow: scroll;
        justify-self: flex-end;
        padding-block: 0.9375rem;
        display: grid;
        row-gap: 1.25rem;
        transform: translateX(100%);
        opacity: 0;
        transition: all 0.3s ease-in-out;

        @media screen and (min-width: 1024px) {
          width: 77.08%;
          padding-block: var(--spacings-medium-s);
          row-gap: var(--spacings-small-xl);
        }

        & .inside__top {
          display: grid;
          row-gap: 0.625rem;
          padding-inline: 1.25rem;
          padding-bottom: 1rem;
          border-bottom: 1px solid var(--Brand-colours-Gris-Nacre, #e6e5e5);

          @media screen and (min-width: 768px) {
            padding-inline: var(--spacings-medium-l);
            row-gap: var(--spacings-small-xl);
          }

          & button {
            justify-self: flex-end;
          }
        }

        & .collection-panel__container {
          padding-inline: var(--spacings-medium-l);
          opacity: 0;
          transition: all 0.3s ease-in-out 0.2s;
          padding-inline: 1.25rem;

          @media screen and (min-width: 768px) {
            padding-inline: var(--spacings-medium-l);
          }
        }
      }
    }
  }
/* END_SECTION:collection-panel */

/* START_SECTION:filter-collection (INDEX:20) */
/* ⚠ Auto-generated from src/sections/filter-collection/filter-collection.css — do not edit directly. */
/* src/sections/filter-collection/filter-collection.css */
@layer components {
  t-filter {
    background-color: #f8f8f8;
    border-top: 1px solid var(--color-gray-nacre);
    border-bottom: 1px solid var(--color-gray-nacre);
    position: sticky;
    top: 4.1875rem;
    display: inline-block;
    width: 100%;
    z-index: 8;
    transition: 0.15s 0.1s cubic-bezier(0.48, -0.01, 0.34, 0.99);

    @media (width >=64rem) {
      z-index: 4;
    }
  }

  .filter-bar {
    padding: calc(var(--spacing) * 8);

    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: calc(var(--spacing) * 8);
    overflow: hidden;

    z-index: 10;
    transition: 0.15s 0.1s cubic-bezier(0.48, -0.01, 0.34, 0.99);

    @media (width >=64rem) {
      z-index: 4;
    }
  }

  body:has(header.is-scroll-down) .filter-bar {
    top: 0;
  }

  body:has(header.menu-is-open) .filter-bar {
    z-index: initial;
  }

  body:has(.header__section--bottom.is-open) .filter-bar {
    z-index: initial;
  }

  .filter-bar_btn {
    background-color: transparent;
    border: none;
    display: flex;
    column-gap: calc(var(--spacing) * 5);
    align-items: center;
    cursor: pointer;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .filter-bar_btn svg {
    width: calc(var(--spacing) * 12);
  }

  .filter-bar_count-product {
    color: var(--color-content-secondary);
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .filter-bar_container-tag {
    display: flex;
    align-items: center;
    visibility: hidden;
    column-gap: calc(var(--spacing) * 8);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  .filter-bar_container-tag [data-ais-current-refinements] {
    flex: 1 1 auto;
    min-width: 0;
  }

  .filter-bar_container-tag [data-ais-clear],
  .filter-bar_container-tag > .link {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .filter-bar_list-tag {
    display: flex;
    column-gap: calc(var(--spacing) * 8);
    display: none;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .filter-bar_list-tag::-webkit-scrollbar {
    display: none;
  }

  .tag_filter {
    padding-left: calc(var(--spacing) * 5);
    padding-right: calc(var(--spacing) * 4);
    padding-top: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 3);
    border-radius: 3px;
    border: 1px solid var(--color-gray-nacre);
    background: var(--color-white);
    display: flex;
    align-items: center;
    column-gap: var(--spacing);
    cursor: pointer;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .tag_filter svg {
    width: calc(var(--spacing) * 6);
  }

  .filter_count-product {
    font-feature-settings: 'sups' on;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 300;
    line-height: 135%;
    /* 18.9px */
  }

  .filter {
    border: none;
    opacity: 0;
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    /* Calé sur le header — voir le commentaire détaillé dans
       src/shared/algolia-filter/algolia-filter-shared.css, qui porte la même
       règle pour la pile Algolia. `overlay … allow-discrete` est ce qui garde le
       panneau au-dessus pendant sa fermeture. */
    transition:
      clip-path 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99),
      opacity 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99),
      overlay 0.3s allow-discrete;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 10;
    height: 100%;
    max-width: 100%;
    max-height: 100dvh;
    background-color: var(--color-white);
    padding-top: calc(var(--spacing) * 8);
    display: grid;
    pointer-events: none;
  }

  /*
   * Le voile suit le panneau au lieu de rester planté.
   *
   * `::backdrop` est un pseudo-élément à part : il n'hérite RIEN du dialogue, ni
   * son opacité ni sa transition. Tant que `close()` était différé, il
   * disparaissait d'un coup avec le panneau et personne ne le voyait. Depuis que
   * `overlay … allow-discrete` maintient le dialogue dans le top layer le temps
   * de l'animation, le voile y reste aussi — donc il survivait au panneau, et
   * avec lui l'inertie de toute la page.
   *
   * Il fond donc sur la même durée, et son `overlay` le libère au même instant.
   */
  .filter::backdrop {
    cursor: pointer;
    opacity: 0;
    transition:
      opacity 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99),
      overlay 0.3s allow-discrete;
  }
  .filter[open]::backdrop {
    opacity: 1;
  }
  /* Le voile naît déjà à l'état ouvert : sans style de DÉPART, sa première
     résolution de style vaut `opacity: 1` et il apparaît sec. */
  @starting-style {
    .filter[open]::backdrop {
      opacity: 0;
    }
  }

  .filter[open] {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    opacity: 1;
    transition:
      clip-path 0.6s cubic-bezier(0.48, -0.01, 0.34, 0.99),
      opacity 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99),
      overlay 0.6s allow-discrete;
    pointer-events: auto;
  }

  .filter-btn-apply {
    align-self: flex-end;
    position: sticky;
    bottom: 0;
    width: 100%;
    display: grid;
    justify-items: center;
    background-color: var(--color-white);
    z-index: 2;
    padding-block: calc(var(--spacing) * 6);
    padding-inline: calc(var(--spacing) * 8);
    grid-row: 1/-1;
    grid-column: 1/-1;
  }

  .filter-btn-close {
    position: sticky;
    top: 0;
    grid-row: 1 / span 1;
    grid-column: 1/-1;
    z-index: 2;
    display: grid;
    align-self: flex-start;
    padding-inline: calc(var(--spacing) * 8);
    justify-content: flex-end;
    justify-self: flex-end;
  }

  .filter-btn-close button {
    cursor: pointer;
  }

  .filter-btn-close svg {
    width: calc(var(--spacing) * 12);
  }

  .filter-content {
    display: grid;
    max-height: calc(100svh - 4.5rem);
    align-content: flex-start;
    grid-row: 1/-1;
    grid-column: 1/-1;
    overflow: scroll;
    margin-top: calc(var(--spacing) * 24);
    padding-inline: calc(var(--spacing) * 8);
    padding-bottom: 4.5rem;
  }

  .filter-content fieldset {
    border: none;
    display: grid;
    row-gap: calc(var(--spacing) * 10);
    align-content: flex-start;
  }

  .filter-legend {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-inline: calc(var(--spacing) * 10);
    padding-bottom: calc(var(--spacing) * 8);
    border-bottom: 1px solid var(--color-gray-nacre);
  }

  .filter-legend a {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 19.6px */
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-position: from-font;
    color: var(--Neutrals-Grey-58);
    text-underline-offset: calc(var(--spacing) * 2);
    transition: 0.3s ease;

    &:hover {
      text-underline-offset: calc(var(--spacing) * 1);
    }
  }

  .filter-content legend {
    color: var(--Neutrals-Grey-58);
    font-family: var(--font-body);
    font-size: 1rem;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
    text-transform: uppercase;
  }

  .filter-content-input {
    display: grid;
    row-gap: calc(var(--spacing) * 5);
    padding-inline: calc(var(--spacing) * 10);
    padding-bottom: calc(var(--spacing) * 15);
  }

  .filter-content-input--filter {
    row-gap: calc(var(--spacing) * 12);
  }

  .filter-content-input--filter ul {
    display: grid;
    row-gap: calc(var(--spacing) * 5);
  }

  .filter-content details {
    transition: all 0.1s cubic-bezier(0.48, -0.01, 0.34, 0.99);
  }

  .filter-content details[open] {
    border-bottom: 1px solid var(--color-gray-nacre);
    padding-bottom: calc(var(--spacing) * 12);
  }

  .filter-content summary {
    font-family: var(--typography-label-l-caps-font-family);
    font-size: var(--typography-label-l-caps-font-size);
    font-style: normal;
    font-weight: var(--typography-label-l-caps-font-weight);
    line-height: var(--typography-label-l-caps-line-height);
    letter-spacing: var(--typography-label-l-caps-letter-spacing);
    text-transform: var(--typography-label-l-caps-text-transform);
    display: flex;
    padding-bottom: calc(var(--spacing) * 10);
    cursor: pointer;
    justify-content: space-between;
    align-items: flex-start;
  }

  .filter-content summary svg {
    width: calc(var(--spacing) * 6);
  }

  .container-plus-minus {
    display: grid;
    flex-shrink: 0;
    place-items: center;
  }

  .container-plus-minus .plus,
  .container-plus-minus .minus {
    grid-column: 1/-1;
    grid-row: 1/-1;
    display: flex;
    transition: all 0s cubic-bezier(0.48, -0.01, 0.34, 0.99);
  }

  .filter-content details:not([open]) .container-plus-minus .minus,
  .filter-content details[open] .container-plus-minus .plus {
    display: none;
  }

  .filter-content details[open] .container-plus-minus .minus {
    display: flex;
  }

  .input-radio,
  .input-checkbox {
    display: flex;
    column-gap: calc(var(--spacing) * 8);
    align-items: center;
    accent-color: var(--color-black);
  }

  .input-radio label,
  .input-checkbox label {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 300;
    line-height: 140%;
  }

  .input-checkbox label {
    font-weight: 400;
  }

  .input-radio:has(input:checked) label {
    text-shadow: 1px 0 0 currentColor;
  }

  .input-radio:has(input:disabled) label,
  .input-checkbox:has(input:disabled) label {
    color: var(--color-gray-nacre);
  }

  @media screen and (min-width: 768px) {
    t-filter {
      transition: 0.15s 0.1s cubic-bezier(0.48, -0.01, 0.34, 0.99);
      top: 4rem;
    }

    body:has(header.is-scroll-down) t-filter {
      top: 0;
    }

    .filter {
      width: calc(var(--spacing) * 230);
      max-height: 100vh;
      height: 100%;
      padding-top: calc(var(--spacing) * 16);
    }

    .filter-bar_container-tag {
      visibility: visible;
    }

    .filter-bar_list-tag {
      display: flex;
    }
  }
}

@layer variants {
  .filter-bar.v-bg-white {
    background-color: white;
  }
}

@media (width >=48rem) {
  body:has(.header__section .menu__item:hover) .filter-bar {
    z-index: initial;
  }
}

.filter-content-input .links {
  cursor: pointer;
}
/* END_SECTION:filter-collection */

/* START_SECTION:footer (INDEX:21) */
/* ⚠ Auto-generated from src/sections/footer/footer.css — do not edit directly. */
/* src/sections/footer/footer.css */
@layer reset, base, components, variants;

@layer components {
  .shopify-section--footer {
    background-color: var(--color-white);
  }

  .footer-nav {
    display: grid;
    background-color: var(--color-white);
    padding: calc(var(--spacing) * 15) calc(var(--spacing) * 10);
  }

  .footer-menu__list {
    display: grid;
    row-gap: calc(var(--spacing) * 10);
  }

  .footer-menu__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: calc(var(--spacing) * 10) 0;
  }

  .footer-menu__title svg {
    width: var(--icon-chevron-size);
    height: var(--icon-chevron-size);
  }

  .footer-menu {
    display: grid;
  }

  .footer-menu__list {
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    padding-bottom: calc(var(--spacing) * 10);
  }

  .footer-menu.is-close .footer-menu__list {
    padding-bottom: 0;
    max-height: 0;
  }

  .footer-menu .footer-menu__toggle {
    display: grid;
  }

  .footer-menu__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(180deg);
    transition: transform 0.3s ease-in-out;
  }

  .footer-menu.is-close .footer-menu__arrow {
    transform: rotate(0deg);
  }

  .footer-menu__social-link {
    display: flex;
    align-items: center;
    column-gap: calc(var(--spacing) * 5);
  }

  @media screen and (min-width: 768px) {
    .footer-nav {
      display: grid;
      grid-template: repeat(3, auto) / repeat(4, 1fr);
      justify-content: space-between;
      align-items: flex-start;
      row-gap: var(--spacings-small-xl, 1rem);
      column-gap: 5.5rem;
      padding: calc(var(--spacing) * 25) calc(var(--spacing) * 20);
    }

    .footer-menu {
      display: grid;
      row-gap: calc(var(--spacing) * 12);
      width: fit-content;
      grid-row: 1/-1;

      &:nth-child(3) {
        grid-row: 1 / span 1;
      }

      &.footer-menu__inside {
        width: 100%;
        padding: var(--spacings-medium-xs, 1.25rem) 0;

        grid-row: 1 / span 1;
        grid-row: 2 / span 1;
      }
    }

    .footer-menu.is-close-desktop {
      row-gap: 0;
    }

    .row-start-2 {
      grid-row: 2 / span 1;
    }

    .row-start-1 {
      grid-row: 1 / span 1;
    }

    .footer-menu__title {
      cursor: default;
      padding: 0;
      pointer-events: none;
    }

    .footer-menu.is-close-desktop .footer-menu__title {
      padding: 0 0 calc(var(--spacing) * 12) 0;
    }

    .footer-menu__title.is-show-desktop {
      cursor: pointer;
      pointer-events: auto;
    }

    .footer-menu__title .footer-menu__toggle {
      display: none;
    }

    .footer-menu__title.is-show-desktop .footer-menu__toggle {
      display: grid;
    }

    .footer-menu__list {
      transition: all 0.3s ease-in-out;
      overflow: hidden;
      padding-bottom: 0;
    }

    .footer-menu.is-close .footer-menu__list {
      max-height: max-content;
    }

    .footer-menu.is-close-desktop .footer-menu__list {
      padding-bottom: 0;
      max-height: 0;
    }
  }

  .bottom-footer {
    background-color: var(--color-black);

    .bottom-footer__inside {
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      justify-content: flex-start;
      gap: 1.5rem;
      inline-size: 100%;
      padding: 1rem 1rem 2rem;

      @media (width >=48rem) {
        flex-flow: row nowrap;
        justify-content: space-between;
        padding: 1rem 2.5rem;
      }
    }

    & .social-menu {
      display: flex;
      flex-flow: row wrap;
      align-items: flex-start;
      justify-content: center;
      gap: 1rem;
    }

    & .social-menu-link {
      color: var(--color-white);
    }

    & svg {
      min-block-size: 1.5rem;
      min-inline-size: 1.5rem;
      fill: currentcolor;
    }
  }
}

/* Cookie consent web-component */
cookie-consent-button {
  cursor: pointer;
}
/* END_SECTION:footer */

/* START_SECTION:header-search (INDEX:25) */
/* ⚠ Auto-generated from src/sections/header-search/header-search.css — do not edit directly. */
/* src/sections/header-search/header-search.css */
@layer components {
  t-search {
    visibility: hidden;

    &:has(header-search:open) {
      visibility: visible;
    }
  }

  .header-search {
    position: fixed;
    top: 0;
    border: none;
    box-sizing: border-box;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100svh;
    overflow-y: scroll;
    background-color: var(--color-white);
    z-index: 20;
    transition: all 0.3s ease;
    padding: 1.25rem 0 1.25rem 0;
    opacity: 0;
    display: grid;
    justify-items: center;
    row-gap: 0.5rem;
    align-content: flex-start;
    pointer-events: none;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);

    transition:
      clip-path 0.9s cubic-bezier(0.48, -0.01, 0.34, 0.99),
      opacity 0.3s 0.6s cubic-bezier(0.48, -0.01, 0.34, 0.99);

    @media (width >=64rem) {
      padding: 1.25rem 0 3rem 0;
    }
  }

  .header-search::backdrop {
    display: none;
    visibility: hidden;
  }

  .header-search__logo {
    display: none;
  }

  t-search {
    pointer-events: none;
    visibility: hidden;
  }

  t-search:has(header-search:open) {
    pointer-events: auto;
    visibility: visibility;
  }

  t-search:has(header-search[open]) {
    pointer-events: auto;
    visibility: visibility;
  }

  .header-search:open {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    opacity: 1;
    transition:
      clip-path 0.9s cubic-bezier(0.48, -0.01, 0.34, 0.99),
      opacity 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99);
    pointer-events: auto;
  }

  .header-search[open] {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    opacity: 1;
    transition:
      clip-path 0.9s cubic-bezier(0.48, -0.01, 0.34, 0.99),
      opacity 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99);
    pointer-events: auto;
  }

  .header-search__icon-search {
    display: none;
  }

  .header-search__form-search {
    width: 100%;
    display: grid;
    column-gap: calc(var(--spacing) * 5);
    padding: 0.625rem 0.625rem 0.625rem 1rem;
    border: 1px solid var(--Gris-Nacre, #e6e5e5);
  }

  .header-search__close {
    width: fit-content;
    /* padding-bottom: calc(var(--spacing) * 5); */

    @media (width >=64rem) {
      padding-bottom: calc(var(--spacing) * 12);
    }
  }

  .header-search__close svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .header-search__container {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: calc(var(--spacing) * 5);
    padding-inline: 1rem;

    @media screen and (min-width: 1024px) {
      padding-inline: 0;
    }

    width: 100%;
  }

  input[type='search'] {
    width: 100%;
    border: none;
    box-sizing: border-box;
    font-family: 'Apercu Pro', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
    background-color: transparent;
    letter-spacing: 0.00625rem;
  }

  input[type='search']:focus-visible {
    outline: none;
    border-radius: var(--radius-small, 2px);
    border: var(--border-width-extra-small, 1px) solid
      var(--Border-primary, #000);
  }

  input[type='search']::placeholder {
    font-weight: 300;
  }

  input[type='search']::-webkit-search-cancel-button {
    position: relative;
    right: 0;
    -webkit-appearance: none;
    height: 1.5rem;
    width: 1.5rem;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1LjM0MTEgOS45MDY3NEMxNS4zNzg3IDkuOTAxODMgMTUuMzUxMyA5LjgzMzE0IDE1LjQ0NjkgOS44ODUxNUMxNS44OTI2IDkuODk1OTQgMTQuOTg3IDkuMTI4NTIgMTUuMDQzIDkuMzgyN0MxNC43Nzg0IDkuMzczODYgMTQuNzIwNCA5LjY2OTI1IDE0LjYwNjUgOS42NzIyQzE0LjY2MzQgOS43ODQwNyAxNC40ODU0IDkuNjUzNTUgMTQuNTEzOSA5LjgzMTE3QzE0LjQ1OTkgOS44ODUxNSAxNC40OTM1IDEwLjAyNjUgMTQuMzg5NyA5Ljk2MjY4QzE0LjE4ODMgMTAuMDA1OSAxNC4zMDIyIDEwLjE2ODggMTQuMTUwNiAxMC4xMTQ4QzE0LjEyMzIgMTAuMjQzMyAxNC4xNjI4IDEwLjMzMTcgMTQuMDgzNSAxMC40MTUxQzEzLjk1MTIgMTAuMzYzMSAxMy42NzI0IDEwLjUwNTQgMTMuNjY4MyAxMC41MDU0QzEzLjYxMTQgMTAuNjg5OSAxMy4zNzAyIDEwLjcxOTMgMTMuMjQ2MSAxMS4wMzkyQzEzLjE4OTEgMTEuMTgzNSAxMy4yMDMzIDEwLjk5MjEgMTMuMTcwOCAxMC45OThDMTMuMDQ4NyAxMC45OTQxIDEyLjk1NjEgMTEuMDE0NyAxMy4wNDU2IDEwLjg3MDRDMTIuODQyMSAxMC45MDA5IDEyLjc5NTMgMTAuNTA4MyAxMi43MDU4IDEwLjMwOTFDMTIuNDEyNyAxMC4yMDggMTIuMTkzIDEwLjEzMTUgMTIuMTIwNyA5LjgyNzI1QzExLjg5NjkgOS41NjUyMyAxMS42MTkxIDkuNTI1OTcgMTEuNDcwNSA5LjI4MTYyQzExLjE0NSA5LjQ2NDE1IDEwLjY4NzEgOS45MDQ3OCAxMS4xMzE3IDkuOTAwODVDMTEuMTAxMiA5Ljk3MzQ3IDExLjIyOTQgOS45Njg1NiAxMS4zMDY3IDkuOTc2NDFDMTEuMjI3NCAxMC4xNDIzIDExLjYxMiAxMC4xMTU4IDExLjY0MjUgMTAuMzY5QzExLjY4NDIgMTAuNTE2MiAxMS43NTQ0IDEwLjUwNzMgMTEuODIyNiAxMC41NTY0QzExLjc3MjcgMTAuNjIxMiAxMS45MjIzIDEwLjU1NjQgMTEuOTQwNiAxMC41OTE3QzExLjk0OTggMTAuNjI0MSAxMS44ODc3IDEwLjcyMTMgMTEuOTg1NCAxMC42Mzg4QzExLjk0NjcgMTAuNzk5OCAxMi4xNzk3IDEwLjc5NjggMTIuMjUzIDEwLjg4NDJDMTIuMTc2NyAxMS4xMTE4IDEyLjE1NTMgMTEuMDI1NSAxMi4yNzY0IDExLjE0MjNDMTIuNTgyNyAxMS4xNzc2IDEyLjQ1NTUgMTEuNDg0OCAxMi43NDg1IDExLjUxODFDMTIuODE1NyAxMS41NjYyIDEyLjc3NyAxMS41MDgzIDEyLjczMDIgMTEuNTcxMUMxMi43MjcyIDExLjY4OTkgMTIuNzQ2NSAxMS43NzcyIDEyLjU5NjkgMTEuNjkxOEMxMi42Mjg1IDExLjg4ODEgMTIuMjIyNSAxMS45MzMyIDEyLjAxNDkgMTIuMDE5NkMxMS45MTExIDEyLjMwMjIgMTEuODMwNyAxMi41MTQyIDExLjUxNTMgMTIuNTgzOUMxMS4yNDM2IDEyLjc5OTggMTEuMjAyOSAxMy4wNjc3IDEwLjk0OTYgMTMuMjExQzExLjEzODggMTMuNTI2IDExLjU5NTcgMTMuOTY2NiAxMS41OTI2IDEzLjUzNzdDMTEuNjY1OSAxMy41NzExIDExLjY2MjkgMTMuNDQzNSAxMS42NzEgMTMuMzY5QzExLjg0MyAxMy40NDU1IDExLjgxNTUgMTMuMDc0NiAxMi4wNzggMTMuMDQ1MUMxMi4yMzA2IDEzLjAwNDkgMTIuMjIxNSAxMi45MzYyIDEyLjI3MjMgMTIuODcxNEMxMi4zMzk1IDEyLjkxOTUgMTIuMjcyMyAxMi43NzUyIDEyLjMwOSAxMi43NTc2QzEyLjM0MjUgMTIuNzQ4NyAxMi40NDIzIDEyLjgwODYgMTIuMzU3OCAxMi43MTQ0QzEyLjYxNzMgMTIuNzIxMyAxMi40ODYgMTIuMjkyNCAxMi44NDExIDEyLjU0MTdDMTIuNzY4OSAxMi40MDQzIDEzLjAzNDQgMTIuMTg2NCAxMy4xNTE0IDEyLjE3MDdDMTMuMTc4OSAxMi4yMTM5IDEzLjMxOTMgMTEuOTA0OCAxMy4yOTQ5IDEyLjAzNzNDMTMuMzg4NSAxMS45NzE1IDEzLjM2NTEgMTIuMDg5MyAxMy40MjIxIDEyLjA2MzhDMTMuNTM3MSAxMS45ODEzIDEzLjM5ODcgMTIuMTUzMSAxMy40OTU0IDEyLjA4NTNDMTMuNzAyOSAxMi4xNjE5IDEzLjgwMjYgMTIuNDk3NSAxMy45MTc2IDEyLjUwNzNDMTMuOTIxNyAxMi41MjAxIDEzLjkxNjYgMTIuODU5NiAxNC4wMjk1IDEyLjc1NzZDMTQuMjk5MiAxMi44NjU1IDE0LjM1MzEgMTIuOTQ1IDE0LjQwMDkgMTMuMTEyOEMxNC43MDUyIDEzLjE2ODggMTQuODc0MSAxMy4zNTkxIDE0LjkyMTkgMTMuNjE4MkMxNC45MTE3IDE0LjA0ODEgMTUuNzA1NCAxMy4xNzQ2IDE1LjQ0MjggMTMuMjI4NkMxNS40NTIgMTIuOTczNSAxNS4xNDU3IDEyLjkxNzUgMTUuMTQyNyAxMi44MDc2QzE1LjAyNjcgMTIuODYyNiAxNS4xNjIgMTIuNjg5OSAxNC45Nzc4IDEyLjcxODNDMTQuOTIxOSAxMi42NjYzIDE0Ljc3NTQgMTIuNjk4NyAxNC44NDE1IDEyLjU5ODZDMTQuNzk2NyAxMi40MDQzIDE0LjYyNzggMTIuNTE1MiAxNC42ODM4IDEyLjM2OEMxNC41NDk1IDEyLjM0MTUgMTQuNDU4OSAxMi4zODA3IDE0LjM3MjQgMTIuMzAzMkMxNC40MjY0IDEyLjE3NDYgMTQuMjc3OCAxMS45MDc3IDE0LjI3ODggMTEuOTAyOEMxNC4wOTE2IDExLjgxMjUgMTQuMDc0MyAxMS43MDM2IDEzLjc3ODIgMTEuNDk2NUMxMy44MjIgMTEuNTEyMiAxMy43MDUgMTEuMzc0OCAxMy44MTA4IDExLjQ1MDRDMTMuNzQzNiAxMS4zNjAxIDEzLjg2NDcgMTEuMzgyNyAxMy44MzgzIDExLjMyNzdDMTMuNzUyOCAxMS4yMTY4IDEzLjkzMDggMTEuMzUwMyAxMy44NjA2IDExLjI1NzFDMTMuOTM5IDExLjA1NjkgMTQuMjg4IDEwLjk2MDcgMTQuMjk4MiAxMC44NDk4QzE0LjMxMjQgMTAuODQ1OSAxNC42NjM0IDEwLjg0OTggMTQuNTU3NiAxMC43NDE5QzE0LjY2OTUgMTAuNDgxOCAxNC43NTIgMTAuNDMwOCAxNC45MjYgMTAuMzgzN0MxNC45NjU2IDEwLjA5NzEgMTUuMTQ4OCAxMC4wMDg4IDE1LjM0NDEgOS45MDI4MUwxNS4zNDExIDkuOTA2NzRaTTEzLjcyMjMgMTEuNDk3NUMxMy42OTI4IDExLjQ3IDEzLjczMjQgMTEuNDg0OCAxMy43NTc5IDExLjQ5NDZDMTMuNzUxOCAxMS40OTA2IDEzLjc0OTcgMTEuNDgyOCAxMy43MjIzIDExLjQ5NzVaIiBmaWxsPSIjODA4MDgwIi8+CjxwYXRoIGQ9Ik05LjczNDA4IDYuMDgxNTJDOS45NjYwNiA2LjAzMDQ5IDEwLjIxMjMgNi4xNzM3NyAxMC40NzQ4IDYuMTUwMjFDMTAuNzM3MyA2LjEyNjY2IDExLjAwMTkgNi4xNDA0IDExLjI2NjQgNi4xNDYyOUMxMS4zOTk3IDYuMTQ5MjMgMTEuNTI1OSA2LjEyNjY2IDExLjY1NDEgNi4wODU0NEMxMS43NzkyIDYuMDQ1MjEgMTEuOTIyNyA2LjEzNjQ3IDEyLjA0MDcgNi4wMTk2OUMxMi4wNTA5IDYuMDA4OSAxMi4wNzYzIDYuMDE4NzEgMTIuMDkzNiA2LjAxODcxQzEyLjQxMjEgNi4wMTg3MSAxMi43Mzc3IDUuOTY5NjQgMTMuMDQ3IDYuMDMxNDdDMTMuNDA3MiA2LjEwMzExIDEzLjc2MjMgNi4wNTQwNCAxNC4xMTc0IDYuMDgxNTJDMTQuNjk4NCA1Ljk0NDEzIDE1LjI4NDUgNi4wNDUyMSAxNS44Njg1IDYuMDIyNjRDMTYuMDUwNyA2LjAxNTc3IDE2LjIzNDggNS45ODkyNyAxNi40MjIxIDYuMDcyNjlDMTYuNTgxOCA2LjE0NDMzIDE2Ljc3NzIgNi4wMTY3NSAxNi45NDQgNi4xNDEzOEMxNi45NTczIDYuMTUxMTkgMTYuOTkwOCA2LjEyNDcgMTcuMDE1MyA2LjExODgxQzE3LjA3NDMgNi4xMDUwNyAxNy4xMzYzIDYuMDcyNjkgMTcuMTkyMyA2LjA4NDQ2QzE3LjUyNzEgNi4xNTQxNCAxNy41MjYgNi4xNTQxNCAxNy44MDU5IDYuMDkyMzFDMTcuODM5NCA2LjA4NDQ2IDE3Ljg4MDEgNi4xMzc0NiAxNy45MTc4IDYuMTM4NDRDMTguMDcxNCA2LjE0NTMxIDE4LjIyNzEgNi4xNTMxNiAxOC4zNzk3IDYuMTQxMzhDMTguNTE4MSA2LjEzMDU5IDE4LjY2NDYgNi4yMDIyMyAxOC43OTY5IDYuMDg0NDZDMTguODA4MSA2LjA1Nzk3IDE4LjkzNjMgNi4wODE1MiAxOS4wMDQ1IDYuMDk2MjRDMTkuMjUwNyA2LjEzNzQ2IDE5LjQ3MDUgNi4yNzE5IDE5LjYzMjMgNi40NTA1MUMxOS44Mjg2IDYuNjM4OTMgMTkuODQwOCA3LjAwNzkyIDE5LjkyMzMgNy4xNjEwMUMxOS45NjggNy4yMjk3IDE5Ljg0OSA3LjMyODgyIDE5Ljg3NDQgNy4zNjkwNkMxOS45MjIyIDcuNDQ0NjIgMTkuOTM0NCA3LjUxNDMgMTkuOTI1MyA3LjU4ODg4QzE5LjkxNjEgNy42NjE1IDE5Ljg2ODMgNy43MzIxNiAxOS44NjczIDcuODAzOEMxOS44NjYzIDcuODY2NiAxOS45MjEyIDcuOTI5NDEgMTkuOTI1MyA3Ljk5MjIyQzE5LjkzNDQgOC4xNTAyMSAxOS44ODQ2IDguMzE5MDEgMTkuOTQwNiA4LjQ2MzI3QzE5Ljk5OTYgOC42MTgzMiAxOS45ODUzIDguNzY2NSAxOS45OTI0IDguOTE3NjNDMjAuMDAwNiA5LjA3NTYzIDE5Ljk4MzMgOS4yMzM2MyAxOS45OTc1IDkuMzkxNjNDMjAuMDA4NyA5LjUxNDMgMTkuOTU2OCA5LjYyMzIzIDE5LjkyOTQgOS43MzkwM0MxOS45MDE5IDkuODUzODQgMTkuOTg2MyA5Ljk4MjQgMTkuODYzMiAxMC4wODY0QzE5Ljg1ODEgMTAuMDkxMyAxOS44NjMyIDEwLjEwMzEgMTkuODYzMiAxMC4xMTE5QzE5Ljg0MTkgMTAuMzUwNCAxOS44MDYyIDEwLjU4ODkgMTkuODAwMSAxMC44MjczTDE5Ljc5NSAxMi4wNjQ4QzE5Ljc5NCAxMi4xODE2IDE5LjgzNDcgMTIuMzA0MyAxOS43MzQgMTIuNDEzMkMxOS43MTI2IDEyLjQzNTggMTkuNzQ0MiAxMi40ODU4IDE5LjcyODkgMTIuNTE2M0MxOS42NzE5IDEyLjYzMDEgMTkuODY0MiAxMi43MjA0IDE5Ljc3NTcgMTIuODMwM0MxOS42OTY0IDEyLjkyODQgMTkuNzQxMSAxMy4wMzE1IDE5LjczMyAxMy4xMzE2QzE5LjcyMzggMTMuMjQ1NCAxOS43MzUgMTMuMzU5MiAxOS43Mjk5IDEzLjQ3NDFDMTkuNzI1OSAxMy41NTI2IDE5Ljc0MjEgMTMuNjI0MiAxOS43OTcxIDEzLjY4OUMxOS42ODIxIDEzLjc3NTMgMTkuNzU5NCAxMy44OTkgMTkuNzA1NSAxNC4wMDFDMTkuNjY5OSAxNC4wNjc4IDE5LjYzNTMgMTQuMTcxOCAxOS42NzUgMTQuMjIwOUMxOS43NjE1IDE0LjMyOTggMTkuNzIwOCAxNC40Mzc3IDE5LjcyOTkgMTQuNTQ1N0MxOS43NDQyIDE0LjcwNTcgMTkuNzA3NSAxNC44Njc2IDE5Ljc5MSAxNS4wMjU2QzE5LjgyNjYgMTUuMDkyMyAxOS44MDUyIDE1LjE4MjYgMTkuNzk0IDE1LjI2MDFDMTkuNzgzOSAxNS4zMzI3IDE5LjczOTEgMTUuNDAzNCAxOS43MzQgMTUuNDc2QzE5LjcyNDggMTUuNjEwNSAxOS43Mjk5IDE1Ljc0MyAxOS43OTEgMTUuODc2NEMxOS44NTIgMTYuMDI2NiAxOS43MDE0IDE2LjI1MDMgMTkuNjk2NCAxNi40NTI1QzE5LjY5NjQgMTYuNDgzOSAxOS42NTA2IDE2LjUzMjkgMTkuNjE3IDE2LjU1ODVDMTkuNDI4OCAxNi42ODggMTkuMjcxIDE2Ljc2MDYgMTkuMDUxMyAxNi44ODAzQzE4LjgxOTMgMTYuOTc3NSAxOC42OTExIDE2LjkwODggMTguNTU0NyAxNi45MTY3QzE4LjQwOTIgMTYuOTE2NyAxOC4yNTk3IDE2LjkzOTIgMTguMTE5MiAxNi45MDg4QzE4LjAyODcgMTYuODg5MiAxNy45ODM5IDE3LjA0NDIgMTcuODc3MSAxNi45NDcxQzE3LjgxOTEgMTYuODk0MSAxNy43MDYxIDE2LjkyMTYgMTcuNjE3NiAxNi45MTc2QzE3LjUyNzEgMTYuOTEzNyAxNy40MzE0IDE2LjkzNzMgMTcuMzQ1OSAxNi45MTM3QzE2Ljg5MjEgMTYuNzg3MSAxNi40MzEyIDE2Ljg5MjEgMTUuOTc2NCAxNi44NTA5QzE1Ljc4NDEgMTYuODMzMiAxNS41ODE2IDE2LjkyODQgMTUuMzk4NSAxNi43OTFDMTUuMjYyMSAxNi44OTQxIDE1LjA5NTIgMTYuODA1OCAxNC45NjUgMTYuODc1NEMxNC44ODI2IDE2LjkxOTYgMTQuODA5MyAxNi45MTQ3IDE0LjczNCAxNi45MTU3TDEzLjIzMzIgMTYuOTIwNkMxMi45MDQ2IDE2LjkyNzQgMTIuNTc1OSAxNi45NjQ3IDEyLjI0NjMgMTYuOTc3NUMxMi4xNTM3IDE2Ljk4MTQgMTIuMDYzMSAxNi45OTMyIDExLjk2MjQgMTYuOTMwNEMxMS44ODgxIDE2Ljg4MzMgMTEuNzUzOCAxNi44Nzk0IDExLjY1NjEgMTYuOTYwOEMxMS42MzY4IDE2Ljk3NjUgMTEuNTk4MSAxNi45OTAzIDExLjU4MjkgMTYuOTc4NUMxMS4zOTU2IDE2LjgyOTMgMTEuMjEwNSAxNi45ODQ0IDExLjAyNjMgMTYuOTkwM0MxMC42NjYxIDE3LjAwMiAxMC4zMTUxIDE2LjkwODggOS45NTY5MSAxNi45MTg2QzkuODgwNTkgMTYuOTIwNiA5Ljc5MTA2IDE2Ljg3NjQgOS43MzMwNiAxNi45NzY1QzkuNjc0MDQgMTYuODkzMSA5LjYzMDI5IDE2LjkzMzMgOS41NTgwNSAxNi45NzE2QzkuNTIwNCAxNi45OTEyIDkuNDcxNTYgMTcuMDAyIDkuNDIyNzIgMTcuMDAyQzkuMzM5MjkgMTcuMDAyIDkuMjQ4NzMgMTYuOTgwNCA5LjE5Nzg2IDE2Ljk0NjFDOS4wNTk0OCAxNi44NTE5IDguOTI4MjIgMTYuODE4NSA4LjgxMTIxIDE2LjczMDJDOC42NzI4MyAxNi42MTkzIDguNjE5OTIgMTYuNTU5NCA4LjU1ODg3IDE2LjQ5ODZMNy44MDU5MyAxNS42NTY2QzcuNzU3MDkgMTUuNjAwNyA3LjczNDcgMTUuNTI0MSA3LjY5NTAyIDE1LjQ2MDNDNy42NTUzNCAxNS4zOTU2IDcuNTYzNzYgMTUuMzczIDcuNTc2OTkgMTUuMjYzMUM3LjU4MjA4IDE1LjIyMTkgNy41MTA4NSAxNS4xODU1IDcuNDczMjEgMTUuMTQ4MkM3LjMzOTkxIDE1LjAxNTggNy4yMzYxMyAxNC44MzYyIDcuMDY2MjEgMTQuNzY0NUM2Ljg5ODMyIDE0LjY5MzkgNi44MzMyIDE0LjUxMDQgNi42MzM3NyAxNC40ODY4QzYuNTc3ODEgMTQuNDc5OSA2LjU0NzI5IDE0LjM5OTUgNi40OTg0NSAxNC4zNjEyQzYuMjk4IDE0LjIwNTIgNi4xOTExNiAxMy45NTEgNS45MTY0NCAxMy44NzI1QzUuOTE0NDEgMTMuNzUwOCA1LjgyNTg4IDEzLjY4NyA1Ljc0OTU3IDEzLjYxOTNDNS42OTM2MSAxMy41NjkzIDUuNjY3MTUgMTMuNDc1IDUuNTUyMTggMTMuNDk4NkM1LjUzODk1IDEzLjUwMTUgNS41MTk2MiAxMy40ODI5IDUuNTExNDggMTMuNDY5MkM1LjQ2MzY2IDEzLjM4OTcgNS40NTE0NSAxMy4yOTA1IDUuMzY2OTkgMTMuMjMwN0M1LjI5Njc5IDEzLjE4MDYgNS4yMDQxOSAxMy4xNzM4IDUuMTM5MDggMTMuMTA4QzQuOTA2MDcgMTIuODcwNSA0Ljc1NDQ2IDEyLjU2MzQgNC40ODM4MSAxMi4zNTgzQzQuNDczNjMgMTIuMjM5NSA0LjM5NDI3IDEyLjE4MTYgNC4zMTU5MiAxMi4wOTgyQzQuMTM3ODYgMTEuOTEzNyAzLjk0NDU0IDExLjY2MTUgNC4wMTE2OSAxMS4zNjAyQzQuMDUzNDEgMTEuMDg0NSA0LjMzNTI2IDEwLjg0MTEgNC4zODcxNSAxMC43MjcyQzQuNTI2NTQgMTAuNDYxMyA0Ljc3MDc0IDEwLjI5NzQgNC45NjIwMyAxMC4wODI1QzUuMDEwODcgMTAuMDI3NSA1LjA0NTQ3IDkuOTQ1MTEgNS4xNjA0NCA5Ljk2MTc5QzUuMTg3OTIgOS45NjU3MiA1LjIzNzc3IDkuOTAxOTMgNS4yMzM3IDkuODY3NThDNS4yMjM1MyA5Ljc5Mzk4IDUuMjkwNjggOS43ODAyNCA1LjMwNjk2IDkuNzMzMTRDNS4zNTQ3OCA5LjU5OTY3IDUuNjE4MzEgOS42NzMyOCA1LjU4MTY5IDkuNDYzMjdMNS44ODU5MiA5LjE2MTAxTDYuMTkxMTYgOC44NTk3M0M2LjI0IDguODE0NTkgNi4yNzE1NSA4Ljc1NDczIDYuMzY2MTcgOC43NDg4NEM2LjQyOTI2IDguNzQ0OTEgNi41MTI2OSA4LjY3MjI5IDYuNTE3NzggOC42MTQzOUM2LjUyODk3IDguNDc2MDIgNi42MzU4MSA4LjQyMzAzIDYuNzEyMTIgOC4zNDM1NEM2Ljk0MTA2IDguMTA2MDUgNy4xNzQwNiA3Ljg3MTUxIDcuNDE1MjEgNy42NDQ4MkM3LjUyMTAzIDcuNTQ1NyA3LjY0OTIzIDcuNDY5MTUgNy43NjcyNiA3LjM4MDgzQzcuODg2MzEgNy4yOTE1MyA3Ljk0NzM2IDcuMTQwNCA4LjExMDE2IDcuMDk4MkM4LjEyMTM1IDcuMDk1MjYgOC4xMzA1MSA3LjA4MjUgOC4xMzY2MSA3LjA3MTcxQzguMTY4MTUgNy4wMjE2NiA4LjE4ODUgNi45NjA4MSA4LjIzMjI2IDYuOTI0NUM4LjI4OTI0IDYuODc2NDIgOC40MTY0MiA2Ljg2MTcgOC40MjE1MSA2LjgwODdDOC40MzE2OCA2LjcwMzcgOC41MjQyOCA2LjcxNTQ3IDguNTc0MTMgNi42NzYyMkM4LjcxOTYzIDYuNTYyMzggOC45MjcyIDYuNjAxNjQgOS4wNjY2IDYuNzYwNjJDOS4wOTcxMiA2Ljc5NTk0IDkuMTE5NTEgNi44NDU5OSA5LjEyNzY1IDYuODg5MTdDOS4xNzg1MiA3LjE2MTAxIDkuMTY5MzcgNy4xNTQxNCA4Ljk5MTMxIDcuMzQ5NDNDOC43NjY0NCA3LjU5NjczIDguNDM4ODEgNy43MzcwNiA4LjIzNjMzIDguMDA1OTVDNy45OTUxOCA4LjA3OTU2IDcuODg3MzMgOC4yOTU0NSA3LjcxMDI4IDguNDM2NzdDNy41MjUxIDguNTgzOTcgNy4yODU5OSA4LjY4NTA1IDcuMTc0MDYgOC44OTMxQzcuMDYzMTYgOS4xMDAxNiA2Ljg5MzIzIDkuMjQ3MzcgNi43MzI0NyA5LjQwNTM3QzYuNjA5MzUgOS41MjUwOSA2LjQ1NTcxIDkuNjE0MzkgNi4zMjU0NyA5LjcyODIzQzYuMTkxMTYgOS44NDY5OCA2LjA4NTM0IDkuOTk2MTQgNS45Mzg4MyAxMC4wOTgyQzUuODQ4MjcgMTAuMTYyIDUuNzEwOTEgMTAuMTkwNCA1LjY3MTIyIDEwLjI5MzVDNS41ODM3MiAxMC41MTkyIDUuMzU3ODQgMTAuNjI0MiA1LjIzOTgxIDEwLjgxMzZDNS4xNTczOSAxMC45NDYxIDUuMDUzNjEgMTEuMDU4IDQuOTQ2NzcgMTEuMTY3OUw0Ljc5MTA5IDExLjMzMDhDNC43Njk3MyAxMS4zNTYzIDQuNzU3NTIgMTEuMzg2NyA0Ljc1NjUgMTEuNDE3MUM0Ljc1NjUgMTEuNDg2OCA0Ljc5MjExIDExLjUzNjkgNC44MDk0MSAxMS41NzkxQzQuODIzNjUgMTEuNjA1NiA0LjgyMDYgMTEuNjAxNiA0LjgyOTc2IDExLjY3NjJDNC44NTMxNiAxMS43NjU1IDQuOTM2NTkgMTEuODUwOSA1LjA1NzY4IDExLjg3NzRDNS4xMDc1MyAxMS44ODgyIDUuMTcxNjQgMTEuOTI0NSA1LjE3OTc4IDExLjk2NTdDNS4yMTQzNyAxMi4xMzg0IDUuMzU2ODIgMTIuMjIyOCA1LjQ2NzczIDEyLjMyODhDNS41Mzc5MyAxMi4zOTY1IDUuNTQ5MTMgMTIuNTM1OSA1LjYxODMxIDEyLjU1MTZDNS43MzUzMyAxMi41NzcxIDUuNzc4MDYgMTIuNjU5NSA1Ljg0OTI5IDEyLjcxOTRDNS44OTkxNCAxMi43NjE2IDUuOTc0NDQgMTIuNzk0IDUuOTU1MTEgMTIuODkyMUM1Ljk1MDAyIDEyLjkxODYgNS45OTA3MiAxMi45Njc3IDYuMDE4MTkgMTIuOTY4N0M2LjE3NjkyIDEyLjk3MTYgNi4yMjY3OCAxMy4wOTcyIDYuMzEzMjYgMTMuMTc4N0M2LjUyMDgzIDEzLjM3NDkgNi43MjQzMyAxMy41NzYxIDYuOTIxNzIgMTMuNzgzMkM3LjA4NDUyIDEzLjk1MzkgNy4zMzI3OSAxNC4wMzM0IDcuNDY3MSAxNC4yMzI2QzcuNjUwMjUgMTQuMjYwMSA3LjcyOTYxIDE0LjQwNjMgNy44Mzc0NyAxNC41MTYzQzcuOTE5ODggMTQuNTk5NyA3Ljk3NTg1IDE0LjcwODYgOC4wNDQwMiAxNC44MDY3QzguMTExMTcgMTQuOTAzOSA4LjIwNzg0IDE0Ljk3MTYgOC4yNjA3NSAxNS4wOTIzQzguMzI1ODYgMTUuMjQxNSA4LjQ5Mzc1IDE1LjMzMzcgOC42MDU2OCAxNS40NjAzQzguNjY2NzMgMTUuNTI5IDguNzgzNzQgMTUuNTYwNCA4Ljc2NjQ0IDE1LjY5QzguNzY0NCAxNS43MDc2IDguNzk1OTUgMTUuNzM2MSA4LjgxNzMxIDE1LjczNzFDOC45ODMxNyAxNS43NDY5IDkuMDY5NjUgMTUuODc2NCA5LjExNDQyIDE1Ljk4MTRDOS4yMTMxMiAxNi4xODE2IDkuMjU5OTIgMTYuMTgxNiA5LjM1NDU1IDE2LjIxNjlDOS4zOTUyNSAxNi4yMzk1IDkuNTk4NzUgMTYuMjE2OSA5LjcyNzk3IDE2LjIyNzdDOS44MzE3NiAxNi4yMzQ2IDkuOTM0NTIgMTYuMjEyIDEwLjA0MzQgMTYuMjU4MkMxMC4xMjY4IDE2LjI5MzUgMTAuMjM4OCAxNi4yMzQ2IDEwLjMzNzQgMTYuMjI3N0MxMC40MzcyIDE2LjIyMDkgMTAuNTM3OSAxNi4yMjU4IDEwLjYzNzYgMTYuMjI1OEgxMS4yOTI5QzExLjQxMDkgMTYuMjI1OCAxMS41MyAxNi4yMTc5IDExLjY0OCAxNi4yMjc3QzExLjc1ODkgMTYuMjM3NiAxMS44Njg4IDE2LjI4MTcgMTEuOTgwNyAxNi4yODU2QzEyLjI5MzEgMTYuMjk4NCAxMi41OTkzIDE2LjE4MjYgMTIuOTEzNyAxNi4yMjQ4QzEyLjk5ODIgMTYuMTQ3MyAxMy4wODA2IDE2LjIwMzIgMTMuMTY5MSAxNi4yMTc5QzEzLjI1MDUgMTYuMjMxNyAxMy4zNDYyIDE2LjI2NSAxMy40Mjc2IDE2LjE4NDZDMTMuNDUgMTYuMTYyIDEzLjQ5MzcgMTYuMTY2OSAxMy41MjczIDE2LjE2MUMxMy42MDI2IDE2LjE0OTIgMTMuNjY4NyAxNi4yMjQ4IDEzLjc1ODMgMTYuMTY4OUMxMy44MjEzIDE2LjEyOTYgMTMuOTE5IDE2LjE2NzkgMTQuMDAwNCAxNi4xNTlDMTQuMDg1OSAxNi4xNTAyIDE0LjE4MjYgMTYuMjA2MiAxNC4yNTQ4IDE2LjEwN0MxNC40MDQ0IDE2LjI1NDIgMTQuNTQ3OCAxNi4wMjg1IDE0LjY5NzQgMTYuMDk2MkMxNC43NDQyIDE2LjExNzggMTQuNzk2MSAxNi4xMjU3IDE0Ljg0NiAxNi4xMzk0QzE0Ljg3MDQgMTYuMTQ2MyAxNC44OTg5IDE2LjE2NDkgMTQuOTIwMiAxNi4xNTgxQzE1LjMxODEgMTYuMDI0NiAxNS43MjUxIDE2LjEzMjUgMTYuMTI2IDE2LjA5NTNDMTYuMTc1OCAxNi4wOTA0IDE2LjIyMjYgMTYuMDYxOSAxNi4yNzI1IDE2LjA0ODJDMTYuMjk1OSAxNi4wNDEzIDE2LjMyMjMgMTYuMDM4MyAxNi4zNDU3IDE2LjA0NDJDMTYuNTY1NSAxNi4wOTgyIDE2LjU2NDUgMTYuMDk2MiAxNi43NyAxNi4wNDEzQzE2LjgyMTkgMTYuMDI3NSAxNi44Nzc5IDE2LjAzOTMgMTYuOTMwOCAxNi4wMzM0QzE3LjA2OTIgMTYuMDE3NyAxNy4yMDQ1IDE2LjA0MzIgMTcuMzQ4IDE1Ljk4MTRDMTcuNDkxNCAxNS45MTk2IDE3LjY0ODEgMTYuMDMwNSAxNy43OTY3IDE2LjA3ODZDMTcuOTI5IDE2LjEyMDggMTguMDU5MiAxNi4xNjg5IDE4LjIwNDcgMTYuMTY0TDE4Ljc1MDEgMTYuMTU3MUMxOC45MTQ5IDE2LjE2MyAxOC45MjUxIDE2LjE0MjQgMTkuMDAwNCAxNi4wOTA0QzE5LjAxMzYgMTYuMDc4NiAxOS4wNDkyIDE2LjA3MDcgMTkuMDMxOSAxNi4wNDcyQzE4Ljk1OTcgMTUuOTQ1MSAxOC44NzczIDE1Ljk1MyAxOS4wNzM2IDE1Ljk0MDJDMTkuMDgyOCAxNS45MzkyIDE5LjA4MjggMTUuOTIzNSAxOS4wNzI2IDE1LjkxOTZDMTguOTUzNiAxNS44NDIxIDE5LjAxMTYgMTUuNzIzMyAxOS4wMTU2IDE1LjYyODFDMTkuMDI4OSAxNS4yNTYyIDE4Ljg5NzYgMTQuODkxMSAxOC45NDU0IDE0LjUxODJDMTguOTUzNiAxNC40NTg0IDE4LjkyMzEgMTQuMzc2OSAxOC45NjE3IDE0LjM0MTZDMTkuMDQ0MSAxNC4yNjcgMTguOTExOSAxNC4yMzA3IDE4Ljk0MDQgMTQuMTY1OUMxOC45NjQ4IDE0LjExMTkgMTguOTE3IDE0LjAzMTUgMTguOTUwNSAxMy45ODUzQzE5LjA3MTYgMTMuODIwNSAxOS4wMzUgMTMuNjM2IDE4Ljk5NDMgMTMuNDgwOUMxOC45NTY2IDEzLjMzNTcgMTguOTEzOSAxMy4xODU1IDE4Ljk1NDYgMTMuMDU1QzE5LjAzNSAxMi43OTY5IDE4Ljk5OTQgMTIuNTQxOCAxOS4wMDc1IDEyLjI4NDdDMTkuMDE2NyAxMi4wMjE3IDE5LjAxNDYgMTEuNzU4NyAxOS4wMDc1IDExLjQ5NDdDMTkuMDA0NSAxMS4zODY3IDE5LjA1NDMgMTEuMjcxOSAxOC45NDc1IDExLjE3MThDMTguOTI2MSAxMS4xNTEyIDE4LjkzODMgMTEuMTAzMSAxOC45NDU0IDExLjA2ODhDMTguOTYzOCAxMC45ODczIDE5LjAwNTUgMTAuOTA3OCAxOS4wMDU1IDEwLjgyNzNDMTkuMDA1NSAxMC43NDY5IDE4Ljk2MjcgMTAuNjY3NCAxOC45NDU0IDEwLjU4NTlDMTguOTMyMiAxMC41MjAyIDE4Ljk0NTQgMTAuNDU5MyAxOC44ODk1IDEwLjM5MTZDMTguODQ3OCAxMC4zNDI2IDE4Ljg4MjQgMTAuMjU2MiAxOC45MzgzIDEwLjE3ODdDMTkuMDUwMiAxMC4wMjQ2IDE5LjE2NDIgOS44NjQ2NCAxOS4xNDM5IDkuNjY3MzlDMTkuMTI2NiA5LjQ5MjcxIDE5LjE0MzkgOS4zMTcwNCAxOS4xMzc3IDkuMTQxMzhDMTkuMTM1NyA5LjA2Nzc4IDE5LjE0MzkgOC45OTgxIDE5LjA5MDkgOC45MTk2QzE5LjA0MzEgOC44NDg5NCAxOS4wNjM1IDguNzMwMTkgMTkuMDk4MSA4LjY0MzgzQzE5LjE1MyA4LjUwODQxIDE5LjE2MTIgOC4zODM3OCAxOS4wOTgxIDguMjUxMjlDMTkuMDc1NyA4LjIwNjE1IDE5LjA3NjcgOC4xNTEyIDE5LjA3NTcgOC4xMDExNVY3LjE3OTY1QzE5LjA3NTcgNy4wODY0MyAxOS4wNTUzIDcuMDU5OTMgMTkuMTI3NiA3LjAyMzYyQzE5LjAzMDkgNy4wMTk2OSAxOS4wNTMzIDYuOTkwMjUgMTkuMDQzMSA2Ljk2MDgxQzE5LjAzMTkgNi45MjI1NCAxOS4wMjg5IDYuODU4NzUgMTguOTg2MSA2LjgyNDRDMTguOTMzMiA2Ljc4MzE5IDE4Ljg3NzMgNi43NzYzMiAxOC43OTU5IDYuODMzMjRDMTguNjgzOSA2Ljg4NDI3IDE4LjU0OTYgNi44MDA4NSAxOC40Mjg2IDYuODc1NDNDMTguNDA2MiA2Ljg4OTE3IDE4LjM1ODMgNi44MzcxNiAxOC4zMjQ4IDYuODQyMDdDMTguMTg2NCA2Ljg2MDcxIDE4LjAzNjggNi43NzgyOCAxNy45MDk2IDYuOTAwOTVDMTcuODk5NSA2LjkxMTc0IDE3Ljg2ODkgNi45MTA3NiAxNy44NTY3IDYuOTAwOTVDMTcuNjk4IDYuNzc1MzQgMTcuNTQwMyA2Ljg3MDUzIDE3LjM4MjYgNi45MDI5MUMxNy4yMTA2IDYuOTM5MjIgMTcuMDUzOSA2LjgzNjE4IDE2Ljg4NiA2LjgzODE0QzE2LjY5NDcgNi44NDEwOSAxNi40OTYzIDYuODc4MzggMTYuMzE0MiA2LjgzMDI5QzE2LjAwMTggNi43NDY4OCAxNS42OTA1IDYuNzg4MDkgMTUuMzgwMSA2Ljc3ODI4QzE1LjA2MjcgNi43Njg0NyAxNC43NDMyIDYuNzY5NDUgMTQuNDI1NyA2Ljc3ODI4QzE0LjI4NzQgNi43ODIyMSAxNC4xNSA2LjgyNjM3IDE0LjAxMTYgNi44MzYxOEMxMy44NTggNi44NDY5OCAxMy43MDIzIDYuODM4MTQgMTMuNTQ3NiA2LjgzODE0TDEzLjExMTEgNi44MzYxOEMxMy4wNDMgNi44MzQyMiAxMi45Njc3IDYuODcwNTMgMTIuOTA3NiA2Ljc5MjAyQzEyLjg5NTQgNi43NzYzMiAxMi44NTM3IDYuNzcwNDMgMTIuODM2NCA2Ljc4MjIxQzEyLjcxMTMgNi44NjY2IDEyLjU5MTIgNi44NjE3IDEyLjQ2NSA2Ljc4NTE1QzEyLjQyOTQgNi43NjM1NiAxMi4zNzU1IDYuNzgzMTkgMTIuMzMyOCA2Ljc3MjM5QzEyLjIxMzcgNi43NDA5OSAxMi4xMTA5IDYuODE0NTkgMTIgNi44MzcxNkMxMS44OTgzIDYuODU4NzUgMTEuNzgzMyA2Ljc4MDI0IDExLjY5MjggNi44OTcwMkMxMS42ODA1IDYuOTEyNzMgMTEuNjMwNyA2LjkxMzcxIDExLjYxNDQgNi44OTgwMUMxMS40MTA5IDYuNzAxNzMgMTEuMTc3OSA3LjAyNzU0IDEwLjk3NDQgNi44NDY5OEMxMC44OTMgNi45NTg4NSAxMC44MDk2IDYuODMxMjcgMTAuNzQ1NSA2Ljg0Njk4QzEwLjY1MTkgNi44NzE1MSAxMC41NjIzIDYuOTAwOTUgMTAuNDY1NyA2Ljg5ODk5QzEwLjM3NTEgNi44OTcwMiAxMC4yODM1IDYuODkyMTIgMTAuMTkzIDYuODk4OTlDMTAuMDI3MSA2LjkxMjczIDkuODU5MjMgNi44NjE3IDkuNjkzMzggNi45NTI5NkM5LjYzODQzIDYuOTgzMzggOS41MzQ2NSA3LjAwMzAxIDkuNDY2NDggNi45MTQ2OUM5LjQ1OTM1IDYuODk4OTkgOS40MDU0MyA2LjkwMDk1IDkuNDA5NSA2LjkwNTg2QzkuMzcwODMgNi45MzcyNiA5LjI4MjMxIDYuODc1NDMgOS4xMjk2OCA2Ljc5MjAyQzkuMDQ4MjkgNi43MzYwOCA4Ljk1NjcxIDYuNjU5NTQgOC45MDM4IDYuNTcxMjFDOC44NzUzMSA2LjUyODA0IDguOTMxMjcgNi40Mzc3NSA4Ljk3NDAxIDYuMzczOTZDOS4wNDIxOCA2LjI2MjA5IDkuMTQyOTEgNi4xMzI1NSA5LjMwMTY0IDYuMDg5MzdDOS41MDYxNiA2LjA0NzE3IDkuNTYyMTIgNi4wNzg1NyA5LjczMDAxIDYuMDc1NjNMOS43MzQwOCA2LjA4MTUyWiIgZmlsbD0iIzgwODA4MCIvPgo8L3N2Zz4K');
  }

  @media screen and (min-width: 1024px) {
    input[type='search']::-webkit-search-cancel-button {
      top: 0.1875rem;
    }
  }

  .header-search__content {
    max-width: 100%;
  }

  .header-search__push {
    display: grid;
    row-gap: calc(var(--spacing) * 16);

    @media screen and (min-width: 1024px) {
      display: grid;
      grid-template-columns: 65.58vw 0.0625rem 21.38vw;
      grid-template-rows: 0fr auto auto;

      column-gap: calc(var(--spacing) * 20);
      align-items: start;
      align-content: start;
    }

    & .block-push-related-search {
      display: none;
    }

    &:has(.is-open) {
      & .border-desktop {
        @media screen and (min-width: 1024px) {
          grid-row: 1 / span 2;
        }
      }

      & .block-push-about-diptyque,
      & .block-push-iconics,
      & .block-push-new-trending,
      & .block-trending-search {
        display: none;
      }

      & .block-push-related-search {
        display: grid;
      }
    }

    &:has(.is-no-result) {
      @media screen and (min-width: 1024px) {
        display: grid;
        grid-template-rows: 0fr auto auto auto;
      }

      & .border-desktop {
        @media screen and (min-width: 1024px) {
          grid-row: 1 / span 4;
        }
      }
    }
  }

  .block-trending-search {
    display: grid;
    row-gap: calc(var(--spacing) * 8);
    padding-top: calc(var(--spacing) * 8);

    @media screen and (min-width: 1024px) {
      grid-column: 1 / span 1;
      padding-top: initial;
    }

    & .block-trending-search__title {
      padding-left: 1rem;

      @media screen and (min-width: 1024px) {
        padding-left: 0;
      }
    }

    & .inside {
      overflow: scroll;
      width: 100%;
      padding-inline: 1rem;

      @media screen and (min-width: 1024px) {
        padding-inline: 0;
      }

      & ul {
        display: flex;
        column-gap: calc(var(--spacing) * 6);
        width: max-content;
        flex-wrap: nowrap;

        & li {
          display: flex;
          height: 1.875rem;
          padding: 0.4375rem 0.5rem;
          justify-content: center;
          align-items: center;
          border-radius: 3px;
          color: var(--Content-secondary, #4d4d4d);

          border: 1px solid var(--Border-secondary, #717171);

          color: var(--Content-secondary, #4d4d4d);
          transition: 0.15s ease-out;

          & :hover {
            text-decoration: var(--color-black);
          }
        }
      }
    }

    & a {
      color: inherit;
    }
  }

  .block-push-iconics {
    display: grid;
    row-gap: calc(var(--spacing) * 8);

    @media screen and (min-width: 1024px) {
      grid-column: 1 / span 1;
    }

    .block-push-iconics__title {
      padding-left: 1rem;

      @media screen and (min-width: 1024px) {
        padding-left: 0;
      }
    }

    .inside {
      overflow: scroll;
      width: 100%;
      padding-inline: 1rem;

      @media screen and (min-width: 1024px) {
        padding-inline: 0;
      }

      .block-push-iconics__container {
        display: flex;
        column-gap: calc(var(--spacing) * 5);
        width: max-content;
        flex-wrap: nowrap;

        @media screen and (min-width: 1024px) {
          width: 100%;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          column-gap: calc(var(--spacing) * 10);
        }

        .block-push-iconics__push {
          max-width: 73.07vw;
          width: 100%;
          display: grid;
          row-gap: calc(var(--spacing) * 8);
          text-align: center;
          grid-template-rows: auto 1fr;
          padding-bottom: var(--spacings-small-xl, 1rem);

          @media screen and (min-width: 1024px) {
            max-width: unset;
          }

          a {
            display: grid;
          }

          img {
            aspect-ratio: 4 / 3;
            height: 100%;
          }

          .push__text {
            display: flex;
            flex-flow: column nowrap;
            align-items: flex-start;
            justify-content: flex-start;
            row-gap: calc(var(--spacing) * 4);
            text-align: start;

            .push__link {
              padding-top: var(--spacings-small-l);
              justify-self: center;
            }

            & a {
              margin-block-start: auto;
            }
          }
        }
      }
    }
  }

  .block-push-new-trending {
    display: grid;
    margin-block-start: 1.25rem;
    row-gap: calc(var(--spacing) * 8);

    @media screen and (min-width: 1024px) {
      margin-block-start: 0rem;
      grid-column: 1 / span 1;
    }

    & .block-push-new-trending__title {
      padding-left: 1rem;

      @media screen and (min-width: 1024px) {
        padding-inline: 0;
      }
    }

    & .inside {
      overflow: scroll;
      width: 100%;
      padding-inline: 1rem;

      @media screen and (min-width: 1024px) {
        padding-inline: 0;
      }

      & .block-push-new-trending__container {
        display: flex;
        column-gap: calc(var(--spacing) * 5);
        width: max-content;
        flex-wrap: nowrap;

        @media screen and (min-width: 1024px) {
          width: 100%;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          column-gap: calc(var(--spacing) * 10);
        }

        & .block-push-new-trending__push {
          max-width: 73.07vw;
          display: grid;
          width: 100%;
          align-content: flex-start;
          row-gap: calc(var(--spacing) * 8);
          padding-bottom: var(--spacings-small-xl, 1rem);

          .push__text {
            display: grid;
            row-gap: calc(var(--spacing) * 4);
          }

          & a {
            display: grid;
          }

          & img {
            aspect-ratio: 4 / 3;
            width: 100%;
          }
        }
      }
    }
  }

  .border-desktop {
    display: none;

    @media screen and (min-width: 1024px) {
      grid-column: 2 / span 1;
      grid-row: 1 / span 3;
      display: block;
      width: 0.0625rem;
      background-color: var(--Gris-Nacre, #e6e5e5);
      height: 100%;
    }
  }

  .block-push-about-diptyque {
    display: grid;
    border-top: 1px solid var(--Gris-Nacre, #e6e5e5);
    padding-top: calc(var(--spacing) * 16);
    row-gap: calc(var(--spacing) * 8);
    margin-inline: 1rem;

    @media screen and (min-width: 1024px) {
      grid-column: 3 / span 1;
      grid-row: 1 / span 2;
      margin-inline: 0;
      border-top: none;
      align-self: flex-start;
      padding-top: 0;
    }

    .inside {
      overflow: scroll;
      width: 100%;

      .block-push-about-diptyque__container {
        display: grid;

        .block-push-about-diptyque__push {
          display: grid;
          align-content: start;
          row-gap: calc(var(--spacing) * 8);

          .push__text {
            text-align: start;
            display: flex;
            flex-flow: column nowrap;
            align-items: flex-start;
            justify-content: flex-start;
            row-gap: calc(var(--spacing) * 4);

            .push__link {
              padding-top: var(--spacings-small-l);
              justify-self: center;
            }
          }

          img {
            aspect-ratio: 4 / 3;
            height: 100%;
          }
        }
      }
    }

    & .customer-service {
      display: grid;
      padding-top: calc(var(--spacing) * 12);
      row-gap: calc(var(--spacing) * 8);

      & .customer-service__menu {
        display: grid;
        row-gap: calc(var(--spacing) * 6);

        & .customer-service__item {
          display: flex;
          align-items: center;
          column-gap: calc(var(--spacing) * 5);
        }
      }
    }
  }

  .block-push-related-search {
    display: grid;
    border-top: 1px solid var(--Gris-Nacre, #e6e5e5);
    padding-top: calc(var(--spacing) * 16);
    row-gap: calc(var(--spacing) * 8);
    margin-inline: 1rem;

    @media screen and (min-width: 1024px) {
      grid-column: 3 / span 1;
      grid-row: 1 / span 2;
      border-top: none;
      align-self: flex-start;
      padding-top: 0;
      margin-inline: 0;
    }

    .inside {
      overflow: scroll;
      width: 100%;

      .block-push-related-search__container {
        display: grid;

        .block-push-related-search__push {
          display: grid;
          align-content: start;
          row-gap: calc(var(--spacing) * 8);

          .push__text {
            text-align: center;
            display: grid;
            row-gap: calc(var(--spacing) * 4);
            padding: 0 var(--spacings-small-xl, 1rem)
              var(--spacings-small-xl, 1rem) var(--spacings-small-xl, 1rem);

            .push__link {
              padding-top: var(--spacings-small-l);
              justify-self: center;
            }
          }

          img {
            aspect-ratio: 4 / 3;
            height: 100%;
          }
        }
      }
    }
  }

  [data-predictive-result] {
    display: none;

    @media screen and (min-width: 1024px) {
      position: relative;
      grid-column: 1 / span 1;
      border-top: none;
      display: none;
      height: fit-content;
    }

    &:has(.is-open),
    &:has(.is-no-result) {
      display: block;

      @media screen and (min-width: 1024px) {
        display: block;
      }
    }
  }

  .predictive-queries {
    display: grid;
    padding-inline: 1rem;

    @media screen and (min-width: 1024px) {
      padding-inline: 0;
      padding-bottom: 0;
      padding-top: 0;
    }

    &:empty {
      padding: 0;
    }

    & li {
      padding-block: 0.3125rem;

      & mark {
        background-color: transparent;
        font-weight: 400;
      }

      &:first-child {
        padding-block-start: 0;
      }
    }
  }

  .header-search__product-result {
    display: grid;
    gap: calc(var(--spacing) * 8);
    padding-inline: 1rem;

    @media screen and (min-width: 1024px) {
      padding-inline: 0;
    }

    & .result-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    & .container-result {
      display: grid;
      gap: calc(var(--spacing) * 10);
      grid-template-columns: repeat(2, minmax(9.375rem, 1fr));

      @media screen and (min-width: 1024px) {
        display: flex;
        align-content: flex-start;
        justify-content: flex-start;
        height: fit-content;
        flex-wrap: wrap;
      }
    }

    & .product-card {
      @media screen and (min-width: 1024px) {
        max-width: calc(20% - 1.25rem);
        min-width: 8.625rem;
        height: auto !important;
        display: flex;
        flex-direction: column;
      }
    }
  }

  @media screen and (min-width: 1024px) {
    .header-search__logo {
      display: block;
    }

    input[type='search'] {
      width: 100%;
      border: none;
      border-bottom: 1px solid var(--color-gris-nacre, #e6e5e5);
      box-sizing: border-box;
      font-family: 'Apercu Pro', sans-serif;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5rem;
      letter-spacing: 0.00625rem;
      padding-bottom: calc(var(--spacing) * 2);
    }

    .header-search__icon-search {
      display: block;
    }

    .header-search {
      padding-top: calc(var(--spacing) * 12);
      padding-inline: calc(var(--spacing) * 16);
    }

    .header-search__form-search {
      width: 100%;
      padding: 0;
      padding-bottom: calc(var(--spacing) * 5);
      display: grid;
      grid-template-columns: auto 1fr;
      column-gap: calc(var(--spacing) * 5);
      border: none;

      @media (width >=64rem) {
        padding-bottom: calc(var(--spacing) * 12);
      }
    }
  }
}

.button--header-search {
  block-size: 1.25rem;
  padding-inline: initial;
  font-size: 0.875rem;
  background-color: transparent;
  border: none;
  box-shadow: none;
  appearance: none;
  text-decoration: underline;
  text-underline-offset: calc(var(--spacing) * 3);
  transition: 0.3s ease;

  &:hover {
    text-underline-offset: calc(var(--spacing) * 2);
  }

  &::after {
    content: '';
    position: absolute;
    inline-size: calc(100% + 1rem);
    block-size: calc(100% + 1.5rem);
    top: calc(50% - 0.25rem);
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
/* END_SECTION:header-search */

/* START_SECTION:header (INDEX:26) */
/* ⚠ Auto-generated from src/sections/header/header.css — do not edit directly. */
/* src/sections/header/header.css */
@layer reset, base, components, variants, settings;

@layer components {
  body.bg-secondary header {
    --color-white: #f8f8f8;
  }

  body.bg-secondary header.menu-is-open {
    --color-white: #ffffff;
  }

  body.bg-secondary header:has(.header__section--bottom.is-open) {
    --color-white: #ffffff;
  }

  .menu__level-1--mobile {
    display: grid;
    font-family: var(--font-headline);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.125rem;
    letter-spacing: 0;
  }

  .menu__level-1--desktop {
    display: none;
  }

  header {
    --move-to: 0;
    position: sticky;
    left: 0;
    top: 0;
    width: 100%;
    pointer-events: none;
    height: 100%;
    pointer-events: none;
    transition:
      transform 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99),
      top 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99),
      background-color 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99);
    z-index: 10;
    margin: 0 auto;
    width: 100%;
  }

  header:has(.header--grid) {
    position: absolute;
    top: unset;
  }

  .header-relative {
    position: relative;
    pointer-events: none;
    height: 100%;
  }

  .header-inside {
    padding-block: calc(var(--spacing) * 8);
    padding-inline: calc(var(--spacing) * 8);
    position: sticky;
    top: 0;
    background-color: var(--color-white);
    transition:
      transform 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99),
      background-color 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99);
    z-index: 10;
    /* max-width: var(--max-width); */
    margin: 0 auto;
    width: 100%;
  }

  /* Transparent layout wrapper so t-menu keeps participating in .header-inside grid */
  .header-inside > nav {
    display: contents;
  }

  header:has(.header--transparent) {
    mix-blend-mode: difference;

    .header-inside {
      background-color: transparent;
    }
  }

  header:has(.header--transparent) .header__logo svg {
    color: var(--color-white);
  }

  header:has(.header--transparent) .menu__item {
    color: var(--color-white);
  }

  header:has(.header__menu-toggle.is-open) {
    mix-blend-mode: normal;

    & .header-inside {
      background-color: var(--color-white);
    }
  }

  header:has(.header--transparent__mobile) {
    mix-blend-mode: difference;

    @media (min-width: 1024px) {
      mix-blend-mode: unset;
    }

    .header-inside {
      background-color: transparent;
      transition: background-color 0s;

      @media (min-width: 1024px) {
        background-color: var(--color-white);
      }
    }
  }

  /* ── Aucun fondu sur mobile ──────────────────────────────────────────────
     `mix-blend-mode: difference` sur le header (et sur la description produit
     et la barre de progression de la galerie) donnait au logo son contraste
     automatique. Sur iPhone, il faisait aussi recharger la page au pinch-zoom.

     Première tentative : rétrécir le calque du fondu, qui couvrait toute la
     page (8 064 px sur une PDP) parce que le <header> est
     `position: absolute; height: 100%`. Déployée en staging, testée sur
     iPhone — sans effet. Le coût de `mix-blend-mode` ne vient pas de la taille
     de l'élément fondu mais de sa TOILE DE FOND : WebKit doit aplatir tout ce
     qui est peint derrière, jusqu'au contexte d'empilement parent. Ni `body`
     ni `main` n'en créent, donc cette toile de fond est le document entier —
     elle l'est restée après le rétrécissement du calque.

     Donc plus de fondu du tout sous 1024px. La barre reprend les couleurs
     qu'elle a déjà sur desktop : sur une PDP le fond est un packshot blanc,
     `difference` y rendait de toute façon du noir — mêmes pixels. Les slides
     sombres (édito ET Night vision / `v-black`) gardent le blanc via
     `.is-edito-visible`, que la galerie pose sur le <header> dès qu'une de
     ces slides est visible, et qui éteignait déjà le fondu.

     `.header--transparent` (pages à hero sombre) garde son blanc : sans fondu,
     un hero CLAIR perdrait son contraste — à surveiller si un tel gabarit
     apparaît.

     Desktop inchangé : le fondu y reste, sans pinch-zoom pour le faire
     exploser, et le mega-menu en `position: fixed` supporte mal qu'on touche
     à l'empilement du header.

     1023.98px et non 1024px : à 1024 pile, les règles desktop `min-width`
     s'appliquent aussi et les deux jeux de couleurs se superposeraient. */
  @media screen and (max-width: 1023.98px) {
    header:has(.header--transparent),
    header:has(.header--transparent__mobile) {
      mix-blend-mode: normal;
    }

    header:has(.header--transparent__mobile):not(.is-edito-visible) {
      & .header__logo svg,
      & .menu__item,
      & .header__action-link--cart-count,
      & .header__actions svg,
      & .header__search-button svg,
      & .header__menu-toggle svg {
        color: var(--color-black);
      }
    }
  }

  header:has(.header--transparent__mobile) .header__logo svg {
    color: var(--color-white);

    @media (min-width: 1024px) {
      color: var(--color-black);
    }
  }

  header:has(.header--transparent__mobile) .menu__item,
  header:has(.header--transparent__mobile) .header__action-link--cart-count {
    color: var(--color-white);

    @media (min-width: 1024px) {
      color: var(--color-black);
    }
  }

  header:has(.header__menu-toggle.is-open) {
    mix-blend-mode: normal;

    & .header-inside {
      background-color: var(--color-white);
    }
  }

  header:has(.header--transparent__mobile) .header__actions svg,
  header:has(.header--transparent__mobile) .header__search-button svg,
  header:has(.header--transparent__mobile) .header__menu-toggle svg {
    color: var(--color-white);

    @media (min-width: 1024px) {
      color: var(--color-black);
    }
  }

  header:has(.header__menu-toggle.is-open) .header__logo svg {
    color: var(--color-black);
  }

  header:has(.header__menu-toggle.is-open) .menu__item {
    color: var(--color-black);
  }

  header:has(.header--transparent) .header__actions svg,
  header:has(.header--transparent) .header__search-button svg,
  header:has(.header--transparent) .header__menu-toggle svg {
    color: var(--color-white);
  }

  header:has(.header__menu-toggle.is-open) .header__actions svg,
  header:has(.header__menu-toggle.is-open) .header__search-button svg,
  header:has(.header__menu-toggle.is-open) .header__menu-toggle svg {
    color: var(--color-black);
  }

  .header__menu-toggle {
    display: grid;
  }

  .header__menu-toggle .icon-cross {
    opacity: 0;
  }

  .header__menu-toggle .icon-cross,
  .header__menu-toggle .icon-menu {
    grid-column: 1/-1;
    grid-row: 1/-1;
    transition: opacity 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99);
  }
  @media screen and (max-width: 1024px) {
    .body--product:has(.header--transparent) {
      & .header-inside a,
      & .header__logo svg,
      & .menu__item,
      & .header__actions svg,
      & .header__search-button svg,
      & .header__menu-toggle svg {
        color: var(--color-black);
      }
    }

    .body--product:has(.header--transparent) .header--reverse {
      & .main-product__image-container:not(.custom-container) img,
      & .main-product__image-container.container-black img,
      & .main-product__image-container:not(.custom-container) video,
      & .main-product__image-container.container-black video {
        background-color: var(--color-white);
      }
      & .header-inside a,
      & .header__logo svg,
      & .menu__item,
      & .header__actions svg,
      & .header__search-button svg,
      & .header__menu-toggle svg {
        color: var(--color-white);
      }
    }
  }
  .header__menu-toggle.is-open .icon-menu {
    opacity: 0;
  }

  .header__menu-toggle.is-open .icon-cross {
    opacity: 1;
  }

  .menu__level-1-container {
    position: relative;
    top: unset;
    background-color: var(--color-white);
    z-index: 10;
  }

  .container-menu-level-1 {
    display: flex;
    justify-content: space-between;
    background-color: var(--color-white);
    align-items: center;
    transform: translateX(6.25rem);
    opacity: 0;
    z-index: 2;
    transition: all 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99) 0.1s;
  }

  .container-menu-level-1 .menu-level-1_label-mobile {
    padding-top: calc(var(--spacing) * 16);
    padding-bottom: calc(var(--spacing) * 8);
  }

  header.is-scroll-down {
    & .header-inside {
      transform: translateY(calc(-100%));
    }
  }

  header.menu-is-open {
    transform: translateY(calc(var(--move-to) * -1));
    transition: transform 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99);
  }

  .header__logo {
    justify-self: center;
    grid-column: 2;
    pointer-events: auto;
  }

  .header__logo svg {
    width: calc(var(--spacing) * 52);
    aspect-ratio: 104 / 32;
    color: var(--color-black);
  }

  .header__controls {
    display: flex;
    align-items: center;
    column-gap: calc(var(--spacing) * 8);
    justify-self: start;
    grid-column: 1;
    pointer-events: auto;
  }

  .header__section--top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    z-index: 11;
    pointer-events: none;
  }

  .header__actions {
    display: flex;
    align-items: center;
    column-gap: calc(var(--spacing) * 8);
    justify-self: end;
    grid-column: 3;
    pointer-events: auto;
  }

  .header__action-link--cart {
    display: grid;

    svg,
    .header__action-link--cart-count {
      grid-column: 1/-1;
      grid-row: 1/-1;
      justify-self: center;
      align-self: center;
    }
  }

  .header__action-link--cart-count {
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: 600;
    user-select: none;
    padding-top: 0.4375rem;
  }

  .header__section--bottom {
    display: block;
    box-sizing: border-box;
    position: absolute;
    top: 4rem;
    overflow-y: scroll;
    left: 0;
    background-color: var(--color-white);
    width: 100%;
    height: calc(100svh - 4rem);
    z-index: 10;
    padding: calc(var(--spacing) * 8);
    padding-bottom: calc(var(--spacing) * 50);
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition:
      padding 0.3s 0.6s cubic-bezier(0.48, -0.01, 0.34, 0.99),
      clip-path 0.9s cubic-bezier(0.48, -0.01, 0.34, 0.99),
      opacity 0.3s 0.6s cubic-bezier(0.48, -0.01, 0.34, 0.99),
      background-color 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99);
    pointer-events: none;
    /*visibility: hidden;*/
  }

  .header__section--bottom.is-open {
    opacity: 1;
    pointer-events: auto;
    /*visibility: visible;*/
    padding-bottom: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transition:
      padding 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99),
      clip-path 0.9s cubic-bezier(0.48, -0.01, 0.34, 0.99),
      opacity 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99);
  }

  .mobile-search-bar {
    position: relative;
    inline-size: 100%;
    cursor: pointer;

    @media (width >=64rem) {
      display: none;
    }

    & svg {
      position: absolute;
      block-size: 3rem;
      inline-size: 1.25rem;
      inset-block-start: 0rem;
      inset-inline-start: 0.75rem;
      pointer-events: none;
    }

    & input {
      display: grid;
      min-block-size: 3rem;
      inline-size: 100%;
      margin-block-end: 1rem;
      padding-inline: 2.75rem 0.75rem;
      column-gap: calc(var(--spacing) * 5);
      font-family: 'Apercu Pro', sans-serif;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5rem;
      letter-spacing: 0.00625rem;
      background-color: transparent;
      border: 0.0625rem solid var(--Gris-Nacre, #e6e5e5);
      border-radius: 0.125rem;
      appearance: none;
      pointer-events: none;
    }
  }

  .menu__level-1-arrow {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .menu__level-1,
  .menu__level-1-arrow,
  slide-push-mobile {
    /*transform: translateX(-100px);*/
    /*opacity: 0;*/
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99);
  }

  .menu__level-1 {
    --title-menu: var(--color-black);
    color: var(--title-menu);
    font-weight: 300;
  }

  .header__section--bottom.is-open .menu__level-1,
  .header__section--bottom.is-open .menu__level-1-arrow,
  .header__section--bottom.is-open slide-push-mobile {
    /*transform: translateX(0);
    opacity: 1;*/
    pointer-events: auto;
  }

  .header__section--bottom:has(.menu__submenu.is-open) {
    overflow: hidden;
  }

  .header__section--bottom:has(.menu__submenu.is-open) .menu__level-1,
  .header__section--bottom:has(.menu__submenu.is-open) .menu__level-1-arrow,
  .header__section--bottom:has(.menu__submenu.is-open) slide-push-mobile {
    transform: translateX(-6.25rem);
    opacity: 0;
    pointer-events: none;
  }

  .menu__item {
    padding: calc(var(--spacing) * 8) 0;
    display: flex;
    align-items: center;
    column-gap: calc(var(--spacing) * 8);
    justify-content: space-between;
    font-family: var(--font-headline);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.125rem;
    letter-spacing: 0;
  }

  .header__menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .menu__item--submenu {
    width: 100%;
    background-color: var(--color-white);
    justify-content: flex-start;
    position: sticky;
    top: 0;
    /*padding-top: calc(var(--spacing) * 16);*/
  }

  .menu__level-1-container .menu__level-1-label--mobile {
    margin: 0;
  }

  .menu__item--submenu.w-fit {
    width: fit-content;
  }

  .menu__item-arrow svg {
    inline-size: var(--icon-chevron-size);
    block-size: var(--icon-chevron-size);
  }

  .menu__submenu {
    position: fixed;
    overflow: scroll;
    /*
     * `visibility: hidden` réactivé. À `opacity: 0` seul, le sous-menu reste
     * peint ET composité : `position: fixed` en fait un calque, et il y en a
     * un par entrée de menu — 4 calques plein écran mesurés sur la home, en
     * permanence, sur toutes les pages. Le coût raster d'un calque est
     * quadratique en échelle (`aire × (DPR × zoom)²`), d'où le crash au
     * pinch-zoom fort sur iPhone.
     *
     * L'état mobile `.is-open` déclare déjà `visibility: visible`. Le desktop
     * ouvre via `.is-submenu-open` et doit donc réaffirmer `visibility:
     * visible` dans son override (sinon le mega-menu reste caché au survol).
     * Le délai de 0,3s sur `visibility` garde le fondu de sortie entier, et
     * `.is-open` le remet à 0s pour que l'ouverture reste immédiate.
     */
    transition:
      all 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99),
      visibility 0s linear 0.3s;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    top: 4.25rem;
    left: 0;
    background-color: var(--color-white);
    width: 100%;
    max-height: calc(100vh - 4rem - 3.125rem);
    height: max-content;
    padding: calc(var(--spacing) * 8);
    display: grid;
    padding: var(--spacings-small-xl, 1rem);

    /*row-gap: calc(var(--spacing) *20 );*/
    padding-top: 0;
    /*overflow-x: hidden;*/
  }

  .menu__submenu-content {
    display: grid;
    row-gap: calc(var(--spacing) * 12);
  }

  .menu__level-1-container {
    display: flex;
    width: 100%;
    align-items: center;
    padding-top: calc(var(--spacing) * 16);
    padding-top: var(--spacings-small-xl);

    justify-content: space-between;
  }

  .menu__submenu.is-open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    /* Ouverture immédiate : pas de délai sur `visibility` (voir ci-dessus). */
    transition:
      all 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99),
      visibility 0s linear 0s;
  }

  .menu__submenu.is-open .list-menu,
  .menu__submenu.is-open .push-menu,
  .header__section--bottom:has(.menu__submenu.is-open)
    .menu__level-1-container {
    transform: translateX(0);
    opacity: 1;
    transition: all 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99) 0s;
  }

  .push-menu__link {
    margin: 0;
    padding-top: var(--spacings-small-l);
    width: fit-content;
    justify-self: center;
  }

  .list-menu {
    display: grid;
    row-gap: calc(var(--spacing) * 12);
    padding-top: calc(var(--spacing) * 8);
  }

  .list-menu__header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .button-primary--link {
      margin: 0;
    }
  }

  .list-menu__items {
    display: grid;
    row-gap: calc(var(--spacing) * 10);
  }

  .list-menu__items--heavy {
    row-gap: 0;
  }

  .list-menu__item {
    color: var(--color-content-secondary);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 300;
    line-height: 1rem;
    letter-spacing: 0;
    display: grid;
    row-gap: calc(var(--spacing));
  }

  .list-menu__item--link-desktop {
    display: none;
  }

  .list-menu__item.font-heavy {
    color: var(--color-black);
    font-family: var(--font-headline);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.125rem;
    letter-spacing: 0;
    padding-block: calc(var(--spacing) * 8);
  }

  .push-menu {
    display: grid;
    gap: var(--spacings-small-xl, 0.5rem);
    padding-top: var(--spacings-small-xl, 1rem);
  }

  .push-menu,
  .list-menu {
    transform: translateX(6.25rem);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99) 0.1s;
  }

  /* `snippets/picture.liquid` enveloppe l'image dans un `<picture>`. Le sortir
     du flux rend l'`img` à nouveau enfant direct du lien : les règles ci-dessous
     et le gabarit du push valent alors exactement ce qu'ils valaient avant la
     bascule vers le snippet. */
  .push-menu__image-link picture {
    display: contents;
  }

  .push-menu__image-link img {
    aspect-ratio: 4 / 3;
    height: 100%;
  }

  .push-menu__content {
    display: grid;
    text-align: center;
    row-gap: calc(var(--spacing) * 4);
    padding: 0 var(--spacings-small-xl, 1rem) var(--spacings-small-xl, 1rem)
      var(--spacings-small-xl, 1rem);
    .push-menu__description {
      word-break: break-word;
    }
  }

  @media screen and (min-width: 1024px) {
    .menu-dekstop-backdrop {
      visibility: hidden;
      opacity: 0;
      position: fixed;
      pointer-events: none;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 5;
      background-color: rgba(0, 0, 0, 0.5);
    }

    .menu__level-1--mobile {
      display: none;
    }

    .menu__level-1--desktop {
      display: grid;
    }

    header:has(.menu__item:hover),
    header:has(.menu__item:focus-within) {
      mix-blend-mode: normal;

      & .header-inside {
        background-color: var(--color-white);
      }
    }

    header.is-scroll-down {
      & .header-inside {
        transform: translateY(calc(-100%));
        transition: 0.15s 0.2s cubic-bezier(0.48, -0.01, 0.34, 0.99);
      }
    }

    header.is-scroll-down:has(.menu__item:hover),
    header.is-scroll-down:has(.menu__item:focus-within) {
      mix-blend-mode: normal;

      & .header-inside {
        transform: translateY(calc(-80%));
      }
    }

    .header-inside:has(.header--transparent) .menu__item:hover,
    .header-inside:has(.header--transparent) .menu__item:focus-within {
      color: var(--color-black);
    }

    .header-inside:has(.menu__item:hover) .header__actions svg,
    .header-inside:has(.menu__item:hover) .header__search-button svg,
    .header-inside:has(.menu__item:hover) .header__logo svg,
    .header-inside:has(.menu__item:focus-within) .header__actions svg,
    .header-inside:has(.menu__item:focus-within) .header__search-button svg,
    .header-inside:has(.menu__item:focus-within) .header__logo svg {
      color: var(--color-black);
    }

    body:has(.menu__item:hover) .menu-dekstop-backdrop,
    body:has(.menu__item:focus-within) .menu-dekstop-backdrop {
      visibility: visible;
      opacity: 1;
      transition: all 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99);
    }

    .menu__level-1-container .menu__level-1-label--mobile {
      display: none;
    }

    .menu__level-1-container {
      position: relative;
      top: unset;
      padding: 0;
    }

    header {
      display: grid;
      pointer-events: none;
      z-index: 6;
      position: sticky;
      top: -3.5rem;

      /*row-gap: calc(var(--spacing) * 12);*/
      transition:
        transform 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99),
        top 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99);
    }

    header:has(.header--grid) {
      position: absolute;
      top: unset;
    }

    header.has-product-visual-threshold:has(.header--grid-mobile) {
      top: 0;
    }

    header.has-product-visual-threshold.is-product-visual-passed:has(
        .header--grid-mobile
      ) {
      top: -3.5rem;
    }

    .header-relative {
      position: relative;
      pointer-events: none;
    }

    .header-inside {
      position: sticky;
      display: grid;
      grid-template: 0.5fr 1fr / 1fr;
      align-items: flex-start;
      top: -3.5rem;
      transition: 0.15s cubic-bezier(0.48, -0.01, 0.34, 0.99);

      height: fit-content;
      padding-block: 0;
      pointer-events: none;
      padding-bottom: calc(var(--spacing) * 0);
      padding-top: calc(var(--spacing) * 12);

      padding-inline: calc(var(--spacing) * 16);
      background-color: var(--color-white);
    }

    .header__menu-toggle {
      display: none;
    }

    .header__section--top {
      grid-row: 1/-1;
      grid-column: 1/-1;
      position: relative;
      align-self: flex-start;
      height: 100%;
      align-items: flex-start;
      z-index: 11;
      pointer-events: none;
      max-width: var(--max-width);
      margin: 0 auto;
      width: 100%;
    }

    .header__controls {
      position: sticky;
      top: calc(1.125rem);
      padding-bottom: 0;
      pointer-events: auto;
    }

    .header__actions {
      position: sticky;
      top: calc(1.125rem);
      pointer-events: auto;
    }

    .menu__level-1,
    .menu__level-1-arrow {
      transform: translateX(0);
      opacity: 1;
      pointer-events: auto;
      transition: all 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99);
    }

    .push-menu,
    .list-menu {
      transform: translateX(0);
      opacity: 1;
      transition: all 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99) 0.1s;
    }

    .header__section--bottom {
      overflow: visible;
      grid-row: 2 / -1;
      grid-column: 1 / -1;
      display: flex;
      box-sizing: border-box;
      position: sticky;
      justify-content: center;
      align-items: center;
      opacity: 1;
      clip-path: unset;
      top: 0;
      left: 0;
      background-color: transparent;
      width: 100%;
      height: auto;
      z-index: 10;
      padding: 0;
      transition: all 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99);
      pointer-events: auto;
      visibility: visible;
      padding-bottom: 0;

      /*padding-bottom: calc(var(--spacing) * 12);*/
    }

    .header__menu-list {
      display: flex;
      align-items: center;
    }

    .menu__item-arrow {
      display: none;
    }

    /* Interrupteur d'animation posé en JS sur t-menu (hover-header.ts) : une
       écriture DOM au lieu de douze, et pas de :has(). Durée clip-path réduite
       de 0.9s à 0.6s. */
    t-menu.is-menu-animated .menu__submenu {
      transition:
        clip-path 0.6s cubic-bezier(0.48, -0.01, 0.34, 0.99),
        opacity 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99);
    }

    @media (prefers-reduced-motion: reduce) {
      t-menu.is-menu-animated .menu__submenu {
        transition: none;
      }
    }

    .menu__submenu {
      position: absolute;
      overflow: visible;
      transition: all 0s cubic-bezier(0.48, -0.01, 0.34, 0.99);
      opacity: 0;
      pointer-events: none;
      /*
       * Doit écraser le `visibility: hidden` du sélecteur de base (fix
       * pinch-zoom iOS). Sans ça, le mega-menu desktop reste invisible au
       * survol : l'ouverture JS pose `.is-submenu-open`, pas `.is-open`.
       * Côté desktop, l'affichage reste piloté par opacity / clip-path / inert.
       */
      visibility: visible;
      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
      top: calc(100%);
      left: -2rem;
      background-color: var(--color-white);
      width: calc(100% + 4rem);
      max-height: auto;
      height: max-content;
      display: grid;
      padding: var(--spacings-medium-l, 2.5rem) var(--spacings-small-m);
    }

    .list-menu__header a {
      display: none;
    }

    .list-menu .links {
      padding-top: calc(var(--spacing) * 4);
    }

    .list-menu__item--link-desktop {
      display: grid;
      margin: 0;
      width: fit-content;
      padding-top: 0.5rem;
    }

    .list-menu__items {
      row-gap: calc(var(--spacing) * 10);
    }

    .list-menu__item.font-heavy {
      padding: 0;
    }

    .menu__item {
      padding: 0;
      cursor: pointer;
      padding-block-start: calc(var(--spacing) * 10);

      padding-block-end: calc(var(--spacing) * 12);
      padding-inline: calc(var(--spacing) * 6);
      transition: all 0s cubic-bezier(0.48, -0.01, 0.34, 0.99);
      font-family: var(--font-body);
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.25rem;
      letter-spacing: 0;
    }

    /* Ouverture pilotée en JS (souris ET clavier) : `inert` rend :hover et
       :focus-within inopérants sur un sous-menu fermé. */
    .menu__item.is-submenu-open .menu__submenu {
      opacity: 1;
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
      pointer-events: auto;
      /*visibility: visible;*/
    }

    .header__section--bottom:has(.menu__item.is-submenu-open)
      .menu__item:not(.is-submenu-open)
      .menu__level-1 {
      opacity: 0.7;
    }

    .menu__item--submenu {
      display: none;
    }

    .menu__submenu-content {
      display: flex;
      justify-content: center;
      column-gap: calc(var(--spacing) * 8);
    }

    .list-menu {
      padding-top: 0;
      padding-right: var(--spacings-small-xl, 1rem);
    }

    .push-menu {
      padding-top: 0;
    }

    .block-push-menu {
      width: 100%;
      max-width: calc(var(--spacing) * 137);
    }

    .block-list-menu {
      max-width: calc(var(--spacing) * 100);
      width: 100%;
    }
  }

  .mobile-menu-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    padding-block-end: 1rem;

    @media (width >=64rem) {
      display: none;
    }

    & svg {
      block-size: 1rem;
      inline-size: 1rem;
    }
  }
}

/* Hide top header loupe icon when mobile menu is opened */
.header-inside [data-btn-toogle-search] {
  transition: 0.2s ease-out;
}

.header-inside:has(.header__section--bottom.is-open) [data-btn-toogle-search] {
  opacity: 0;
  pointer-events: none;
}

header.header--transition {
  mix-blend-mode: normal;

  & .header-inside {
    background-color: var(--color-white);
  }
}

header.header--transition a,
header.header--transition .header__logo svg,
header.header--transition .menu__item,
header.header--transition .header__actions svg,
header.header--transition .header__search-button svg,
header.header--transition .header__menu-toggle svg {
  color: var(--color-black);
}
/* END_SECTION:header */

/* START_SECTION:hero-collection (INDEX:27) */
/* ⚠ Auto-generated from src/sections/hero-collection/hero-collection.css — do not edit directly. */
/* src/sections/hero-collection/hero-collection.css */
@layer components {
  .hero-collection {
    display: grid;
    width: 100%;
    justify-items: center;
    padding-block: calc(var(--spacing) * 16);
    gap: var(--spacings-medium-xs);
    width: 100%;

    @media (width >=48rem) {
      padding-block: calc(var(--spacing) * 20);
    }
  }

  .hero-collection figure {
    width: 100%;
    max-width: 90rem;
  }

  .hero-collection figure img {
    aspect-ratio: 16/9;
  }

  .hero-collection_title {
    font-family: var(--font-headline);
    text-align: center;
    font-size: 2rem;
    line-height: 2.375rem;
    font-weight: 400;
    padding-inline: var(--spacings-medium-xs);
  }

  .hero-collection_description,
  t-tuncat {
    padding-inline: var(--spacings-medium-xs);
    position: relative;
    font-family: var(--font-body);
    text-align: center;
    font-size: 1rem;
    line-height: 1.375rem;
    font-weight: 300;
    display: block;
    max-width: 40.8125rem;
    margin: 0 auto;
  }

  /* Checkbox d'état, hors flux */
  t-tuncat input {
    opacity: 0;
    position: absolute;
    pointer-events: none;
  }

  /*
     * Anti-FOUC : tant que le composant JS n'a pas signalé son initialisation
     * (classe .is-ready), on borne tout le contenu à 2 lignes avec overflow
     * caché — quel que soit le markup interne (texte nu, <p>, <div>) — et on
     * masque le label natif. Sans cela, le texte complet et le bouton natif
     * flashent ~0,5 s avant que le JS ne s'exécute.
     */
  t-tuncat:not(.is-ready) {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  /* Le label natif ne sert qu'à porter les libellés (lus par le JS) : jamais affiché. */
  t-tuncat label {
    display: none;
  }

  t-tuncat p {
    margin: 0 auto;
    max-width: 40.8125rem;
    text-align: center;
  }

  /* Boutons « voir plus » / « voir moins » construits par le JS */
  t-tuncat .inline-toggle-link,
  t-tuncat .hero-collection_description_see-more,
  t-tuncat .hero-collection_description_see-less {
    font-family: var(--font-body);
    font-weight: 300;
    line-height: 1.375rem;
    font-size: 1rem;
    text-decoration: underline;
    color: var(--color-gray);
    cursor: pointer;
    white-space: nowrap;
  }

  /* Conteneurs tronqué / complet (visibilité pilotée en inline par le JS) */
  t-tuncat .truncated-view {
    display: inline;
  }

  t-tuncat .full-view {
    display: block;
  }
}
/* END_SECTION:hero-collection */

/* START_SECTION:main-cart (INDEX:29) */
/* ⚠ Auto-generated from src/sections/main-cart/main-cart.css — do not edit directly. */
/* src/sections/main-cart/main-cart.css */
@layer components {
  /* Cart items (single-column layout) */

  .cart__items-container {
    box-sizing: border-box;
    width: 100%;
    padding: var(--spacings-medium-xl, 3rem) var(--spacings-large-xl-xs, 3.5rem);
    background-color: var(--color-white);
  }

  .cart__items-header {
    margin-bottom: var(--spacings-medium-xl, 3rem);
  }

  .cart__items__title {
    margin-bottom: var(--spacings-small-m, 0.5rem);
  }

  .cart_items__delivery-informations-title {
    color: var(--color-content-secondary);
  }

  .cart_items__header-information {
    color: var(--color-content-secondary);
    margin: var(--spacings-small-xl, 1rem) auto 0;
    max-width: 31.5625rem;
  }

  .cart__items-list {
    display: grid;
    gap: var(--spacings-medium-l, 2.5rem);
    margin-bottom: var(--spacings-large-m, 5rem);
  }

  .cart__item-informations {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacings-small-xl, 1rem);
  }

  .cart__remove {
    width: 1.5rem;
    height: 1.5rem;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cart__remove svg {
    width: 1rem;
    height: 1rem;
  }

  .cart__item-title {
    font-family: var(--font-headline);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1rem;
    letter-spacing: 0;
  }

  .cart__item-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 0.875rem;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .cart__item-weight {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 300;
    line-height: 0.875rem;
    letter-spacing: 0;
  }

  .cart__item-related-products {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 0.875rem;
    text-transform: uppercase;
  }

  .cart__item-free-container {
    background-color: var(--color-blanc-montaigne);
    margin-top: var(--spacings-small-xs, 0.125rem);
    padding: var(--spacings-small-s, 0.25rem);
    width: fit-content;
  }

  .cart__item-free-title {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 0.875rem;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--color-content-secondary);
  }

  .cart__item-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .cart__item-price-title {
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.5rem;
    letter-spacing: 0;

    display: flex;
    align-items: center;
    gap: var(--spacings-small-s, 0.25rem);
  }

  .cart__item-price-title s {
    font-size: 1.125rem;
    line-height: 1.25rem;
    opacity: 0.8;
  }

  @media screen and (min-width: 1024px) {
    .cart__item-title {
      font-size: 1.375rem;
      line-height: 1.625rem;
    }
  }

  .cart__item-container {
    display: flex;
    gap: var(--spacings-medium-xs, 1.25rem);
  }

  .cart__item-image-container {
    width: 11.875rem;
    min-width: 11.875rem;
  }

  .cart__item-content {
    width: 100%;
  }

  .cart__item-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .cart__item-quantity {
    display: flex;
    align-items: center;
    gap: var(--spacings-small-s, 0.25rem);
    user-select: none;
  }

  .cart__item-quantity-button {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 1px solid var(--color-gris-nacre); */
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: all 0.4s ease;
  }

  .cart__item-quantity-button--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
  }

  .cart__item-quantity-button--disabled-bundle {
    display: none;
  }

  /*
    Ligne sans sélecteur — une réservation Booxi : les deux boutons restent dans
    le flux pour garder leurs 2rem, mais invisibles. `display: none` ferait
    glisser la pastille de quantité contre le bord gauche de la rangée, alors
    qu'elle doit s'aligner sur celle des lignes ordinaires.
  */
  .cart__item-quantity-button--hidden {
    visibility: hidden;
  }

  .cart__item-quantity-input {
    pointer-events: none;
    display: flex;
    width: var(--spacings-medium-s, 1.5rem);
    height: 1.5rem;
    padding-top: var(--spacings-small-xs, 0.125rem);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    border-radius: var(--radius-full, 999px);
    background: var(--Background-secondary, #f8f8f8);
    border: 1px solid transparent;
    text-align: center;
  }

  .cart__item-quantity-input:focus {
    outline: none;
    border-color: var(--color-gris-perle);
  }

  /* Supprimer les flèches (spinners) de l'input number */
  .cart__item-quantity-input::-webkit-outer-spin-button,
  .cart__item-quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .cart__item-quantity-input[type='number'] {
    -moz-appearance: textfield;
    /* Firefox */
  }

  .cart__item-quantity-input.error {
    border-color: var(--color-red);
    background-color: rgba(255, 0, 0, 0.05);
  }

  .cart__item-quantity-input.error::placeholder {
    color: var(--color-red);
  }

  .cart__item-quantity-button-icon {
    font-family: var(--font-body);
    font-size: var(--spacings-small-xl, 1rem);
    width: var(--spacings-small-xl, 1rem);
    height: 1rem;
    aspect-ratio: 1/1;
  }

  .cart__item-free-quantity {
    font-family: var(--font-body);
  }
  .section-cart-summary {
    z-index: 3;
    position: relative;
  }
  @media screen and (max-width: 1024px) {
    .cart__items-header {
      margin-bottom: var(--spacings-large-s, 4rem);
    }

    .cart__items__title {
      margin-bottom: var(--spacings-small-s, 0.25rem);
    }

    .cart__items-container {
      padding: var(--spacings-medium-m, 2rem) var(--spacings-medium-xs, 1.25rem);
    }

    .cart__item-image-container {
      width: 6.125rem;
      min-width: 6.125rem;
    }

    .cart__items-list {
      margin-bottom: var(--spacings-large-xs, 3.5rem);
    }

    .cart__item-title {
      margin-bottom: var(--spacings-small-l, 0.75rem);
    }

    .cart__remove {
      width: 1.5rem;
      height: 1.5rem;
    }

    .cart__item-price-title {
      font-size: 0.875rem;
      line-height: 1rem;
    }
  }

  /* ── Desktop: restore the original 2-column cart layout ──────────────
     The cart is now built from separate stacked sections; on desktop we
     reassemble them into the historical grid (items column on the left,
     sticky summary on the right) directly on the cart page wrapper.
     Left column (in DOM order): main-cart, cart-collections-list,
     cart-samples, cart-packaging. Right column: cart-summary. */
  @media screen and (min-width: 1024px) {
    /* Only switch to 2 columns when the cart actually has items
       ([data-cart-items] is only rendered then). Empty cart stays full-width. */
    .body--cart #MainContent:has([data-cart-items]) {
      display: grid;
      grid-template-columns: 63.54% 36.46%;
      grid-template-rows: auto auto auto auto;
      align-items: start;
      column-gap: 0;
      background-color: var(--color-white);
      max-width: var(--page-width);
      margin: auto;
      &:has([data-cart-empty]) {
        display: grid;
        grid-template: auto / auto;

        .section-cart-summary,
        .section-text-gallery-media,
        .section-cart-samples {
          display: none;
        }
      }
    }

    /* Left column = every cart section except the summary.
       min-width:0 is essential: without it the cross-sell carousel's
       min-content width blows the 1fr track out and pushes the summary
       off-screen. */
    .body--cart #MainContent .section-main-cart {
      grid-column: 1 / span 1;
      grid-row: 2 / span 1;
      width: 100%;
    }
    .section-cart-summary {
      height: 100%;
      z-index: 3;

      border-left: 1px solid var(--color-gris-nacre);
      grid-column: 2 / span 1;
      grid-row: 2 / -1;
      width: 100%;
    }
    .body--cart .section-text-gallery-media {
      grid-column: 1 / span 1;
      grid-row: 3 / span 1;
      overflow: hidden;
      max-width: none !important;
      margin: initial !important;
    }
    .body--cart .section-cart-samples {
      grid-column: 1 / span 1;
      grid-row: 4 / span 1;
    }
    .body--cart
      #MainContent:has([data-cart-items])
      > #shopify-section-cart-summary {
      grid-column: 2;
      grid-row: 1 / -1;
      align-self: stretch;
      min-width: 0;
      border-left: 1px solid var(--color-gris-nacre);
    }

    /* Height chain so the inner .cart__total-container can stick across the
       full height of the items column. */
    #shopify-section-cart-summary > div,
    #shopify-section-cart-summary .cart-summary,
    #shopify-section-cart-summary [data-cart-summary] {
      height: 100%;
    }
  }
}
/* END_SECTION:main-cart */

/* START_SECTION:main-collection (INDEX:30) */
/* ⚠ Auto-generated from src/sections/main-collection/main-collection.css — do not edit directly. */
/* src/sections/main-collection/main-collection.css */
@layer components {
  .main-collection {
    min-height: 100vh;
    height: 100%;
  }

  .collection-grid,
  .collection-grid--next {
    list-style: none;
    margin: 0;
    display: grid;
    justify-self: center;
    grid-template: auto / repeat(2, 1fr);
    column-gap: calc(var(--spacing) * 10);
    row-gap: calc(var(--spacing) * 15);
    padding-inline: calc(var(--spacing) * 8);
    padding-block-start: calc(var(--spacing) * 16);

    @media (width >=48rem) {
      padding-block-start: calc(var(--spacing) * 20);
    }
  }

  [data-rerender-more] {
    display: grid;
    justify-content: center;
    justify-items: center;
    row-gap: 1rem;
    padding-top: 2.5rem;
  }

  .collection-grid--next {
    grid-column: 1/ -1;
    visibility: hidden;
    padding-top: 0;
    max-height: 0;
    overflow: hidden;

    @media screen and (min-width: 768px) {
      grid-template: auto / repeat(4, 1fr);
      row-gap: calc(var(--spacing) * 30);
      padding-inline: calc(var(--spacing) * 16);
    }

    &.is-current {
      visibility: hidden;
    }

    &.is-active {
      padding-top: calc(var(--spacing) * 20);
      visibility: visible;
      max-height: max-content;
    }
  }

  @media screen and (min-width: 768px) {
    .collection-grid {
      grid-template: auto / repeat(4, 1fr);
      row-gap: calc(var(--spacing) * 30);
      margin: 0 auto;
      padding-top: calc(var(--spacing) * 20);
      padding-inline: calc(var(--spacing) * 16);
    }
  }

  /* Hiding see more button when no more products are to be shown */
  [data-rerender-more]:has([data-max-pages='1']) button {
    display: none;
  }

  t-collection:not(:has(.collection-grid ~ .collection-grid--next:empty))
    [data-rerender-more]
    button {
    display: none;
  }
}
/* END_SECTION:main-collection */

/* START_SECTION:main-product-v2 (INDEX:31) */
/* ⚠ Auto-generated from src/sections/main-product-v2/main-product-v2.css — do not edit directly. */
/* src/sections/main-product-v2/main-product-v2.css */
@layer components {
  .section-main-product-v2 {
    background-color: #f8f8f8;

    @media screen and (min-width: 1024px) {
      --mp-gallery-slide-size: min(100%, calc((100vh - 7.5rem) * 0.75));

      @supports (height: 100svh) {
        --mp-gallery-slide-size: min(100%, calc((100svh - 7.5rem) * 0.75));
      }
    }

    .main-product__container {
      display: grid;
      padding-block-end: 2.5rem;

      @media screen and (min-width: 1024px) {
        grid-template: auto / 55.97% 44.03%;
        padding-block-end: 0;
        height: 100%;
        /*max-height: calc(100vh - 120px);*/
      }

      .main-product__gallery {
        @media screen and (min-width: 1024px) {
          max-width: 56.04vw;
          width: 100%;
        }
      }

      .main-product__description {
        background-color: #f8f8f8;

        @media screen and (min-width: 1024px) {
          display: grid;
          justify-self: center;
          align-content: center;
          max-width: 39.5625rem;
          width: 100%;
          padding: var(--spacings-large-xs, 3.5rem) var(--spacings-large-l, 7.5rem);
          /*max-height: calc(100vh - 120px);*/
        }
      }

      .product-description__inside {
        display: grid;
        padding: var(--spacings-medium-s, 1.5rem) var(--spacings-small-xl, 1rem) 0;
        text-align: center;

        @media screen and (min-width: 1024px) {
          padding: 0;
        }

        .product-description__title {
          display: grid;
          margin-block-start: 0.3125rem;
        }

        .product-description__ingredients {
          padding-block-start: 1rem;
        }
      }

      .main-product__long-description {
        display: block;
        padding-block-start: 1rem;
      }

      .main-product__long-description input[type='checkbox'] {
        display: none;
      }

      .main-product__long-description label {
        cursor: pointer;
      }

      .main-product__long-description .hero-collection_description_see-less {
        display: none;
      }

      .main-product__long-description.is-expanded
        .hero-collection_description_see-more {
        display: none;
      }

      .main-product__description.is-expanded
        .hero-collection_description_see-less {
        display: inline;
      }
    }
  }
}
/* END_SECTION:main-product-v2 */

/* START_SECTION:main-product (INDEX:32) */
@layer reset, base, components, variants;

  @layer components {
    .engraving-trigger__wrapper {
      position: relative;
      grid-row: 1 / -1;
      grid-column: 1 / -1;
      pointer-events: none;
      height: 100%;
      width: 100%;
      display: grid;
      @media screen and (min-width: 1024px) {
        width: calc(100%);
      }

      .engraving-trigger__wrapper--content {
        height: calc(100vh - 4rem);
        justify-self: end;
        z-index: 20;
      }
      .engraving-trigger {
        pointer-events: auto;
        position: sticky;
        top: calc(100vh - 4rem - 2.4375rem - 1rem);
        margin-block-end: 1rem;
        margin-inline-end: 1rem;
        z-index: 2;
        display: grid;
        padding: var(--spacings-small-m, 0.5rem);

        gap: var(--spacings-small-xs, 0.125rem);
        border-radius: var(--radius-large, 999px);
        background: var(--Background-primary, #fff);
        align-content: center;
        overflow: hidden;
        @media screen and (min-width: 1024px) {
          position: sticky;
          top: calc(100vh - 7.5rem - 2.4375rem - 1rem);
        }
        .engraving-trigger__content {
          --label-size: 1ch;
          display: inline-grid;
          align-items: center;
          grid-template-columns: auto 0ch;
          gap: var(--spacings-small-xs, 0.125rem);
          transition: all 0.3s ease;

          .label {
            white-space: nowrap;
          }
        }

        &:hover {
          .engraving-trigger__content {
            grid-template-columns: auto var(--label-size);
          }
          .label {
            transform: translateX(0);
            opacity: 1;
          }
        }

        .label {
          transform: translateX(100%);
          opacity: 0;
          transition: all 0.3s ease;
        }
      }
    }
    .main-product__images {
      display: grid;
      grid-template: 1fr / 1fr;
      .main-product__slider {
        grid-row: 1 / -1;
        grid-column: 1 / -1;
      }
    }
  }
/* END_SECTION:main-product */

/* START_SECTION:mini-cross-sell (INDEX:34) */
/* ⚠ Auto-generated from src/sections/mini-cross-sell/mini-cross-sell.css — do not edit directly. */
/* src/sections/mini-cross-sell/mini-cross-sell.css */
/*
  Pas d'@import de section-content-media.css ici.

  sections/mini-cross-sell.liquid applique la classe `section-content-media` sur
  son propre élément : le CSS lui vient donc de sections/section-content-media.liquid.
  L'@import recopiait ces 4181 B dans le bloc de styles de cette section — 3401 B
  réellement téléchargés en double sur la PDP.

  Vérifié sur les 23 branches (core, main, 7 boutiques × main/staging) : les deux
  seuls templates qui activent mini-cross-sell — product.json et
  product.pdp-2026.json — activent aussi 4 section-content-media. La section est
  donc toujours dans l'arbre de rendu quand mini-cross-sell l'est, et son CSS
  toujours présent dans styles.css.

  ⚠ Si mini-cross-sell devait un jour apparaître sur un template SANS
  section-content-media, cette dépendance casserait silencieusement (le
  subsetting n'inclurait plus la classe). Voir la doc « Stylesheet content
  subsetting » — cross-file CSS dependency.

  ⚠ Le contrat n'est pas seulement « la classe » : depuis #468, section-content-media.css
  dimensionne le média avec `aspect-ratio: var(--media-ratio-mobile / --media-ratio-desktop)`.
  Ces deux propriétés sont posées par instance dans l'attribut style du wrapper. La section
  mini-cross-sell doit donc les émettre elle aussi, sinon la var est invalide, l'aspect-ratio
  retombe sur `auto` et l'image s'écrase à 150 px de haut (hauteur par défaut d'un élément
  remplacé). Toute nouvelle propriété par instance ajoutée là-bas est à répercuter ici.
*/

@layer reset, base, components, variants, settings;

@layer components {
  c-mini-cross-sell {
    display: block;
  }
}

@layer variants {
  c-mini-cross-sell.section-content-media.v-no-media {
    display: flex;
    justify-content: center;
    align-items: stretch;

    .media-container {
      display: none;
    }

    .block-content-container.content-container {
      aspect-ratio: 4 / 5;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      align-content: center;
    }

    @media screen and (min-width: 1024px) {
      .block-content-container.content-container {
        max-width: 50%;
      }
    }
  }
}
/* END_SECTION:mini-cross-sell */

/* START_SECTION:newsletter-popin (INDEX:35) */
/* ⚠ Auto-generated from src/sections/newsletter-popin/newsletter-popin.css — do not edit directly. */
/* src/sections/newsletter-popin/newsletter-popin.css */
@layer components {
  .shopify-section--newsletter-popin {
    display: flex;
    position: fixed;
    align-items: flex-end;
    justify-content: center;
    block-size: 100%;
    inline-size: 100%;
    inset-block-start: 0rem;
    inset-inline-start: 0rem;
    background-color: color-mix(in srgb, var(--color-black) 30%, transparent);
    visibility: hidden;
    opacity: 0;
    cursor: pointer;
    transition: 0.15s ease-out;
    z-index: 1000;
    pointer-events: none;

    text-align: center;

    @media (width >=48rem) {
      align-items: center;
    }

    &:has([data-open]) {
      visibility: visible;
      opacity: 1;
      pointer-events: initial;
    }

    & .popin-content {
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      justify-content: center;
      margin-bottom: calc(var(--spacing-medium-m) - var(--spacing-medium-s));

      @media (width >=48rem) {
        padding: 0 calc(var(--spacing-medium-l) - var(--spacing-medium-s));
      }

      & .popin-content__title {
        margin-bottom: var(--spacing-small-m);
      }

      & .popin-content__text {
        margin: var(--spacing-small-m) 0;
      }
    }

    & .popin-container {
      display: flex;
      position: relative;
      flex-flow: column nowrap;
      align-items: center;
      justify-content: center;
      gap: 0rem;
      max-block-size: calc(100svh - 8rem);
      inline-size: 100%;
      margin: 0;
      padding: var(--spacing-small-xl);
      padding-block-start: 1.25rem;
      background-color: var(--color-white);
      border-block-start: 0.0625rem solid var(--color-gris-nacre);
      cursor: auto;

      @media (width >=48rem) {
        padding: var(--spacing-medium-s);
        max-inline-size: 31rem;
        border: 0.0625rem solid var(--color-gris-nacre);
      }
    }

    & .popin-close {
      position: relative;
      margin-block-end: var(--spacing-medium-s);
      margin-inline-start: auto;
      cursor: pointer;

      &::after {
        content: '';
        position: absolute;
        inline-size: calc(100% + 1rem);
        block-size: calc(100% + 1rem);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      & svg {
        inline-size: 1.5rem;
        block-size: 1.5rem;
        fill: var(--color-black);
        cursor: pointer;
      }
    }

    & .body-m-light {
      margin-block-start: 0.625rem;
      color: var(--color-content-secondary);
      text-align: center;
    }

    & .input-container {
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      justify-content: center;
      gap: 0.375rem;
      width: 100%;
      margin-block-start: 1.5rem;
      color: var(--color-content-secondary);
    }

    & input {
      inline-size: 100%;
      text-align: center;

      &[type='checkbox'] {
        inline-size: auto;
        display: inline-block;
      }
    }

    & .form-error {
      display: flex;
      position: relative;
      align-items: center;
      justify-content: center;
      gap: 0.375rem;
      margin-block-start: 0.125rem;
      color: var(--color-red);

      &[aria-hidden='true'] {
        display: none;
      }

      & svg {
        block-size: 0.75rem;
        inline-size: 0.75rem;
      }
    }

    & label {
      color: inherit;
      text-wrap: pretty;

      & a {
        text-decoration: underline;
      }
    }

    & .confidentiality-checkbox {
      display: flex;
      position: relative;
      align-items: center;
      color: var(--color-content-primary);

      &[aria-invalid='true'] {
        color: var(--color-red);
      }
    }

    & .button {
      margin-block-start: 1.5rem;
    }
  }

  /* Hiding chat bubble when newsletter popin is open */
  html:has(.shopify-section--newsletter-popin > [data-open])
    div[style]:has(iframe#launcher) {
    opacity: 0;
    pointer-events: none;
  }
}
/* END_SECTION:newsletter-popin */

/* START_SECTION:newsletter (INDEX:36) */
/* ⚠ Auto-generated from src/sections/newsletter/newsletter.css — do not edit directly. */
/* src/sections/newsletter/newsletter.css */
@layer reset, base, components, variants ,settings;
@layer components {
  .newsletter-help {
    display: grid;
    background-color: var(--color-white);
    /*row-gap: calc(var(--spacing) * 20);*/
    justify-items: center;
    margin: 0 auto;

    border-top: 1px solid var(--State-Disable, #c8c8c8);

    .newsletter-help__inside {
      display: grid;
      padding: 0 var(--spacing-small-xl);
      row-gap: calc(var(--spacing) * 20);
      justify-items: center;
      margin: 0 auto;
      width: 100%;
      grid-column: 1/-1;
      grid-row: 1 /-1;

      @media screen and (min-width: 768px) {
        grid-template: 1fr / 1fr 1fr;
        padding: 0 0;
      }
    }

    .bg-newsletter {
      display: none;

      @media screen and (min-width: 768px) {
        display: grid;

        width: 100%;
        height: 100%;
        grid-column: 1 / -1;
        grid-row: 1 / span 1;
      }
    }

    .bg-help {
      display: none;

      @media screen and (min-width: 768px) {
        display: grid;
        background-color: var(--color-white-100);
        width: 100%;
        height: 100%;
        grid-column: 2 / span 1;
        grid-row: 1 /-1;
      }
    }
  }

  .newsletter-help_border {
    width: 100%;
    height: calc(var(--spacing) * 4);
  }

  .newsletter {
    text-align: center;
    display: grid;
    padding: var(--spacing-medium-l) var(--spacing-small-xl) 0
      var(--spacing-small-xl);
    /*row-gap: calc(var(--spacing) * 15);*/
  }

  .newsletter_content {
    display: grid;
    row-gap: calc(var(--spacing-small-m) * 2);
  }

  .newsletter_description {
    margin-bottom: var(--spacing-small-m);
  }

  .help {
    display: grid;
    align-content: center;
    width: 100%;
    text-align: center;
    background-color: var(--color-white-100);

    padding: var(--spacings-medium-l, 2.5rem) var(--spacing-small-xl, 1rem);
    row-gap: calc(var(--spacing) * 10);

    .container-btn {
      padding-block-start: 1.25rem;
    }
  }

  .help_title {
    display: grid;
    row-gap: 1rem;
  }

  .help_infos {
    display: grid;
  }

  .help_link {
    color: #000;
    font-family: var(--font-headline);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: underline;
    text-underline-offset: calc(var(--spacing) * 3);
    transition: 0.3s ease;

    &:hover {
      text-underline-offset: calc(var(--spacing) * 2);
    }
  }

  @media screen and (min-width: 768px) {
    .newsletter-help {
      padding: 0 0;
      border-top: 1px solid var(--State-Disable, #c8c8c8);
      grid-template: 1fr / 1fr 1fr;
    }

    .newsletter-help_border {
      display: none;
    }

    .newsletter,
    .help {
      padding: var(--spacing-large-xs) var(--spacing-large-l);
    }

    .newsletter_content,
    .newsletter_form {
      max-width: 30rem;
    }

    .help_title,
    .container-btn,
    .help_infos {
      max-width: 30rem;
    }

    .newsletter {
      width: 100%;
      justify-content: center;
      border-right: 1px solid var(--State-Disable, #c8c8c8);
    }

    .help {
      width: 100%;
      background-color: transparent;
      justify-content: center;
      align-items: center;
    }
  }
}
/* END_SECTION:newsletter */

/* START_SECTION:popup-add-to-cart (INDEX:38) */
/* ⚠ Auto-generated from src/sections/popup-add-to-cart/popup-add-to-cart.css — do not edit directly. */
/* src/sections/popup-add-to-cart/popup-add-to-cart.css */
@layer components {
  .popup-atc {
    position: fixed;
    z-index: 30;
    top: calc(var(--header-block-size) + var(--header-overhead-offset, 0rem));
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    background: transparent;
    overflow: hidden;
    border: none;
    box-sizing: border-box;
    transition:
      opacity 0.3s ease-in-out,
      visibility 0.3s ease-in-out;

    --header-block-size: 4.25rem;

    @media (width >=64rem) {
      --header-block-size: 4rem;
    }
  }

  /* Closed = no [open] → UA display:none. Do not force display:block in HTML. */
  .popup-atc[open] {
    display: block;
  }

  .popup-atc.active {
    opacity: 1;
    visibility: visible;
  }

  .popup-atc::backdrop {
    background: transparent;
  }

  .popup-atc__background {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    z-index: 30;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
  }

  .popup-atc.active .popup-atc__background {
    visibility: visible;
    opacity: 1;
  }

  .popup-atc__container {
    position: absolute;
    opacity: 0;
    z-index: 31;
    top: 0;
    right: 0;
    width: 23.4375rem;
    max-width: 100%;
    height: auto;
    background-color: var(--color-white);
    transform: translateX(100%);
    transition:
      opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
      transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
      right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: 0.1s;
  }

  .popup-atc.active .popup-atc__container {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0s;
  }

  .popup-atc__content {
    position: relative;
    width: 100%;
    height: 100%;
    /*padding: 0 var(--spacings-medium-s, 25px) var(--spacings-medium-xs, 20px);*/
  }

  .popup-atc__content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.75rem;
  }

  .popup-atc__title {
    padding: calc(var(--spacing) * 5) 0;
    display: flex;
    align-items: center;
    gap: 0.3125rem;
  }

  .popup-atc__title-icon {
    width: 0.75rem;
    height: 0.75rem;
    min-width: 0.75rem;
    min-height: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-black);
    border-radius: 50%;
  }

  .popup-atc__title-icon path {
    stroke: var(--color-white);
  }

  .popup-atc__content-header-close {
    cursor: pointer;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: -0.5rem;
  }

  .popup-atc__body {
    display: flex;
    align-items: stretch;
    gap: var(--spacings-medium-xs, 1.25rem);
  }

  .popup-atc__body-image {
    width: 6.125rem;
    aspect-ratio: 3/4;
    line-height: 0;
  }

  .popup-atc__body-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .popup-atc__body-description {
    display: flex;
    flex: 1;
    justify-content: space-between;
    flex-direction: column;
    gap: var(--spacings-small-s, 0.25rem);
  }

  .popup-atc__body-description-text {
    font-size: 0.875rem;
    line-height: 1.125rem;
    font-weight: 400;

    display: flex;
    flex-direction: column;
    gap: var(--spacings-small-xs, 0.125rem);
  }

  .popup-atc__body-description-contenance {
    font-family: var(--font-body);
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 300;
  }

  .popup-atc__body-price-text {
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.125rem;
    font-weight: 500;
  }

  .popup-atc__content-footer {
    padding: 0 0.75rem;
  }

  .popup-atc__content-footer .button {
    font-family: var(--font-body);
    text-transform: uppercase;
    font-size: 0.875rem;
    line-height: 1.125rem;
    font-weight: 400;
    margin-top: 1.25rem;
  }

  .popup-atc__content-footer .button svg {
    display: none;
  }
  .popup-atc__content-footer-delivery-informations {
    padding-block-end: var(--spacings-small-l, 0.75rem);
  }
  .popup-atc__content-footer-delivery-informations-message {
    display: flex;
    padding: var(--spacings-small-l, 0.75rem) var(--spacings-small-l, 0.75rem) 0
      0;
    align-items: center;
    gap: 0.5rem;
    align-self: stretch;
    justify-content: center;
    img {
      width: 1.25rem;
      height: 1.25rem;
    }
  }

  @media screen and (max-width: 768px) {
    .popup-atc {
      top: 0;
    }

    .popup-atc__container {
      top: auto;
      bottom: 0;
      width: 100%;
      transform: translateY(100%);
      transition:
        opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .popup-atc.active .popup-atc__container {
      transform: translateY(0);
    }
  }

  /* Prevent from hiding the header when popup is open */
  header:has(
      ~ .shopify-section--popup-add-to-cart [data-popup-atc].active[open]
    )
    .header-inside {
    transform: initial;
  }
}
/* END_SECTION:popup-add-to-cart */

/* START_SECTION:product-information (INDEX:40) */
/* ⚠ Auto-generated from src/sections/product-information/product-information.css — do not edit directly. */
/* src/sections/product-information/product-information.css */
@layer reset, base, components, variants, settings;

@layer components {
  .product-information {
    --section-max-width: 120rem;
    max-width: var(--section-max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    @media screen and (max-width: 1024px) {
      padding: var(--spacings-medium-l) var(--spacings-small-xl);
      gap: var(--spacings-medium-l);
    }
    @media screen and (max-width: 768px) {
      flex-wrap: wrap;
    }

    .product-information__title {
      @media screen and (max-width: 768px) {
        text-align: center;
      }
    }

    .product-information--left,
    .product-information--right {
      width: 50%;
      padding: var(--spacings-large-l);

      @media screen and (max-width: 1024px) {
        width: 100%;
        padding: 0;
      }
    }

    .product-information__item {
      &:not(:last-child) {
        border-bottom: var(--border-width-extra-small, 1px) solid
          var(--State-Disable, #c8c8c8);
      }
    }

    .product-information__item-button {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--spacings-medium-xs) var(--spacings-small-l);
      gap: var(--spacings-small-xl);
      background: none;
      border: none;
      font: inherit;
      color: inherit;
      cursor: pointer;
    }
  }
  .reinsurances-custom__sidebar-item {
    margin-bottom: var(--spacings-medium-s);
  }
}
/* END_SECTION:product-information */

/* START_SECTION:reassurance (INDEX:42) */
/* ⚠ Auto-generated from src/sections/reassurance/reassurence.css — do not edit directly. */
/* src/sections/reassurance/reassurence.css */
@layer reset, base, components, variants;

@layer components {
  .reassurance {
    display: grid;

    margin: 0 auto;
    background-color: var(--color-white);
    padding: var(--spacing-large-xs) var(--spacing-small-xl);
    row-gap: calc(var(--spacing) * 15);
    justify-items: center;

    border-top: 1px solid var(--State-Disable, #c8c8c8);
  }
  .reassurance__container {
    overflow: scroll;
    width: calc(100% + 2.5rem);
    margin-inline: -1.25rem;
    display: grid;
  }
  .reassurance__list {
    justify-self: center;
    display: flex;
    width: max-content;
    align-items: flex-start;
    column-gap: calc(var(--spacing) * 4);
    padding-inline: 1.25rem;
    scroll-padding-inline: 1.25rem;
  }
  .reassurance-item {
    width: 25.6vw;
    text-align: center;
    display: grid;
    row-gap: calc(var(--spacing) * 2);
    align-items: flex-start;
  }
  .reassurance-item__figure img {
    height: 5.125rem;
    aspect-ratio: 66/82;
    padding: 0 calc(var(--spacing) * 5);
    object-fit: contain;
  }
  @media screen and (min-width: 768px) {
    .reassurance {
      padding: var(--spacing-large-xs) var(--spacing-medium-l);
      row-gap: 1.5rem;
    }
    .reassurance__border {
      padding-bottom: 2rem;
    }
    .reassurance__container {
      justify-self: center;
      width: fit-content;
    }
    .reassurance__list {
      column-gap: 1.5rem;
    }
    .reassurance-item {
      width: 8.125rem;
      text-align: center;
      row-gap: 0.625rem;
      padding: 0rem;
    }
    .reassurance-item__figure img {
      height: 7.8125rem;
      width: 6.25rem;
      aspect-ratio: 100/125;
      object-fit: contain;
      padding: 0rem;
    }
  }
}
/* END_SECTION:reassurance */

/* START_SECTION:section-content-media (INDEX:43) */
/* ⚠ Auto-generated from src/sections/section-content-media/section-content-media.css — do not edit directly. */
/* src/sections/section-content-media/section-content-media.css */
@layer reset, base, components, variants, settings;

@layer settings {
  /*
    Réservation de la boîte média AVANT le premier paint.
    Les ratios sont les seules valeurs par instance : ils arrivent en custom
    properties dans l'attribut style du wrapper, parsé avec l'élément.
    La règle, elle, est identique partout et vit donc ici — donc dans
    styles.css, bloquant dans le head — et non plus dans la balise style
    inline de la section, émise jusqu'à 128 Ko après le markup qu'elle
    dimensionne.
    Indispensable pour les video : video_tag n'émet pas width/height et le
    thème force preload:none, donc le navigateur n'a AUCUNE dimension
    intrinsèque et retombe sur 300x150.
  */
  .section-content-media video,
  .section-content-media picture img {
    aspect-ratio: var(--media-ratio-mobile);
    @media screen and (min-width: 1024px) {
      aspect-ratio: var(--media-ratio-desktop);
    }
  }
}

@layer components {
  .section-content-media {
    display: grid;
  }
  .section-content-media.mini-cross-sell {
    display: block;
    @media screen and (min-width: 1024px) {
      display: flex;
    }
  }
}

@layer variants {
  .section-content-media.v-container-padded-desktop {
    @media screen and (min-width: 1024px) {
      padding-inline: 7.5rem;
    }

    .block-content-container.content-container {
      @media screen and (min-width: 1024px) {
        padding-inline: 5rem;
      }
    }
  }

  .section-content-media.v-container-padded-mobile {
    padding-inline: 2rem;

    &:not(.v-container-padded-desktop) {
      @media screen and (min-width: 1024px) {
        padding-inline: none;
      }
    }

    &.v-container-padded-desktop {
      @media screen and (min-width: 1024px) {
        padding-inline: 7.5rem;
      }
    }
  }

  .section-content-media.v-disposition-media-mobile--top {
    grid-template: auto auto / auto;

    .media-container {
      order: 1;
    }

    .block-content-container.content-container {
      order: 2;
      --padding-block-start: var(--spacings-medium-l, 2.5rem);

      @media screen and (min-width: 1024px) {
        --padding-block-start: 0;
      }
    }
  }

  .section-content-media.v-disposition-media-mobile--bottom {
    grid-template: auto auto / auto;

    .media-container {
      order: 2;
    }

    .block-content-container.content-container {
      order: 1;
    }
  }

  .section-content-media.v-disposition-media-desktop--bottom,
  .section-content-media.v-disposition-media-desktop--top {
    @media screen and (min-width: 1024px) {
      grid-template: auto auto / auto;
    }

    .block-content-container.content-container .inside {
      @media screen and (min-width: 1024px) {
        max-width: 40.8125rem;
      }
    }
  }

  .section-content-media.v-disposition-media-desktop--right,
  .section-content-media.v-disposition-media-desktop--left {
    @media screen and (min-width: 1024px) {
      grid-template: auto / auto auto;
    }

    &.v-media-ratio-desktop-56,
    &.v-media-ratio-desktop-45 {
      @media screen and (min-width: 1024px) {
        display: flex;
        flex-direction: row;
      }

      .media-container {
        @media screen and (min-width: 1024px) {
          max-width: 50%;
          min-width: 36.11%;
          width: 100%;
        }
      }

      .block-content-container.content-container {
        @media screen and (min-width: 1024px) {
          max-width: 50%;
          min-width: 36.11%;
          width: 100%;
        }
      }
    }

    &.v-media-ratio-desktop-43,
    &.v-media-ratio-desktop-11,
    &.v-media-ratio-desktop-169 {
      @media screen and (min-width: 1024px) {
        display: flex;
        flex-direction: row;
      }

      .media-container {
        @media screen and (min-width: 1024px) {
          max-width: 53.47%;
          min-width: 37.85%;
          width: 100%;
        }
      }

      .block-content-container.content-container {
        @media screen and (min-width: 1024px) {
          max-width: 46.53%;
          min-width: 33.26%;
          width: 100%;
        }
      }
    }

    .block-content-container.content-container {
      @media screen and (min-width: 1024px) {
        padding-block: 0 !important;
      }

      .inside {
        @media screen and (min-width: 1024px) {
          max-width: 26.875rem;
        }
      }
    }
  }

  .section-content-media.v-disposition-media-desktop--left,
  .section-content-media.v-disposition-media-desktop--top {
    .media-container {
      @media screen and (min-width: 1024px) {
        order: 1;
      }
    }

    .block-content-container.content-container {
      @media screen and (min-width: 1024px) {
        order: 2;
      }
    }
  }

  .section-content-media.v-disposition-media-desktop--right,
  .section-content-media.v-disposition-media-desktop--bottom {
    .media-container {
      @media screen and (min-width: 1024px) {
        order: 2;
      }
    }

    .block-content-container.content-container {
      @media screen and (min-width: 1024px) {
        order: 1;
      }
    }
  }
}
/* END_SECTION:section-content-media */

/* START_SECTION:section-coupon (INDEX:44) */
/* ⚠ Auto-generated from src/sections/section-coupon/section-coupon.css — do not edit directly. */
/* src/sections/section-coupon/section-coupon.css */
@layer reset, base, components, variants, settings;

@layer components {
  .section-coupon {
    display: grid;
    margin-inline: auto;
    max-width: 65.8125rem;
    width: fit-content;

    @media screen and (min-width: 1024px) {
      justify-content: center;
    }
  }
}

@layer variants {
  /* Un conteneur blanc sur une page blanche serait invisible : il lui faut un
     filet. Le drapeau `i` n'est pas cosmétique : l'éditeur sérialise la couleur
     telle qu'elle a été posée, et les templates portent déjà 35 `#F8F8F8` en
     majuscules contre 5 en minuscules. Sans lui, un blanc réglé en `#FFFFFF`
     perd sa bordure sans aucun signe. */
  .section-coupon:has(
    .content-container[style*='--background-color: #ffffff' i]
  ) {
    border: 1px solid var(--State-Disable, #c8c8c8);
  }

  .section-coupon.v-container-padded-desktop {
    @media screen and (min-width: 1024px) {
      padding-inline: 7.5rem;
    }

    .content-container {
      @media screen and (min-width: 1024px) {
        padding-inline: 5rem;
      }
    }
  }

  .section-coupon.v-container-padded-mobile {
    padding-inline: 2rem;

    &:not(.v-container-padded-desktop) {
      @media screen and (min-width: 1024px) {
        padding-inline: none;
      }
    }

    &.v-container-padded-desktop {
      @media screen and (min-width: 1024px) {
        padding-inline: 7.5rem;
      }
    }
  }

  .section-coupon.v-disposition-media-mobile--top {
    grid-template: auto auto / auto;

    .media-container {
      order: 1;
    }

    .content-container {
      order: 2;
      --padding-block-start: var(--spacings-medium-l, 2.5rem);

      @media screen and (min-width: 1024px) {
        --padding-block-start: 0;
      }
    }
  }

  .section-coupon.v-disposition-media-mobile--bottom {
    grid-template: auto auto / auto;

    .media-container {
      order: 2;
    }

    .content-container {
      order: 1;
    }
  }

  .section-coupon.v-disposition-media-desktop--right,
  .section-coupon.v-disposition-media-desktop--left {
    @media screen and (min-width: 1024px) {
      grid-template: auto / auto auto;
    }

    &.v-media-ratio-desktop-56,
    &.v-media-ratio-desktop-45 {
      @media screen and (min-width: 1024px) {
        display: flex;
        flex-direction: row;
      }

      .media-container {
        @media screen and (min-width: 1024px) {
          min-width: 24.5rem;
          max-width: 40.8125rem;
          width: 100%;
        }
      }

      .content-container {
        @media screen and (min-width: 1024px) {
          max-width: 50%;
          min-width: 36.11%;
          width: 100%;
        }
      }
    }

    &.v-media-ratio-desktop-43,
    &.v-media-ratio-desktop-11,
    &.v-media-ratio-desktop-169 {
      @media screen and (min-width: 1024px) {
        display: flex;
        flex-direction: row;
      }

      .media-container {
        @media screen and (min-width: 1024px) {
          max-width: 25rem;
          min-width: 25rem;
          width: 100%;
        }
      }

      .content-container {
        @media screen and (min-width: 1024px) {
          min-width: 24.5rem;
          max-width: 40.8125rem;
          width: 100%;
        }
      }
    }

    .content-container {
      @media screen and (min-width: 1024px) {
        padding-block: 1.9375rem !important;
        padding-inline: 5rem;
      }

      .inside {
        @media screen and (min-width: 1024px) {
          max-width: 30.8125rem;
        }
      }
    }
  }

  .section-coupon.v-disposition-media-desktop--left,
  .section-coupon.v-disposition-media-desktop--top {
    .media-container {
      @media screen and (min-width: 1024px) {
        order: 1;
      }
    }

    .content-container {
      @media screen and (min-width: 1024px) {
        order: 2;
      }
    }
  }

  .section-coupon.v-disposition-media-desktop--right,
  .section-coupon.v-disposition-media-desktop--bottom {
    .media-container {
      @media screen and (min-width: 1024px) {
        order: 2;
      }
    }

    .content-container {
      @media screen and (min-width: 1024px) {
        order: 1;
      }
    }
  }
}
/* END_SECTION:section-coupon */

/* START_SECTION:section-faq (INDEX:45) */
@layer reset, base, components, variants ,settings;
  @layer components {
    .section-faq {
      display: flex;
      padding-inline: var(--spacings-medium-m, 2rem);
      flex-direction: column;
      align-items: center;
      gap: var(--spacings-medium-m, 2rem);
      @media screen and (min-width: 1024px) {
        padding-inline: var(--spacings-large-xl, 10rem);
        gap: var(--spacings-medium-l, 2.5rem);
      }
    }
    .section-faq--header {
      text-align: center;
      display: grid;
      max-width: 40.8125rem;
    }
    .section-faq--content {
      display: grid;
      max-width: 40.8125rem;
    }
    .faq--item {
      border-bottom: var(--border-width-extra-small, 1px) solid var(--State-Disable, #c8c8c8);
      padding: var(--spacings-medium-xs, 1.25rem) 0;
    }
    .faq--item--header {
      padding-inline-start: 0.75rem;
      display: grid;
      grid-template-columns: auto 1.5rem;
      gap: 1rem;
      align-items: center;
      width: 100%;
      background: none;
      border: none;
      cursor: pointer;
      text-align: left;
    }
    .faq--item--header--arrow {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease;

      svg {
        width: var(--icon-chevron-size);
        height: var(--icon-chevron-size);
      }
    }
    .faq--item--header[aria-expanded='true'] .faq--item--header--arrow {
      transform: rotate(180deg);
    }
    .faq--item--header[aria-expanded='true'] ~ .faq--item--content {
      padding-block-start: 1rem;
    }
    .faq--item--content {
      display: grid;
      padding-inline-start: 0.75rem;

      grid-template-columns: auto 1.5rem;
      gap: 1rem;
      overflow: hidden;
      height: 0;
      transition:
        height 0.35s ease,
        padding-block-start 0.35s ease;

      .faq--item--content--inner {
        p,
        li {
          margin-block: 1rem;

          &:first-child {
            margin-block-start: 0;
          }

          &:last-child {
            margin-block-end: 0;
          }
        }
        ul,
        li {
          list-style: disc;
          /* padding-bottom: var(--spacings-small-xl, 16px); */
        }
        li {
          margin-inline-start: 1rem;
        }

        a {
          text-decoration: underline;
        }
      }
    }
  }
/* END_SECTION:section-faq */

/* START_SECTION:section-in-page-nav (INDEX:46) */
/* ⚠ Auto-generated from src/sections/section-in-page-nav/section-in-page-nav.css — do not edit directly. */
/* src/sections/section-in-page-nav/section-in-page-nav.css */
@layer components {
  .section-in-page-nav {
    position: relative;

    .section-in-page-nav__items {
      display: flex;
      flex-direction: row;
      justify-content: center;
      flex-wrap: nowrap;
      align-items: center;
      overflow-x: auto;
      gap: var(--spacings-medium-s);
      padding: var(--spacings-small-l) var(--spacings-medium-s);
      border-bottom: 1px solid var(--State-Disable, #c8c8c8);
      background: var(--Background-primary, #fff);
      position: sticky;
      top: 4rem;
      left: 0;
      right: 0;
      z-index: 5;
      transition: top 0.3s cubic-bezier(0.48, -0.01, 0.34, 0.99);

      body:has(header.is-scroll-down) & {
        top: 0;
      }

      @media screen and (max-width: 768px) {
        padding: var(--spacings-small-l) var(--spacings-small-xl);
      }

      .section-in-page-nav__item {
        white-space: nowrap;
      }
    }

    [data-internal-name] {
      scroll-margin-top: 8rem;

      body:has(header.is-scroll-down) & {
        scroll-margin-top: 4rem;
      }
    }
  }
}
/* END_SECTION:section-in-page-nav */

/* START_SECTION:section-text-gallery-media (INDEX:48) */
/* ⚠ Auto-generated from src/sections/section-text-gallery-media/section-text-gallery-media.css — do not edit directly. */
/* src/sections/section-text-gallery-media/section-text-gallery-media.css */
@layer reset, base, components, variants, settings;

@layer settings {
  /*
    Réservation de la boîte média AVANT le premier paint — voir le commentaire
    équivalent dans section-content-media.css. Ici la balise style inline de la
    section était émise jusqu'à 4,16 Mo après son propre markup (112 cartes
    produit entre les deux).
  */
  .section-collection-list c-media-container.media-container video,
  .section-collection-list c-media-container.media-container picture img {
    aspect-ratio: var(--media-ratio-mobile);
    @media screen and (min-width: 1024px) {
      aspect-ratio: var(--media-ratio-desktop);
    }
  }
}

@layer components {
  c-section-text-gallery-media {
    display: grid;
    align-items: flex-start;

    & > .content-container {
      padding: 2.5rem 1rem 2rem;
      margin: 0 auto;

      .inside {
        max-width: 40.8125rem;
      }
    }
  }
}

@layer variants {
  c-section-text-gallery-media.v-container-padded-desktop {
    @media screen and (min-width: 1024px) {
      padding-inline: 7.5rem;
    }

    & > .content-container {
      @media screen and (min-width: 1024px) {
        padding-inline: 5rem;
      }
    }
  }

  c-section-text-gallery-media.v-container-padded-mobile {
    padding-inline: 2rem;

    &:not(.v-container-padded-desktop) {
      @media screen and (min-width: 1024px) {
        padding-inline: 0;
      }
    }

    &.v-container-padded-desktop {
      @media screen and (min-width: 1024px) {
        padding-inline: 7.5rem;
      }
    }
  }

  c-section-text-gallery-media.v-disposition-media-mobile--top {
    & > .media-container {
      order: 1;
    }

    & > .content-container {
      order: 2;
    }

    & > c-gallery-container,
    & > .gallery-container {
      order: 3;
    }
  }

  c-section-text-gallery-media.v-disposition-media-mobile--bottom {
    & > .media-container {
      order: 3;
    }

    & > .content-container {
      order: 1;
    }

    & > c-gallery-container,
    & > .gallery-container {
      order: 2;
    }
  }

  c-section-text-gallery-media.v-disposition-media-desktop--left {
    @media screen and (min-width: 1024px) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      column-gap: 2.5rem;
    }

    & > .media-container {
      @media screen and (min-width: 1024px) {
        grid-column: 1/2;
        grid-row: 1/-1;
        align-self: center;
      }
    }

    & > .content-container {
      @media screen and (min-width: 1024px) {
        padding: 0 var(--spacings-medium-xl, 3rem) 2.5rem;
        align-self: flex-end;
      }
    }

    c-gallery-container.v-slider {
      .embla {
        --slide-spacing: 1rem;
        --slide-size-desktop: 40%;
      }
    }
  }

  c-section-text-gallery-media.v-disposition-media-desktop--right {
    @media screen and (min-width: 1024px) {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      column-gap: 2.5rem;
    }

    & > .media-container {
      @media screen and (min-width: 1024px) {
        grid-column: 2/3;
        grid-row: 1/-1;
        align-self: center;
      }
    }

    & > .content-container {
      @media screen and (min-width: 1024px) {
        padding: 0 var(--spacings-medium-xl, 3rem) 2.5rem;
        align-self: flex-end;
      }
    }

    c-gallery-container.v-slider {
      .embla {
        --slide-spacing: 1rem;
        --slide-size-desktop: 40%;
      }
    }
  }
  c-section-text-gallery-media.v-disposition-media-desktop--right,
  c-section-text-gallery-media.v-disposition-media-desktop--left {
    .gallery-list {
      .embla__progress {
        @media (min-width: 1024px) {
          display: none;
        }
      }
      .embla__viewport {
        padding-inline: var(--spacings-small-xl, 1rem);

        @media (min-width: 1024px) {
          padding-inline: var(--spacings-small-xl, 1rem);
        }
      }
      &:has(.container-product-card:nth-child(3)),
      &:has(.container-collection-card:nth-child(3)),
      &:has(.container-info-card:nth-child(3)),
      &:has(.container-media-card:nth-child(3)) {
        .embla__progress {
          @media (min-width: 1024px) {
            display: grid;
          }
        }
      }
    }
  }

  c-section-text-gallery-media.v-disposition-media-desktop--top {
    & > .content-container {
      padding: 2rem 1rem 2.5rem;

      @media screen and (min-width: 1024px) {
        padding: 2.5rem 0 2.5rem 0;
        margin: 0 auto;
        width: 100%;
      }

      .inside {
        @media screen and (min-width: 1024px) {
          max-width: 40.8125rem;
        }
      }

      & > .media-container {
        padding-block-end: 2rem;

        @media screen and (min-width: 1024px) {
          padding-block-end: 2.5rem;
        }
      }
    }
    c-gallery-container.v-slider {
      padding-block-end: 2.5rem;
      @media screen and (min-width: 1024px) {
        padding-block-end: 3.5rem;
      }
      .gallery-list {
        .embla__progress {
          @media (min-width: 1024px) {
            display: none;
          }
        }
        &:has(.container-product-card:nth-child(5)),
        &:has(.container-collection-card:nth-child(5)),
        &:has(.container-info-card:nth-child(5)),
        &:has(.container-media-card:nth-child(5)) {
          .embla__viewport {
            padding-inline: var(--spacings-small-xl, 1rem);

            @media (min-width: 1024px) {
              padding-inline: var(--spacings-medium-m, 2rem);
            }
          }
          .embla__progress {
            @media (min-width: 1024px) {
              display: grid;
            }
          }
        }
        .embla__viewport {
          padding-inline: var(--spacings-small-xl, 1rem);

          @media (min-width: 1024px) {
            padding-inline: 0;
          }
        }
      }
      .embla__container {
        @media (min-width: 1024px) {
          justify-content: center;

          &:has(.container-product-card:nth-child(5)),
          &:has(.container-collection-card:nth-child(5)),
          &:has(.container-info-card:nth-child(5)),
          &:has(.container-media-card:nth-child(5)) {
            justify-content: flex-start;
          }
        }
      }
    }
    c-gallery-container.v-slider.v-cart {
      .gallery-list {
        .embla__progress {
          @media (min-width: 1024px) {
            display: none;
          }
        }
        &:has(.container-product-card:nth-child(5)),
        &:has(.container-collection-card:nth-child(5)),
        &:has(.container-info-card:nth-child(5)),
        &:has(.container-media-card:nth-child(5)) {
          .embla__viewport {
            padding-inline: var(--spacings-small-xl, 1rem);

            @media (min-width: 1024px) {
              padding-inline: 3.5rem;
            }
          }
          .embla__progress {
            @media (min-width: 1024px) {
              display: grid;
            }
          }
        }
        .embla__viewport {
          padding-inline: var(--spacings-small-xl, 1rem);

          @media (min-width: 1024px) {
            padding-inline: 0;
          }
        }
      }
      .embla__container {
        @media (min-width: 1024px) {
          justify-content: center;

          &:has(.container-product-card:nth-child(5)),
          &:has(.container-collection-card:nth-child(5)),
          &:has(.container-info-card:nth-child(5)),
          &:has(.container-media-card:nth-child(5)) {
            justify-content: flex-start;
          }
        }
      }
    }
  }

  c-section-text-gallery-media.v-disposition-media-desktop--bottom {
    & > .content-container {
      padding: 2.5rem 1rem 2rem;

      @media screen and (min-width: 1024px) {
        padding: 2.5rem 0 2.5rem 0;
        margin: 0 auto;
        width: 100%;
      }

      .inside {
        @media screen and (min-width: 1024px) {
          max-width: 40.8125rem;
        }
      }
    }

    & > .media-container {
      @media screen and (min-width: 1024px) {
        order: 3;
      }
    }

    & > .content-container {
      @media screen and (min-width: 1024px) {
        order: 1;
      }
    }

    & > c-gallery-container,
    & > .gallery-container {
      @media screen and (min-width: 1024px) {
        order: 2;
      }
    }

    c-gallery-container.v-slider {
      padding-block-end: 2.5rem;
      @media screen and (min-width: 1024px) {
        padding-block-end: 3.5rem;
      }
      .gallery-list {
        .embla__progress {
          @media (min-width: 1024px) {
            display: none;
          }
        }
        &:has(.container-product-card:nth-child(5)),
        &:has(.container-collection-card:nth-child(5)),
        &:has(.container-info-card:nth-child(5)),
        &:has(.container-media-card:nth-child(5)) {
          .embla__viewport {
            padding-inline: var(--spacings-small-xl, 1rem);

            @media (min-width: 1024px) {
              padding-inline: var(--spacings-medium-m, 2rem);
            }
          }
          .embla__progress {
            @media (min-width: 1024px) {
              display: grid;
            }
          }
        }
        .embla__viewport {
          padding-inline: var(--spacings-small-xl, 1rem);

          @media (min-width: 1024px) {
            padding-inline: 0;
          }
        }
      }
      .embla__container {
        @media (min-width: 1024px) {
          justify-content: center;

          &:has(.container-product-card:nth-child(5)),
          &:has(.container-collection-card:nth-child(5)),
          &:has(.container-info-card:nth-child(5)),
          &:has(.container-media-card:nth-child(5)) {
            justify-content: flex-start;
          }
        }
      }
    }
  }
}
/* END_SECTION:section-text-gallery-media */

/* START_SECTION:set-to-compose-product (INDEX:49) */
/* ⚠ Auto-generated from src/sections/set-to-compose-product/set-to-compose-product.css — do not edit directly. */
/* src/sections/set-to-compose-product/set-to-compose-product.css */
@layer reset, base, components, variants;

@layer components {
  /* Container whole section */
  .set-to-compose-product {
    width: 100%;
    position: relative;

    @media screen and (max-width: 768px) {
      display: block;
      padding-top: 4.25rem;
    }
  }

  /* Style Error Message */
  .set-to-compose-product_error-message {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacings-small-l);
    color: var(--color-white, #fff);
    text-align: center;
    background: var(--Background-quaternary, #000);
    transform: translateY(0);
    transition:
      transform 0.3s ease,
      margin-bottom 0.3s ease;
    opacity: 1;
    margin-bottom: 0;

    @media screen and (max-width: 768px) {
      padding: var(--spacings-small-l) var(--spacings-small-xl);
      transition:
        transform 0.3s ease,
        margin-bottom 0.3s ease,
        opacity 0.3s ease;
    }

    p {
      flex: 1;
      padding: 0 var(--spacings-medium-s);
    }

    &.hidden {
      opacity: 0;
      transform: translateY(-100%);
      overflow: hidden;
      pointer-events: none;
      margin-bottom: -2.5rem;
      transition:
        transform 0.3s ease,
        margin-bottom 0.3s ease,
        opacity 0s 0.3s ease;

      @media screen and (max-width: 768px) {
        margin-bottom: -3.5rem;
        transition:
          transform 0.3s ease,
          margin-bottom 0.3s ease,
          opacity 0.3s ease;
      }
    }
  }

  .set-to-compose-product_error-message_button {
    position: absolute;
    right: var(--spacings-small-l);
    color: inherit;
    width: 1.5rem;
    height: 1.5rem;
  }

  /* Style Hero */
  .set-to-compose-product_hero {
    padding-top: var(--spacings-large-xs);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    @media screen and (max-width: 768px) {
      padding-top: var(--spacings-medium-l);
    }
  }
  .set-to-compose-product_hero_title {
    text-align: center;
  }
  .set-to-compose-product_hero_description {
    padding-inline: var(--spacings-medium-xs);
    position: relative;
    text-align: center;
    font-weight: 300;
    display: block;
    max-width: 40.8125rem;
    margin: 0 auto;
    padding-top: var(--spacings-small-m);
    padding-bottom: var(--spacings-small-m);
  }

  /* Style Product Grid */
  .set-to-compose-product_grid {
    padding: var(--spacings-large-xs) var(--spacings-medium-m);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--spacings-small-xl);
    row-gap: var(--spacings-medium-l);

    @media screen and (max-width: 768px) {
      padding: var(--spacings-medium-l) var(--spacings-small-xl);
      grid-template-columns: repeat(2, 1fr);
      column-gap: var(--spacings-small-m);
      row-gap: var(--spacings-medium-m);
    }
  }

  .set-to-compose-product_grid_item {
    position: relative;
  }

  .set-to-compose-product_check {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full, 999px);
    border: var(--border-width-extra-small, 1px) solid
      var(--Border-primary, #000);
    background: var(--Background-primary, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 3;
  }

  .set-to-compose-product_check-icon {
    width: 1rem;
    height: 1rem;

    @media screen and (max-width: 768px) {
      width: 1.125rem;
      height: 1.125rem;
    }
  }

  .set-to-compose-product_check-icon svg {
    width: 100%;
    height: 100%;
  }

  .set-to-compose-product_grid_item.is-selected .set-to-compose-product_check {
    opacity: 1;
    pointer-events: none;
  }
}
/* END_SECTION:set-to-compose-product */

/* START_SECTION:shoppable (INDEX:50) */
/* ⚠ Auto-generated from src/sections/shoppable/shoppable.css — do not edit directly. */
/* src/sections/shoppable/shoppable.css */
/* Image ratio containers avec padding-bottom */
@layer base {
  /* Styles pour les images dans les containers */
  .image-ratio--1 img,
  .image-ratio--2 img,
  .image-ratio--3 img,
  .image-ratio--4 img,
  .image-ratio--5 img,
  .image-ratio-mobile--1 img,
  .image-ratio-mobile--2 img,
  .image-ratio-mobile--3 img,
  .image-ratio-mobile--4 img,
  .image-ratio-mobile--5 img,
  .image-ratio--1 video,
  .image-ratio--2 video,
  .image-ratio--3 video,
  .image-ratio--4 video,
  .image-ratio--5 video,
  .image-ratio-mobile--1 video,
  .image-ratio-mobile--2 video,
  .image-ratio-mobile--3 video,
  .image-ratio-mobile--4 video,
  .image-ratio-mobile--5 video,
  .image-ratio--1 svg,
  .image-ratio--2 svg,
  .image-ratio--3 svg,
  .image-ratio--4 svg,
  .image-ratio--5 svg,
  .image-ratio-mobile--1 svg,
  .image-ratio-mobile--2 svg,
  .image-ratio-mobile--3 svg,
  .image-ratio-mobile--4 svg,
  .image-ratio-mobile--5 svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .image-ratio-mobile--1 {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    /* 1/1 = 100% */
  }

  .image-ratio-mobile--2 {
    position: relative;
    width: 100%;
    padding-bottom: 125%;
    /* 4/5 = 125% */
  }

  .image-ratio-mobile--3 {
    position: relative;
    width: 100%;
    padding-bottom: 133.33%;
    /* 3/4 = 133.33% */
  }

  .image-ratio-mobile--4 {
    position: relative;
    width: 100%;
    padding-bottom: 177.78%;
    /* 9/16 = 177.78% */
  }

  .image-ratio-mobile--5 {
    position: relative;
    width: 100%;
    padding-bottom: 120%;
    /* 5/6 = 120% */
  }

  .image-ratio--3 {
    position: relative;
    width: 100%;
    padding-bottom: 75%;
    /* 4/3 = 75% */
  }

  @media screen and (min-width: 1024px) {
    .image-ratio--1 {
      position: relative;
      width: 100%;
      padding-bottom: 100%;
      /* 1/1 = 100% */
    }

    .image-ratio--2 {
      position: relative;
      width: 100%;
      padding-bottom: 125%;
      /* 4/5 = 125% */
    }

    .image-ratio--4 {
      position: relative;
      width: 100%;
      padding-bottom: 56.25%;
      /* 16/9 = 56.25% */
    }

    .image-ratio--5 {
      position: relative;
      width: 100%;
      padding-bottom: 120%;
      /* 5/6 = 120% */
    }
  }
}

@layer base {
  /* Styles pour les images dans les containers */
  .image-ratio--1 img,
  .image-ratio--2 img,
  .image-ratio--3 img,
  .image-ratio--4 img,
  .image-ratio--5 img,
  .image-ratio-mobile--1 img,
  .image-ratio-mobile--2 img,
  .image-ratio-mobile--3 img,
  .image-ratio-mobile--4 img,
  .image-ratio-mobile--5 img,
  .image-ratio--1 video,
  .image-ratio--2 video,
  .image-ratio--3 video,
  .image-ratio--4 video,
  .image-ratio--5 video,
  .image-ratio-mobile--1 video,
  .image-ratio-mobile--2 video,
  .image-ratio-mobile--3 video,
  .image-ratio-mobile--4 video,
  .image-ratio-mobile--5 video,
  .image-ratio--1 svg,
  .image-ratio--2 svg,
  .image-ratio--3 svg,
  .image-ratio--4 svg,
  .image-ratio--5 svg,
  .image-ratio-mobile--1 svg,
  .image-ratio-mobile--2 svg,
  .image-ratio-mobile--3 svg,
  .image-ratio-mobile--4 svg,
  .image-ratio-mobile--5 svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .image-ratio-mobile--1 {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    /* 1/1 = 100% */
  }

  .image-ratio-mobile--2 {
    position: relative;
    width: 100%;
    padding-bottom: 125%;
    /* 4/5 = 125% */
  }

  .image-ratio-mobile--3 {
    position: relative;
    width: 100%;
    padding-bottom: 133.33%;
    /* 3/4 = 133.33% */
  }

  .image-ratio-mobile--4 {
    position: relative;
    width: 100%;
    padding-bottom: 177.78%;
    /* 9/16 = 177.78% */
  }

  .image-ratio-mobile--5 {
    position: relative;
    width: 100%;
    padding-bottom: 120%;
    /* 5/6 = 120% */
  }

  .image-ratio--3 {
    position: relative;
    width: 100%;
    padding-bottom: 75%;
    /* 4/3 = 75% */
  }

  @media screen and (min-width: 1024px) {
    .image-ratio--1 {
      position: relative;
      width: 100%;
      padding-bottom: 100%;
      /* 1/1 = 100% */
    }

    .image-ratio--2 {
      position: relative;
      width: 100%;
      padding-bottom: 125%;
      /* 4/5 = 125% */
    }

    .image-ratio--4 {
      position: relative;
      width: 100%;
      padding-bottom: 56.25%;
      /* 16/9 = 56.25% */
    }

    .image-ratio--5 {
      position: relative;
      width: 100%;
      padding-bottom: 120%;
      /* 5/6 = 120% */
    }
  }
}
@layer components {
  .shoppable-product {
    position: absolute;
    z-index: 2;
    transform: translate(-50%, -50%);
  }

  .shoppable__description {
    /* width: 330px; */
    max-width: 100%;
    margin: 0 auto var(--spacings-small-m, 0.5rem);
  }

  .shoppable-product__content {
    display: none;
    position: absolute;
    z-index: 5;
    max-width: 22.5625rem;
    width: calc(100% - 2 * var(--spacings-small-xl, 1rem));
    margin: 0 auto;
    background: var(--color-white);
    /*padding: var(--spacings-small-m, 8px);*/
    /*align-items: flex-start;*/
    /*gap: var(--spacings-small-xl);
  padding-right: var(--spacings-small-xl);*/
    border-radius: var(--radius-medium, 4px);
    overflow: hidden;
    /* Optionnel: ombre portée */
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
    @media (max-width: 1024px) {
      max-width: 25rem;
    }
  }

  .shoppable-product__content.active {
    display: flex;
  }
  .section-shopable .text-image__content--top .text-image__texts-container,
  .section-shopable .text-image__content--bottom,
  .section-shopable .text-image-desktop--bottom {
    padding-bottom: 0;
  }
  .section-shopable .text-image-desktop--top,
  .text-image__content--bottom .text-image__texts-container {
    padding-top: 0;
  }

  .shoppable-product__pin-container {
    width: fit-content;
    /* padding: var(--spacings-small-m, 8px);*/
    border-radius: 50%;
    display: grid;
    justify-items: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: transparent;
    border: 0.5px solid white;
    cursor: pointer;
    transition: 0.4s;
    transform: rotate(45deg);
    font: inherit;
    color: inherit;
  }

  .shoppable-product__pin-container:hover {
    /*padding: var(--spacings-small-xl, 16px);*/
    transform: rotate(0deg) scale(1.25);
    & .shoppable-product__pin {
      transform: rotate(-45deg) scale(0.75);
    }
  }

  .shoppable-product__pin {
    background: white;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.4s;
    & svg {
      width: 0.75rem;
      height: 0.75rem;
    }
  }
  .shoppable-product__title {
    display: inline-block;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: var(--spacings-small-m);
  }
  .shoppable-product__details {
    display: grid;
    padding: var(--spacings-small-xl);
    box-sizing: border-box;
  }

  .shoppable-product__image {
    width: 29%;
    min-width: 29%;
    min-height: max(100%, 5rem);
    padding: 0.5rem;

    & img,
    & video {
      height: 100%;
      max-height: 100%;
      width: 100%;
      object-fit: cover;
    }
  }

  .shoppable-product__ingredients {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: var(--spacings-small-m);
  }

  .text-image__content-image {
    position: relative;
    width: 100%;
  }
  .shoppable-product__content {
    /* Shoppable out of stock */
    .button--shoppable {
      block-size: 1.25rem;
      padding-inline: initial;
      font-size: 0.875rem;
      background-color: transparent;
      border: none;
      box-shadow: none;
      appearance: none;

      &::before {
        content: '';
        position: absolute;
        block-size: 0.0625rem;
        inline-size: 100%;
        inset-block-end: 0rem;
        inset-inline-start: -0.0625rem;
        background-color: currentcolor;
        transition: 0.3s ease;
        pointer-events: none;
      }

      &:hover::before {
        inset-block-end: 0.125rem;
      }

      &::after {
        content: '';
        position: absolute;
        inline-size: calc(100% + 1rem);
        block-size: calc(100% + 1.5rem);
        top: calc(50% - 0.25rem);
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
  .shoppable-image-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    pointer-events: none;
    transition: background-color 0.3s ease-in-out;
  }

  .shoppable-product__content.active ~ .shoppable-image-container::after {
    background-color: rgba(0, 0, 0, 0.25);
  }
}

@layer variants {
  .section-shopable:has(.v-hidden) {
    display: none;
  }
}

@layer components {
  .text-image {
    width: 100%;
    max-width: 100rem;
    margin: 0 auto;

    padding: var(--spacings-medium-l, 2.5rem) 0;
    /*overflow: hidden;*/
  }

  /* Valeur posée en style inline par snippets/shoppable.liquid. */
  .text-image__container {
    background-color: var(--background-color, transparent);
  }

  .text-image__content {
    display: flex;
    flex-direction: column;
  }

  /* Text content */
  .text-image__texts-container {
    flex: 1;
    padding: var(--spacings-medium-m) var(--spacings-medium-l);
    box-sizing: border-box;
    @media screen and (min-width: 1024px) {
      padding: var(--spacings-meduim-l) 0 var(--spacings-large-xs);
    }
  }

  .text-image__texts-content {
    text-align: center;
    position: relative;
    max-width: 40.8125rem;
    width: 100%;
    margin: 0 auto;
    /* padding-bottom: var(--spacings-small-s, 4px); */
  }

  .container-large .text-image__texts-content {
    max-width: 40.8125rem;
    width: 100%;
    margin: 0 auto;
  }

  .text-image__texts-content {
    display: flex;
    flex-direction: column;
  }

  .container-ratio--1 .text-image__texts-container {
    min-width: 53.5%;
  }

  .container-ratio--2 .text-image__texts-container {
    min-width: 54.5%;
  }

  .container-ratio--3 .text-image__texts-container {
    min-width: 46.5%;
  }

  .container-ratio--4 .text-image__texts-container {
    min-width: 42.5%;
  }

  .container-ratio--5 .text-image__texts-container {
    min-width: 50%;
  }

  .text-image__overtitle,
  .text-image__title,
  .text-image__subtitle {
    margin-bottom: var(--spacings-small-m, 0.5rem);
  }

  .text-image__title:only-child {
    margin-bottom: 0;
  }

  .text-image__label,
  .text-image__description {
    margin: var(--spacings-small-m, 0.5rem) 0;
  }

  .text--image__button-container {
    margin-top: var(--spacings-medium-m, 2rem);
  }

  .text--image__button-container .product-form__submit {
    margin-top: 0 !important;
  }

  /* Image content */
  .text-image__content-image {
    position: relative;
    flex: 1;
    line-height: 0;
    grid-column: 1/-1;
    grid-row: 1/-1;
    /* width: 100%; */
  }

  .text-image__content-image-item {
    width: 100%;
    display: grid;
  }

  .text-image__content-image-item-desktop {
    display: none;
  }

  .text-image__content-image-item-mobile {
    display: block;
    grid-column: 1/-1;
    grid-row: 1/-1;
  }

  .text-image__content-image-item-button {
    grid-column: 1/-1;
    grid-row: 1/-1;
    z-index: 2;
    position: relative;
    padding-bottom: var(--spacings-medium-l, 2.5rem);
    align-self: flex-end;
    justify-self: center;
  }
  .container-product-card-horizontal {
    grid-column: 1/-1;
    grid-row: 1/-1;
    z-index: 2;
    height: 100%;
    justify-self: center;

    @media screen and (min-width: 1024px) {
      justify-self: flex-end;
    }
    .product-card-horizontal {
      position: sticky;
      top: calc(100vh - 9.5rem - 3rem);
      margin-bottom: var(--spacings-medium-l, 2.5rem);

      @media screen and (min-width: 1024px) {
        margin-bottom: var(--spacings-medium-xl, 3rem);
        margin-inline-end: var(--spacings-medium-xl, 3rem);
      }
    }
  }
  .text-image__content-image-item-button--sticky {
    --position-sticky: 100vh;
    align-self: unset;
    height: 100%;

    button,
    a {
      margin-top: 0;
      position: sticky;
      top: calc(var(--position-sticky));
    }
  }
  .container-ratio--1 .text-image__content-image {
    min-width: 46.5%;
  }

  .container-ratio--2 .text-image__content-image {
    min-width: 45.5%;
  }

  .container-ratio--3 .text-image__content-image {
    min-width: 53.5%;
  }

  .container-ratio--4 .text-image__content-image {
    min-width: 57.5%;
  }

  .container-ratio--5 .text-image__content-image {
    min-width: 50%;
  }
  .section-text-media .text-image__content--top .text-image__texts-container,
  .section-text-media .text-image__content--bottom,
  .section-text-media .text-image-desktop--bottom,
  .section-text-media .text-image-desktop--left,
  .section-text-media .text-image-desktop--right {
    padding-bottom: 0;
  }
  .section-text-media .text-image-desktop--top,
  .text-image__content--bottom .text-image__texts-container,
  .section-text-media .text-image-desktop--left,
  .section-text-media .text-image-desktop--right {
    padding-top: 0;
  }
  /* Desktop image display */
  @media screen and (min-width: 1024px) {
    .text-image__content-image-item-desktop {
      display: block;
      grid-column: 1/-1;
      grid-row: 1/-1;

      &:has(video) {
        padding-block-end: 0;
        padding-bottom: 0;
      }
    }

    .text-image__content-image-item-mobile {
      display: none;
    }
  }

  .text-image__content-mobile--top {
    flex-direction: column-reverse;
  }

  .text-image__content-mobile--bottom {
    flex-direction: column;
  }

  .text-image .video-container {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .text-image .text-image__content-item-video-mobile {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .text-image .video-content {
    width: 100%;
    height: 100%;
  }

  /*
.text-image__content-mobile--bottom .text-image__texts-container {
  padding-top: 0;
} */

  /* Desktop layout */
  @media screen and (min-width: 1024px) {
    .text-image {
      padding: var(--spacings-large-xs, 3.5rem) 0;
    }

    .text-image__content {
      flex-direction: row;
      align-items: center;
    }

    .text-image__content--left {
      flex-direction: row-reverse;
    }

    .text-image__content--right {
      flex-direction: row;
    }

    .text-image__content--top {
      flex-direction: column-reverse;
    }

    .text-image__content--bottom {
      flex-direction: column;
    }

    .container-ratio--4.text-image__content--top .text-image__content-image,
    .container-ratio--4.text-image__content--bottom .text-image__content-image {
      min-width: 100%;
    }

    .container-ratio--1.text-image__content--top .text-image__texts-content,
    .container-ratio--2.text-image__content--top .text-image__texts-content,
    .container-ratio--3.text-image__content--top .text-image__texts-content,
    .container-ratio--4.text-image__content--top .text-image__texts-content,
    .container-ratio--5.text-image__content--top .text-image__texts-content {
      width: 40.8125rem;
    }

    .text-image__texts-container {
      padding: var(--spacings-large-m, 5rem) var(--spacings-large-l, 7.5rem);
    }

    .text-image__content-image-item-button {
      /*bottom: var(--spacings-medium-xl, 40px);*/
    }

    .text-image__content--top .text-image__texts-container,
    .text-image__content--bottom .text-image__texts-container {
      padding: var(--spacings-medium-l, 2.5rem) var(--spacings-large-l, 7.5rem);
    }

    .text-image-desktop--top {
      padding-bottom: var(--spacings-small-m, 0.5rem);
    }

    .text-image-desktop--bottom {
      padding-top: var(--spacings-small-m, 0.5rem);
    }

    /* .text-image__content--top .text-image__texts-container {
    padding-bottom: 0;
  }
  .text-image__content--bottom .text-image__texts-container {
    padding-top: 0;
  } */
  }

  @media screen and (max-width: 1024px) {
    .text-image__content-image,
    .text-image__texts-container,
    .text-image__texts-content {
      width: 100%;
      /*min-width: 100% !important;*/
    }

    .text-image-mobile--top {
      padding-bottom: var(--spacings-small-m, 0.5rem);
    }

    .text-image-mobile--bottom {
      padding-top: var(--spacings-small-m, 0.5rem);
    }
  }
}
/* END_SECTION:shoppable */

/* START_SECTION:spotify (INDEX:52) */
/* ⚠ Auto-generated from src/sections/spotify/spotify.css — do not edit directly. */
/* src/sections/spotify/spotify.css */
/* END_SECTION:spotify */

/* START_SECTION:text-image (INDEX:55) */
/* Text Image Section Styles */
  @layer reset, base, components, variants, settings;

  @layer components {
    .text-image {
      width: 100%;
      max-width: 100rem;
      margin: 0 auto;

      padding: var(--spacings-medium-l, 2.5rem) 0;
      /*overflow: hidden;*/
    }

    .text-image__content {
      display: flex;
      flex-direction: column;
    }

    /* Text content */
    .text-image__texts-container {
      flex: 1;
      padding: var(--spacings-medium-m) var(--spacings-medium-l);
      box-sizing: border-box;
      @media screen and (min-width: 1024px) {
        padding: var(--spacings-meduim-l) 0rem var(--spacings-large-xs);
      }
    }

    .text-image__texts-content {
      position: relative;
      max-width: 40.8125rem;
      width: 100%;
      margin: 0 auto;
      /* padding-bottom: var(--spacings-small-s, 4px); */
    }

    .container-large .text-image__texts-content {
      max-width: 40.8125rem;
      width: 100%;
      margin: 0 auto;
    }

    .text-image__texts-content {
      display: flex;
      flex-direction: column;
    }

    .container-ratio--1 .text-image__texts-container {
      min-width: 53.5%;
    }

    .container-ratio--2 .text-image__texts-container {
      min-width: 54.5%;
    }

    .container-ratio--3 .text-image__texts-container {
      min-width: 46.5%;
    }

    .container-ratio--4 .text-image__texts-container {
      min-width: 42.5%;
    }

    .container-ratio--5 .text-image__texts-container {
      min-width: 50%;
    }

    .text-image__overtitle,
    .text-image__title,
    .text-image__subtitle {
      margin-bottom: var(--spacings-small-m, 0.5rem);
    }

    .text-image__title:only-child {
      margin-bottom: 0;
    }

    .text-image__label,
    .text-image__description {
      margin: var(--spacings-small-m, 0.5rem) 0;
    }

    .text--image__button-container {
      margin-top: var(--spacings-medium-m, 2rem);
    }

    .text--image__button-container .product-form__submit {
      margin-top: 0 !important;
    }

    /* Image content */
    .text-image__content-image {
      position: relative;
      flex: 1;
      line-height: 0;
      grid-column: 1/-1;
      grid-row: 1/-1;
      /* width: 100%; */
    }

    .text-image__content-image-item {
      width: 100%;
      display: grid;
    }

    .text-image__content-image-item-desktop {
      display: none;
    }

    .text-image__content-image-item-mobile {
      display: block;
      grid-column: 1/-1;
      grid-row: 1/-1;
    }

    .text-image__content-image-item-button {
      grid-column: 1/-1;
      grid-row: 1/-1;
      z-index: 2;
      position: relative;
      padding-bottom: var(--spacings-medium-l, 2.5rem);
      align-self: flex-end;
      justify-self: center;
    }
    .container-product-card-horizontal {
      grid-column: 1/-1;
      grid-row: 1/-1;
      z-index: 2;
      height: 100%;
      justify-self: center;

      @media screen and (min-width: 1024px) {
        justify-self: flex-end;
      }
      .product-card-horizontal {
        position: sticky;
        top: calc(100vh - 9.5rem - 3rem);
        margin-bottom: var(--spacings-medium-l, 2.5rem);

        @media screen and (min-width: 1024px) {
          margin-bottom: var(--spacings-medium-xl, 3rem);
          margin-inline-end: var(--spacings-medium-xl, 3rem);
        }
      }
    }
    .text-image__content-image-item-button--sticky {
      --position-sticky: 100vh;
      align-self: unset;
      height: 100%;

      button,
      a {
        margin-top: 0;
        position: sticky;
        top: calc(var(--position-sticky));
      }
    }
    .container-ratio--1 .text-image__content-image {
      min-width: 46.5%;
    }

    .container-ratio--2 .text-image__content-image {
      min-width: 45.5%;
    }

    .container-ratio--3 .text-image__content-image {
      min-width: 53.5%;
    }

    .container-ratio--4 .text-image__content-image {
      min-width: 57.5%;
    }

    .container-ratio--5 .text-image__content-image {
      min-width: 50%;
    }
    .section-text-media .text-image__content--top .text-image__texts-container,
    .section-text-media .text-image__content--bottom,
    .section-text-media .text-image-desktop--bottom,
    .section-text-media .text-image-desktop--left,
    .section-text-media .text-image-desktop--right {
      padding-bottom: 0;
    }
    .section-text-media .text-image-desktop--top,
    .text-image__content--bottom .text-image__texts-container,
    .section-text-media .text-image-desktop--left,
    .section-text-media .text-image-desktop--right {
      padding-top: 0;
    }
    /* Desktop image display */
    @media screen and (min-width: 1024px) {
      .text-image__content-image-item-desktop {
        display: block;
        grid-column: 1/-1;
        grid-row: 1/-1;

        &:has(video) {
          padding-block-end: 0;
          padding-bottom: 0;
        }
      }

      .text-image__content-image-item-mobile {
        display: none;
      }
    }

    .text-image__content-mobile--top {
      flex-direction: column-reverse;
    }

    .text-image__content-mobile--bottom {
      flex-direction: column;
    }

    .text-image .video-container {
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .text-image .text-image__content-item-video-mobile {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    .text-image .video-content {
      width: 100%;
      height: 100%;
    }

    /*
.text-image__content-mobile--bottom .text-image__texts-container {
  padding-top: 0;
} */

    /* Desktop layout */
    @media screen and (min-width: 1024px) {
      .text-image {
        padding: var(--spacings-large-xs, 3.5rem) 0;
      }

      .text-image__content {
        flex-direction: row;
        align-items: center;
      }

      .text-image__content--left {
        flex-direction: row-reverse;
      }

      .text-image__content--right {
        flex-direction: row;
      }

      .text-image__content--top {
        flex-direction: column-reverse;
      }

      .text-image__content--bottom {
        flex-direction: column;
      }

      .container-ratio--4.text-image__content--top .text-image__content-image,
      .container-ratio--4.text-image__content--bottom .text-image__content-image {
        min-width: 100%;
      }

      .container-ratio--1.text-image__content--top .text-image__texts-content,
      .container-ratio--2.text-image__content--top .text-image__texts-content,
      .container-ratio--3.text-image__content--top .text-image__texts-content,
      .container-ratio--4.text-image__content--top .text-image__texts-content,
      .container-ratio--5.text-image__content--top .text-image__texts-content {
        width: 40.8125rem;
      }

      .text-image__texts-container {
        padding: var(--spacings-large-m, 5rem) var(--spacings-large-l, 7.5rem);
      }

      .text-image__content-image-item-button {
        /*bottom: var(--spacings-medium-xl, 40px);*/
      }

      .text-image__content--top .text-image__texts-container,
      .text-image__content--bottom .text-image__texts-container {
        padding: var(--spacings-medium-l, 2.5rem) var(--spacings-large-l, 7.5rem);
      }

      .text-image-desktop--top {
        padding-bottom: var(--spacings-small-m, 0.5rem);
      }

      .text-image-desktop--bottom {
        padding-top: var(--spacings-small-m, 0.5rem);
      }

      /* .text-image__content--top .text-image__texts-container {
    padding-bottom: 0;
  }
  .text-image__content--bottom .text-image__texts-container {
    padding-top: 0;
  } */
    }

    @media screen and (max-width: 1024px) {
      .text-image__content-image,
      .text-image__texts-container,
      .text-image__texts-content {
        width: 100%;
        /*min-width: 100% !important;*/
      }

      .text-image-mobile--top {
        padding-bottom: var(--spacings-small-m, 0.5rem);
      }

      .text-image-mobile--bottom {
        padding-top: var(--spacings-small-m, 0.5rem);
      }
    }
  }
/* END_SECTION:text-image */

/* CSS from block stylesheet tags */
/* START_BLOCK:_algolia-recommend-cart-list (INDEX:57) */
/* ⚠ Auto-generated from src/blocks/_algolia-recommend-cart-list/_algolia-recommend-cart-list.css — do not edit directly. */
/* src/blocks/_algolia-recommend-cart-list/_algolia-recommend-cart-list.css */
/* Les feuilles partagées (link, cta, gallery_list, algolia-filter-shared) sont
   servies par assets/theme-shared.css — voir src/assets/theme-shared.css.
   Ne pas les réimporter ici : preprocessCSS les recopierait dans ce bloc. */
/* END_BLOCK:_algolia-recommend-cart-list */

/* START_BLOCK:_algolia-recommend-list (INDEX:58) */
/* ⚠ Auto-generated from src/blocks/_algolia-recommend-list/_algolia-recommend-list.css — do not edit directly. */
/* src/blocks/_algolia-recommend-list/_algolia-recommend-list.css */
@layer components {
  .gallery-list {
    position: relative;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    display: none;
    grid-template-rows: auto;
    row-gap: 1.3125rem;
    column-gap: var(--spacings-small-xl, 1rem);
    padding-inline: var(--spacings-small-xl, 1rem);
    pointer-events: none;
    opacity: 0;

    @media (min-width: 1024px) {
      row-gap: 1.5rem;
      padding-inline: var(--spacings-medium-m, 2rem);
    }

    &.is-active {
      display: grid;
      opacity: 1;
      pointer-events: auto;
    }
    /*
    &.shimmer::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, #ededed 30%, #dcdcdc 50%, #ededed 70%);
      background-size: 400%;
      animation: shimmer 1.5s infinite linear;
      z-index: 10;
    }
    */
  }
}
@layer components {
  .card-product {
    display: grid;
    row-gap: var(--spacings-small-xl);
    text-align: center;
    justify-items: center;
    height: 100%;
    grid-template: auto 1fr / auto;
  }

  .card-product__top {
    display: grid;
    grid-template: 1fr / 1fr;
    width: 100%;
  }

  .card-product-quick-buy__container {
    grid-row: 1 / -1;
    grid-column: 1/-1;
    z-index: 3;
    align-self: flex-end;
    justify-self: flex-end;
    padding-block-end: var(--spacings-small-xl);
    padding-inline-end: var(--spacings-small-xl);
  }

  .card-product_tags {
    grid-row: 1 / -1;
    grid-column: 1/-1;
    z-index: 3;
    align-self: flex-start;
    justify-self: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacings-small-m);
    padding-top: var(--spacings-small-m);
    padding-left: var(--spacings-small-m);
    pointer-events: none;
    transition: all 0.3s ease;

    @media screen and (min-width: 1024px) {
      padding-top: var(--spacings-small-xl);
      padding-left: var(--spacings-small-xl);
    }
  }

  .card-product_tags .tag {
    display: grid;
    padding: var(--spacings-small-s) var(--spacings-small-s)
      var(--spacings-small-xs);
    background-color: var(--color-white);
    /* color: var(--color-content-secondary); */
  }

  .card-product_image {
    display: grid;
    grid-row: 1 / -1;
    grid-column: 1/-1;
  }

  .card-product_image figure {
    grid-column: 1/-1;
    grid-row: 1/-1;
    z-index: 1;
    width: 100%;
    aspect-ratio: 3/4;
    video {
      object-fit: cover;
      width: 100%;
    }
  }

  .card-product_image figure:nth-child(even) {
    transition: all 0.5s linear;
    z-index: 0;
    opacity: 0;
    visibility: hidden;
  }

  /* .card-product_image.is-hover-active:hover ~ .card-product_tags {
    opacity: 0;
    transition: all 0s ease;
  } */
  @media (hover: hover) and (pointer: fine) {
    .card-product_image.is-hover-active:hover figure:nth-child(even) {
      z-index: 2;
      opacity: 1;
      visibility: visible;
    }
  }

  .card-product figure img,
  .card-product figure video {
    display: grid;
    aspect-ratio: 3/4;
    height: 100%;
  }

  .card-product_content {
    grid-row: 2 / span 1;
    grid-column: 1/-1;
    display: grid;
    width: 100%;
    row-gap: var(--spacings-small-xl);
    padding: 0 var(--spacings-small-m) var(--spacings-small-xl);

    @media screen and (min-width: 1024px) {
      padding: 0 var(--spacings-small-xl) var(--spacings-small-xl);
    }
  }

  .card-product_description {
    overflow: hidden;
    height: fit-content;
    color: var(--color-content-secondary);
  }

  .card-product_infos {
    display: grid;
    align-content: flex-start;
    row-gap: var(--spacings-small-xl);

    &.card-product_infos--set-to-compose {
      align-content: space-between;
    }

    .card-product_infos_top {
      display: grid;
      row-gap: var(--spacings-small-m);
    }

    .card-product_infos_bottom {
      display: grid;
      row-gap: var(--spacings-small-s);
    }
  }

  .card-product_content {
    & .product-form {
      align-self: flex-end;

      & .button {
        margin: auto;

        &.button--card-product {
          width: fit-content;
        }
      }
    }
  }

  /* Handle set-to-compose variant */
  .card-product.set-to-compose {
    border: 1px solid var(--State-Disable, #c8c8c8);
  }
}
@layer components {
  .card-product-quick-buy__container {
    .card-product-quick-buy {
      pointer-events: auto;
      z-index: 2;
      display: grid;
      height: 2.25rem;

      border-radius: var(--radius-full, 999px);
      background: var(--Background-primary, #fff);
      align-content: center;
      overflow: hidden;
      color: var(--Content-primary, #000);
      padding: var(--spacings-small-m, 0.5rem);
      &:active {
        color: var(--State-Pressed, #717171);
      }
      &:disabled {
        color: #717171;
        cursor: initial;
        pointer-events: none;
        background: #c8c8c8;
        label {
          color: #717171;
        }
      }
      &:hover,
      .is-animate-quick-buy & {
        .card-product-quick-buy__content {
          gap: var(--spacings-small-xs, 0.125rem);

          grid-template-columns: auto 1fr;
        }

        .label {
          transform: translateX(0);
          opacity: 1;
          transition: 0s;
        }
      }

      .label {
        display: inline-block;
        width: 100%;
        min-width: 0;
        text-wrap: nowrap;
        overflow: hidden;
        transform: translateX(100%);
        opacity: 0;
        transition: all 0.3s ease;
      }

      .card-product-quick-buy__content {
        display: inline-grid;
        align-items: center;
        grid-template-columns: auto 0fr;
        transition:
          grid-template-columns 0.3s ease,
          gap 0.3s ease;
        .logo {
          display: inline-grid;
        }
      }
    }
  }
}
@layer variants {
  .card-product-quick-buy.is-disabled {
    cursor: initial;
    color: var(--State-Disable, #c8c8c8);
  }
}
/* END_BLOCK:_algolia-recommend-list */

/* START_BLOCK:_algolia-recommend-product-list (INDEX:59) */
/* ⚠ Auto-generated from src/blocks/_algolia-recommend-product-list/_algolia-recommend-product-list.css — do not edit directly. */
/* src/blocks/_algolia-recommend-product-list/_algolia-recommend-product-list.css */
/* Les feuilles partagées (link, cta, gallery_list, algolia-filter-shared) sont
   servies par assets/theme-shared.css — voir src/assets/theme-shared.css.
   Ne pas les réimporter ici : preprocessCSS les recopierait dans ce bloc. */
/* END_BLOCK:_algolia-recommend-product-list */

/* START_BLOCK:_banner_content (INDEX:64) */
/* ⚠ Auto-generated from src/blocks/_banner_content/_banner_content.css — do not edit directly. */
/* src/blocks/_banner_content/_banner_content.css */
@layer components {
  .is-hide {
    visibility: hidden;
    display: none;
  }
  .banner_content {
    display: grid;
    width: 100%;
    padding: calc(var(--spacing) * 6);
    grid-template: auto / 1fr auto;
    box-sizing: border-box;

    & a {
      position: relative;
      &::before {
        transition: all 0.3s ease;
      }
    }
  }

  .banner__inside {
    display: grid;
    grid-column: 1/-1;
    grid-row: 1/-1;
    align-content: center;
    text-align: center;
    padding: 0 var(--spacings-medium-s);
  }
  .banner__close {
    width: calc(var(--spacing) * 8);
    align-self: center;
    justify-self: end;
    grid-row: 1/-1;
    grid-column: 2/-1;

    cursor: pointer;
  }
  .banner-text {
    justify-self: center;
  }
  .banner-countdown {
    display: grid;
    row-gap: calc(var(--spacing) * 4);
    justify-content: center;
    justify-items: center;
  }
  .banner-countdown__content {
    text-align: center;
  }
  .countdown-container {
    display: flex;
    column-gap: calc(var(--spacing) * 4);
  }

  @media screen and (min-width: 1024px) {
    .banner-countdown {
      display: grid;
      grid-template: auto / auto 1fr;
    }
    .banner-countdown__content {
      grid-column: 1 / span 1;
      grid-row: 1/-1;
      max-width: 62vh;
      text-align: left;
    }
    #countdown-timer {
      grid-column: 1/-1;
      grid-row: 1/-1;
      justify-self: center;
      align-self: center;
    }
  }
}
/* END_BLOCK:_banner_content */

/* START_BLOCK:_classic-recommend-list (INDEX:70) */
/* ⚠ Auto-generated from src/blocks/_classic-recommend-list/_classic-recommend-list.css — do not edit directly. */
/* src/blocks/_classic-recommend-list/_classic-recommend-list.css */
/* Les feuilles partagées (link, cta, gallery_list, algolia-filter-shared) sont
   servies par assets/theme-shared.css — voir src/assets/theme-shared.css.
   Ne pas les réimporter ici : preprocessCSS les recopierait dans ce bloc. */
/* END_BLOCK:_classic-recommend-list */

/* START_BLOCK:_collection-card-list (INDEX:71) */
/* ⚠ Auto-generated from src/blocks/_collection-card-list/_collection-card-list.css — do not edit directly. */
/* src/blocks/_collection-card-list/_collection-card-list.css */
/* Les feuilles partagées (link, cta, gallery_list, algolia-filter-shared) sont
   servies par assets/theme-shared.css — voir src/assets/theme-shared.css.
   Ne pas les réimporter ici : preprocessCSS les recopierait dans ce bloc. */
/* END_BLOCK:_collection-card-list */

/* START_BLOCK:_collection-card (INDEX:72) */
/* ⚠ Auto-generated from src/blocks/_collection-card/_collection-card.css — do not edit directly. */
/* src/blocks/_collection-card/_collection-card.css */
/* END_BLOCK:_collection-card */

/* START_BLOCK:_content-container-cross-sell (INDEX:73) */
@layer components {
    .block-content-container.content-container {
      --background-color: transparent;
      width: 100%;
      display: grid;
      text-align: center;
      justify-content: center;
      padding-inline: var(--spacings-medium-m, 2rem);
      background-color: var(--background-color);
      padding-block: var(--spacings-medium-l, 2.5rem);
      @media screen and (min-width: 1024px) {
        padding-inline: var(--spacings-large-l, 7.5rem);
        padding-block: var(--spacings-large-xs, 3.5rem);
      }
      .inside {
        display: grid;
        align-content: center;
        gap: var(--spacings-small-m, 0.5rem);
      }
    }
  }
  @layer variants {
    .block-content-container.content-container.v-text-align-left {
      text-align: left;
      c-countdown {
        justify-content: flex-start;
      }
    }
    .block-content-container.content-container.v-text-align-center {
      text-align: center;
      c-countdown {
        justify-content: center;
      }
    }
    .block-content-container.content-container.v-text-align-right {
      text-align: right;
      c-countdown {
        justify-content: flex-end;
      }
    }
  }
/* END_BLOCK:_content-container-cross-sell */

/* START_BLOCK:_content-container (INDEX:74) */
@layer components {
    .block-content-container.content-container {
      --background-color: transparent;
      width: 100%;
      display: grid;
      text-align: center;
      justify-content: center;
      padding-inline: var(--spacings-medium-m, 2rem);
      background-color: var(--background-color);
      padding-block: var(--spacings-medium-l, 2.5rem);
      @media screen and (min-width: 1024px) {
        padding-inline: var(--spacings-large-l, 7.5rem);
        padding-block: var(--spacings-large-xs, 3.5rem);
      }
      .inside {
        display: grid;
        align-content: center;
        gap: var(--spacings-small-m, 0.5rem);
      }
    }
  }
  @layer variants {
    .block-content-container.content-container.v-text-align-left {
      text-align: left;
      c-countdown {
        justify-content: flex-start;
      }
    }
    .block-content-container.content-container.v-text-align-center {
      text-align: center;
      c-countdown {
        justify-content: center;
      }
    }
    .block-content-container.content-container.v-text-align-right {
      text-align: right;
      c-countdown {
        justify-content: flex-end;
      }
    }
  }
/* END_BLOCK:_content-container */

/* START_BLOCK:_countdown (INDEX:75) */
@layer components {
    .container-countdown {
      display: grid;
    }
  }
/* END_BLOCK:_countdown */

/* START_BLOCK:_counter-card (INDEX:76) */
/* ⚠ Auto-generated from src/blocks/_counter-card/_counter-card.css — do not edit directly. */
  /* src/blocks/_counter-card/_counter-card.css */
/* END_BLOCK:_counter-card */

/* START_BLOCK:_description (INDEX:77) */
/* ⚠ Auto-generated from src/blocks/_description/description.css — do not edit directly. */
/* src/blocks/_description/description.css */
@layer reset, base, components, variants, settings;

@layer components {
  .body {
    overflow: hidden;
    color: var(--Content-primary, #000);
    text-overflow: ellipsis;
    padding: var(--spacings-small-m, 0.5rem) 0;

    /* body-large/light */
    font-family: var(--font-body);
    font-size: var(--typography-body-l-light-font-size, 1rem);
    font-style: normal;
    font-weight: var(--typography-body-l-light-font-weight, 300);
    line-height: var(--typography-body-l-light-line-height, 1.375rem);
    /* 137.5% */
    letter-spacing: var(--typography-body-l-light-letter-spacing, 0);
  }
}
/* END_BLOCK:_description */

/* START_BLOCK:_form (INDEX:78) */
/* ⚠ Auto-generated from src/blocks/_form/_form.css — do not edit directly. */
/* src/blocks/_form/_form.css */
@layer reset, base, components, variants, settings;

@layer components {
  .block-form-newsletter {
    margin-top: var(--spacing-medium-m);

    input[type='email']::placeholder {
      color: #4d4d4d;
    }
  }

  .block-form-newsletter_inside {
    display: grid;
    width: 100%;
    justify-self: center;
  }

  .message--error,
  .message--error-cgv {
    display: none;
    text-align: left;
    padding-top: 0.5rem;
    color: var(--State-Error, #d12f37);
    padding-inline-start: 1rem;
  }

  .message--error:has([data-error-text]:not(:empty)),
  .message--error-cgv:has([data-error-text]:not(:empty)) {
    display: flex;
    align-items: center;
    gap: var(--spacings-small-s);
  }
}

@layer variants {
  c-form-newsletter.v-email-invalid {
    input[type='email'] {
      border-color: var(--State-Error, #d12f37);
    }
  }

  c-form-newsletter.v-cgv-invalid {
    .confidentiality-checkbox {
      color: var(--State-Error, #d12f37);

      input[type='checkbox'] {
        outline: 1px solid var(--State-Error, #d12f37);
        border-color: var(--State-Error, #d12f37);
      }

      p,
      a,
      cookie-consent-button {
        color: var(--State-Error, #d12f37);
      }
    }
  }

  .block-form-newsletter_inside.v-sucess {
    input[type='email'] {
      border: 1px solid var(--State-Approved, #03a536);
    }

    .message--sucess {
      padding-top: 0.5rem;
      display: flex;
      align-items: center;
      gap: var(--spacings-small-s);
      text-align: left;
      padding-inline: 1rem;
      color: var(--State-Approved, #03a536);
    }
  }
}
/* END_BLOCK:_form */

/* START_BLOCK:_gallery-container (INDEX:79) */
/* ⚠ Auto-generated from src/blocks/_gallery-container/_gallery-container.css — do not edit directly. */
/* src/blocks/_gallery-container/_gallery-container.css */
@layer components {
  c-gallery-container {
    background-color: var(--background-color);
    overflow: hidden;

    .container-tabs {
      overflow: scroll;
    }

    .tabs {
      position: relative;
      width: max-content;
      display: flex;
      align-items: flex-start;
      gap: var(--spacings-medium-s, 1.5rem);
      padding-block-end: var(--spacings-medium-s, 1.5rem);
      padding-inline: 1rem;

      margin: 0 auto;
    }
    /*
    .shimmer::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, #ededed 30%, #dcdcdc 50%, #ededed 70%);
      background-size: 400%;
      animation: shimmer 1.5s infinite linear;
    }
    */
  }

  .gallery-container__content {
    display: grid;
  }

  /* Le serveur rend toutes les listes avec .is-active ; le JS ne retire
     la classe des listes suivantes qu'à la connexion du custom element.
     Tant que c-gallery-container n'est pas upgradé, seule la 1ère liste
     est visible pour éviter le flash de toutes les listes empilées. */
  c-gallery-container:not(:defined)
    .gallery-container__content
    > .gallery-list:not(:first-child) {
    display: none;
  }

  .embla {
    --slide-spacing: 1rem;
    --slide-size-mobile: 70%;
    --slide-size-desktop: 22%;

    .embla__viewport {
      --bg-info-card: 'transparent';
      overflow: hidden;
      position: relative;
      padding-block-end: 0.125rem;

      @media (min-width: 1024px) {
        padding-inline: 0;
      }
    }

    .container_embla__prev,
    .container_embla__next {
      height: 100%;
      z-index: 2;
      right: 0;
      width: 6.25rem;
      position: absolute;
      display: none;
      top: 50%;
      opacity: 1;
      transform: translateY(calc(-50% - 1.25rem));
      cursor: none;

      @media (min-width: 1024px) {
        display: grid;
      }

      &[data-disabled] {
        opacity: 0;
        pointer-events: none;
        cursor: not-allowed;
      }
    }

    .container_embla__prev {
      left: 0;
    }

    .container_embla__next {
      right: 0;
    }

    .embla__prev,
    .embla__next {
      cursor: none;
      display: grid;
      align-self: center;
      justify-self: center;
      width: 2.5rem;
      height: var(--spacings-medium-l, 2.5rem);
      justify-content: center;
      align-items: center;
      aspect-ratio: 1/1;
      border-radius: var(--radius-full, 999px);
      border: var(--border-width-extra-small, 1px) solid
        var(--Border-primary, #000);
      background: var(--Background-primary, #fff);
      transition: transform 0.15s ease-out;
    }

    .embla__progress {
      display: block;
      border-radius: var(--radius-small, 2px);
      box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
      border-radius: var(--radius-small, 2px);
      background: var(--State-Disable, #c8c8c8);
      position: relative;
      height: 0.0625rem;
      justify-self: center;
      align-self: center;
      width: 15rem;
      max-width: 90%;
      overflow: hidden;

      .embla__progress__bar {
        background: var(--Content-primary, #000);
        position: absolute;
        width: 100%;
        top: 0;
        bottom: 0;
        left: 0;
        transition: transform 0.3s ease;
      }
    }
  }

  @keyframes shimmer {
    0% {
      background-position: 100% 100%;
    }

    100% {
      background-position: 0 0;
    }
  }
}

@layer variants {
  c-gallery-container.v-grid {
    .gallery-list {
      .embla__container {
        grid-template: auto / 1fr 1fr;
        display: grid;
        row-gap: 2rem;
        column-gap: 0.5rem;
        justify-content: center;

        @media (min-width: 1024px) {
          display: flex;
          row-gap: 2.5rem;
          column-gap: var(--spacings-small-xl, 1rem);

          .embla__slide {
            max-width: 18.75rem;
            width: 100%;

            &.container-info-card {
              max-width: 28.0625rem;
              width: 100%;
            }
          }
        }
        &:has(.container-product-card:nth-child(4)),
        &:has(.container-collection-card:nth-child(4)),
        &:has(.container-info-card:nth-child(4)),
        &:has(.container-media-card:nth-child(4)) {
          @media (min-width: 1024px) {
            display: grid;
            grid-template: auto / repeat(4, minmax(0, 18.75rem));
          }
        }
      }
    }

    .embla__prev,
    .embla__next {
      display: none;
      visibility: hidden;
    }

    .embla__progress {
      display: none;
    }
  }
  c-gallery-container.v-slider {
    .gallery-list {
      padding-inline: 0;

      @media (min-width: 1024px) {
        padding-inline: 0;
      }
      .embla__container {
        display: flex;

        touch-action: pan-y pinch-zoom;
        margin-left: calc(var(--slide-spacing) * -1);
      }
      .embla__slide {
        flex: 0 0 var(--slide-size-mobile);
        min-width: 0;
        padding-left: var(--slide-spacing);

        @media (min-width: 1024px) {
          flex: 0 0 var(--slide-size-desktop);
        }
      }
    }
  }
  c-gallery-container.v-cart {
    .embla {
      --slide-spacing: 1rem;
      --slide-size-mobile: 70%;
      --slide-size-desktop: 30%;
    }
    .embla__viewport {
      @media (min-width: 1024px) {
        padding-inline: 3.5rem;
      }
    }
  }
}
/* END_BLOCK:_gallery-container */

/* START_BLOCK:_info-card-list (INDEX:80) */
/* ⚠ Auto-generated from src/blocks/_info-card-list/_info-card-list.css — do not edit directly. */
/* src/blocks/_info-card-list/_info-card-list.css */
/* Les feuilles partagées (link, cta, gallery_list, algolia-filter-shared) sont
   servies par assets/theme-shared.css — voir src/assets/theme-shared.css.
   Ne pas les réimporter ici : preprocessCSS les recopierait dans ce bloc. */
/* END_BLOCK:_info-card-list */

/* START_BLOCK:_info-card (INDEX:81) */
/* ⚠ Auto-generated from src/blocks/_info-card/_info-card.css — do not edit directly. */
/* src/blocks/_info-card/_info-card.css */
/* END_BLOCK:_info-card */

/* START_BLOCK:_input (INDEX:82) */
@layer reset, base, components, variants ,settings;

  @layer components {
    .block-input {
      display: grid;
      gap: 0.5rem;
      border: none;
    }
    input[type='checkbox'] {
      width: 0.875rem;
      height: 0.875rem;
      margin: 0.3125rem;
      color: black;
    }

    .confidentiality-checkbox {
      display: grid;
      grid-template-columns: auto 1fr;
      padding: var(--spacings-small-m, 0.5rem) 0;
      align-items: center;
      gap: var(--spacings-small-s, 0.25rem);
      align-self: stretch;
      text-align: left;

      a,
      cookie-consent-button {
        text-decoration: underline;
      }
    }

    input[type='email'] {
      border-radius: var(--radius-small, 2px);
      color: var(--Content-primary, #000);
      border: var(--border-width-extra-small, 1px) solid var(--Border-secondary, #717171);
      padding: var(--spacings-small-l, 0.75rem);
      text-align: center;
      &::placeholder {
        color: var(--Content-primary, #000);
      }
    }
  }
/* END_BLOCK:_input */

/* START_BLOCK:_media-card (INDEX:86) */
/* ⚠ Auto-generated from src/blocks/_media-card/_media-card.css — do not edit directly. */
/* src/blocks/_media-card/_media-card.css */
/* END_BLOCK:_media-card */

/* START_BLOCK:_media-card_list (INDEX:87) */
/* ⚠ Auto-generated from src/blocks/_media-card_list/_media-card_list.css — do not edit directly. */
/* src/blocks/_media-card_list/_media-card_list.css */
/* Les feuilles partagées (link, cta, gallery_list, algolia-filter-shared) sont
   servies par assets/theme-shared.css — voir src/assets/theme-shared.css.
   Ne pas les réimporter ici : preprocessCSS les recopierait dans ce bloc. */
/* END_BLOCK:_media-card_list */

/* START_BLOCK:_media-container-clean (INDEX:88) */
@layer reset, base, components, variants ,settings;

  @layer components {
    .media-container {
      display: grid;
      .test-container-image,
      .container-card-horizontal,
      .container-button,
      .container-video {
        grid-column: 1/-1;
        grid-row: 1/-1;
      }
      .test-container-image {
        display: grid;
        a {
          cursor: pointer;
        }
      }
      picture {
        display: grid;
        align-self: center;
      }
    }
  }
/* END_BLOCK:_media-container-clean */

/* START_BLOCK:_media-container (INDEX:89) */
/* ⚠ Auto-generated from src/blocks/_media-container/_media-container.css — do not edit directly. */
/* src/blocks/_media-container/_media-container.css */
@layer reset, base, components, variants, settings;

@layer components {
  .media-container {
    display: grid;

    .test-container-image,
    .container-card-horizontal,
    .container-button,
    .container-video {
      grid-column: 1/-1;
      grid-row: 1/-1;
    }

    .test-container-image {
      display: grid;

      a {
        cursor: pointer;
      }
    }

    picture {
      display: grid;
      align-self: center;
    }

    .container-card-horizontal {
      justify-items: center;
      display: grid;
      pointer-events: none;
      z-index: 2;
      width: 100%;
      height: 100%;

      @media screen and (min-width: 1024px) {
        justify-items: flex-end;
      }

      .product-card-horizontal {
        position: sticky;
        pointer-events: auto;
        top: calc(100vh - 9.5rem - 3rem);
        margin-block: var(--spacings-medium-l, 2.5rem);

        @media screen and (min-width: 1024px) {
          margin-block: var(--spacings-medium-xl, 3rem);
          margin-inline-end: var(--spacings-medium-xl, 3rem);
        }
      }
    }

    .container-button {
      display: grid;
      justify-items: center;
      width: 100%;
      height: fit;
      pointer-events: none;
      align-items: flex-end;

      .cta {
        pointer-events: auto;

        margin-block: var(--spacings-medium-l, 2.5rem);

        @media screen and (min-width: 1024px) {
          margin-block: var(--spacings-medium-xl, 3rem);
        }
      }
    }
  }
}

@layer variants {
  .container-button.v-sticky {
    height: 100%;
    align-items: unset;
    z-index: 2;
    .cta {
      position: sticky;
      top: calc(100vh - 3rem - 3rem);
    }
  }

  .media-container[data-animate-card]
    .container-card-horizontal
    .product-card-horizontal {
    opacity: 0;
    transform: translateY(1.25rem);
    transition:
      opacity 1.2s ease,
      transform 1.2s ease;
    transition-delay: var(--card-delay, 2s);
  }

  .media-container[data-animate-card].is-visible
    .container-card-horizontal
    .product-card-horizontal {
    opacity: 1;
    transform: translateY(0);
  }
}
/* END_BLOCK:_media-container */

/* START_BLOCK:_overtitle (INDEX:91) */
@layer reset, base, components, variants ,settings;

  @layer components {
    .overtitle {
      color: var(--Content-secondary, #4d4d4d);

      /* label-small/regular */
      font-family: var(--font-body);
      font-size: var(--typography-label-s-regular-font-size, 0.75rem);
      font-style: normal;
      font-weight: var(--typography-label-s-regular-font-weight, 400);
      line-height: var(--typography-label-s-regular-line-height, 0.875rem); /* 116.667% */
      letter-spacing: var(--typography-label-s-regular-letter-spacing, 0);
    }
  }
/* END_BLOCK:_overtitle */

/* START_BLOCK:_product-card-list (INDEX:92) */
/* ⚠ Auto-generated from src/blocks/_product-card-list/_product-card-list.css — do not edit directly. */
/* src/blocks/_product-card-list/_product-card-list.css */
/* Les feuilles partagées (link, cta, gallery_list, algolia-filter-shared) sont
   servies par assets/theme-shared.css — voir src/assets/theme-shared.css.
   Ne pas les réimporter ici : preprocessCSS les recopierait dans ce bloc. */
/* END_BLOCK:_product-card-list */

/* START_BLOCK:_product-card (INDEX:93) */
/* ⚠ Auto-generated from src/blocks/_product-card/_product-card.css — do not edit directly. */
/* src/blocks/_product-card/_product-card.css */
/* END_BLOCK:_product-card */

/* START_BLOCK:_subtitle (INDEX:98) */
@layer reset, base, components, variants ,settings;

  @layer components {
    .subtitle {
      color: var(--Content-secondary, #4d4d4d);
      padding-bottom: var(--spacings-small-m, 0.5rem);

      /* label-small/regular */
      font-family: var(--font-body);
      font-size: var(--typography-label-s-regular-font-size, 0.75rem);
      font-style: normal;
      font-weight: var(--typography-label-s-regular-font-weight, 400);
      line-height: var(--typography-label-s-regular-line-height, 0.875rem); /* 116.667% */
      letter-spacing: var(--typography-label-s-regular-letter-spacing, 0);
    }
  }
/* END_BLOCK:_subtitle */

/* START_BLOCK:_title (INDEX:99) */
@layer reset, base, components, variants ,settings;

  @layer components {
    .title {
      color: var(--Content-primary, #000);

      /* headline-medium/regular */
      font-family: var(--font-headline);
      font-size: var(--typography-headline-m-font-size, 2rem);
      font-style: normal;
      font-weight: var(--typography-headline-m-font-weight, 400);
      line-height: var(--typography-headline-m-line-height, 2.375rem); /* 118.75% */
      letter-spacing: var(--typography-headline-m-letter-spacing, 0);
    }
  }
/* END_BLOCK:_title */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:audio-player (INDEX:108) */
/* ⚠ Auto-generated from src/snippets/audio-player/audio-player.css — do not edit directly. */
/* src/snippets/audio-player/audio-player.css */
@layer components {
  c-audio-player {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }

  /* Play / Pause button */
  .audio-player__play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    display: grid;
  }

  .audio-player--dark .audio-player__play-btn {
    color: #000;
  }

  .audio-player--light .audio-player__play-btn {
    color: #fff;
  }

  .audio-player__play-btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 2px;
  }

  .audio-player__icon {
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    grid-row: 1/-1;
    grid-column: 1/-1;

    &[hidden] {
      visibility: hidden;
      pointer-events: none;
    }

    & svg {
      width: 1.5rem;
      height: 1.5rem;
      pointer-events: none;
    }
  }

  /* Waveform */
  .audio-player__waveform {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    line-height: 0;
  }

  .audio-player__waveform-track,
  .audio-player__waveform-fill {
    display: flex;
    align-items: center;
  }

  .audio-player__waveform-fill {
    position: absolute;
    inset: 0;
    clip-path: inset(0 calc(100% - var(--progress, 0%)) 0 0);
  }

  .audio-player--dark .audio-player__waveform-track {
    color: rgba(0, 0, 0, 0.25);
  }

  .audio-player--dark .audio-player__waveform-fill {
    color: #000;
  }

  .audio-player--light .audio-player__waveform-track {
    color: rgba(255, 255, 255, 0.25);
  }

  .audio-player--light .audio-player__waveform-fill {
    color: #fff;
  }

  /* Time display */
  .audio-player__time {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  .audio-player--dark .audio-player__time {
    color: #000;
  }

  .audio-player--light .audio-player__time {
    color: #fff;
  }

  .audio-player__time-sep {
    opacity: 0.4;
  }

  /* Track info */
  .audio-player__info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  .audio-player__title {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
  }

  .audio-player__artist {
    font-size: 0.6875rem;
    opacity: 0.6;
    line-height: 1.2;
  }

  .audio-player--dark .audio-player__title,
  .audio-player--dark .audio-player__artist {
    color: #000;
  }

  .audio-player--light .audio-player__title,
  .audio-player--light .audio-player__artist {
    color: #fff;
  }
}
/* END_SNIPPET:audio-player */

/* START_SNIPPET:booxi-countdown (INDEX:110) */
/* ⚠ Auto-generated from src/snippets/booxi-countdown/booxi-countdown.css — do not edit directly. */
/* src/snippets/booxi-countdown/booxi-countdown.css */
@layer components {
  c-booxi-countdown {
    display: block;
  }

  c-booxi-countdown[hidden] {
    display: none;
  }
}
/* END_SNIPPET:booxi-countdown */

/* START_SNIPPET:card-product (INDEX:119) */
/* no inject */
  /* Le CSS de ce composant vit dans src/shared/ et est servi par
   assets/theme-shared.css : il était recopié dans plusieurs blocs via @import.
   Le marqueur "no inject" empêche le pipeline de re-remplir ce bloc. */
/* END_SNIPPET:card-product */

/* START_SNIPPET:cart-limit-error (INDEX:126) */
/* ⚠ Auto-generated from src/snippets/cart-limit-error/cart-limit-error.css — do not edit directly. */
/* src/snippets/cart-limit-error/cart-limit-error.css */
@layer reset, base, components, variants;

@layer components {
  .cart-limit-error {
    width: 100%;
    position: relative;
  }

  .cart-limit-error_message {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: var(--spacings-small-l);
    color: var(--color-white, #fff);
    text-align: center;
    background: var(--Background-quaternary, #000);
    transform: translateY(0);
    transition:
      transform 0.3s ease,
      margin-bottom 0.3s ease;
    opacity: 1;
    margin-bottom: 0;

    @media screen and (max-width: 768px) {
      padding: var(--spacings-small-l) var(--spacings-small-xl);
      transition:
        transform 0.3s ease,
        margin-bottom 0.3s ease,
        opacity 0.3s ease;
    }

    p {
      flex: 1;
      padding: 0 var(--spacings-medium-s);
    }

    &.hidden {
      opacity: 0;
      transform: translateY(-100%);
      overflow: hidden;
      pointer-events: none;
      margin-bottom: -1.5rem;
      transition:
        transform 0.3s ease,
        margin-bottom 0.3s ease,
        opacity 0s 0.3s ease;

      @media screen and (max-width: 768px) {
        margin-bottom: -3.5rem;
        transition:
          transform 0.3s ease,
          margin-bottom 0.3s ease,
          opacity 0.3s ease;
      }
    }
  }

  .cart-limit-error_message_button {
    position: absolute;
    right: var(--spacings-small-l);
    color: inherit;
    width: 1.5rem;
    height: 1.5rem;
  }
}

@layer variants {
  .body--product {
    .cart-limit-error {
      @media screen and (max-width: 768px) {
        position: absolute;
        z-index: 3;
        padding-top: 4.25rem;
        display: block;
      }
    }
  }
}
/* END_SNIPPET:cart-limit-error */

/* START_SNIPPET:cart-packaging-jp-hk (INDEX:127) */
/* ⚠ Auto-generated from src/snippets/cart-packaging-jp-hk/cart-packaging-jp-hk.css — do not edit directly. */
/* src/snippets/cart-packaging-jp-hk/cart-packaging-jp-hk.css */
/*
 * Emballage cadeau — marchés JP/HK. Le tronc commun est importé DANS la couche
 * `components`, là où vivait déjà l'intégralité de ce fichier.
 *
 * Ne restent ici que les règles propres au champ multi-ligne et à la grille des
 * trois lignes de message.
 */

@layer components {

/*
 * Tronc commun du CSS de l'emballage cadeau — 34 règles identiques au caractère
 * près entre le marché standard (EMEA/AMS) et JP/HK.
 *
 * Volontairement SANS `@layer` : chaque variante l'importe avec la couche qui
 * est déjà la sienne — `@import … layer(components)` côté JP/HK, import nu côté
 * standard, qui n'a jamais été layered. Envelopper ce fichier changerait la
 * cascade de l'un des deux, ce que cette déduplication ne doit pas faire.
 *
 * N'ajouter ici que des règles valables pour les deux marchés. Ce qui diverge
 * reste dans le fichier de la variante, après l'import.
 */

.cart__packaging-container {
  display: block;
  margin: var(--spacings-large-s, 4rem) 0;
}

.cart__packaging-title {
  margin-bottom: var(--spacings-small-xl, 1rem);
}

.cart__packaging-description {
  line-height: 1.125rem;
  width: 40.625rem;
  max-width: 100%;
}

.cart__packaging-product-container {
  margin-top: calc(var(--spacing) * 15);
  transition: 0.4s;
}

.cart__packaging-product-container.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.cart__packaging-product-content {
  width: 26.875rem;
  max-width: 100%;
}

.cart__packaging-product-image {
  width: 5rem;
  min-width: 5rem;
}

.cart__packaging-product-image .placeholder-svg, .cart__packaging-product-img {
  width: 100%;
  aspect-ratio: 3/4;
}

.radio-style-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.radio-style-label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;

  width: 0.75rem;
  height: 0.75rem;
  min-width: 0.75rem;
  min-height: 0.75rem;
  border: 1px solid var(--color-black);
  border-radius: 100%;
}

.radio-style-checkbox:checked ~ .radio-style-label::before {
  content: '';
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-black);
}

.radio-style-label-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacings-medium-xs, 1.25rem);
  cursor: pointer;
}

.cart__packaging-product-description {
  color: var(--color-content-secondary);
}

.cart__packaging-message-container {
  margin-top: var(--spacings-medium-l, 2.5rem);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  transform: translateY(-0.625rem);
}

.cart__packaging-message-container.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.cart__packaging-message-container[data-packaging-message] {
  display: none;
}

.cart__packaging-message-container[data-packaging-message].show {
  display: block !important;
}

.cart__packaging-message-header {
  margin-bottom: var(--spacings-medium-s, 1.5rem);
}

.cart__packaging-message-title {
  margin-bottom: var(--spacings-small-xl, 1rem);
}

.cart__packaging-message-quantity-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacings-medium-xs, 1.25rem);
}

.cart__packaging-message-error-container {
  display: none;
  padding-top: var(--spacings-small-m, 0.5rem);
  color: var(--color-rouge);
}

.cart__packaging-message-error-container.error {
  display: flex;
  align-items: center;
  gap: var(--spacings-small-s, 0.25rem);
}

.cart__packaging-message-remaining-characters {
  display: flex;
  align-items: center;
  gap: var(--spacings-small-s, 0.25rem);
}

.cart__packaging-message-remaining-icon {
  margin-top: var(--spacings-small-xs, 0.125rem);
}

.cart__packaging-message-remaining-characters {
  margin-top: var(--spacings-small-m, 0.5rem);
}

.cart__packaging-message-remaining-characters-text, .cart__packaging-message-remaining-characters-count {
  color: var(--color-content-secondary);
}

.cart__packaging-message-button-container {
  text-align: center;
}

.cart__packaging-message-button-container .button {
  margin-top: var(--spacings-medium-xs, 1.25rem);
}

.cart__packaging-message-quantity-container .cart__item-quantity-input {
  min-width: 1.75rem;
  width: 1.75rem;
  height: 1.5625rem;
  margin: 0 var(--spacings-medium-s, 1.5rem);
}

.cart__item-quantity-button-icon {
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.cart__item-quantity-button-icon:hover:not([style*='opacity: 0.5']) {
  opacity: 0.7;
}

.cart__packaging-message-note-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacings-small-xl, 1rem);
  width: 100%;
}

.cart__packaging-message-note-text {
  width: 100%;
}

.cart__packaging-message-note-button {
  margin-top: 0;
  margin-bottom: 0;
}
}

@layer components {
  .cart__packaging-message-text {
          font-family: var(--font-body);
          display: inline-block;
          font-size: 0.75rem;
          line-height: 1rem;
          font-weight: 400;
          color: var(--color-content-secondary);
          text-transform: uppercase;
          margin-bottom: var(--spacings-small-s, 0.25rem);
      }

  .cart__packaging-message-content {
          display: grid;
          gap: var(--spacings-small-xl, 1rem);
  
      }

  .cart__packaging-message-input-text {
          resize: none;
          padding: var(--spacings-small-l, 0.75rem);
  
          border: 0.8px solid var(--Gris-Nacre, #e6e5e5);
          width: 100%;
          outline: none;
          font-size: 0.75rem;
          font-weight: 300;
          color: #000;
      }
}
/* END_SNIPPET:cart-packaging-jp-hk */

/* START_SNIPPET:cart-packaging (INDEX:128) */
/* ⚠ Auto-generated from src/snippets/cart-packaging/cart-packaging.css — do not edit directly. */
/* src/snippets/cart-packaging/cart-packaging.css */
/*
 * Emballage cadeau — marchés EMEA/AMS. Le tronc commun vit dans
 * shared/cart-packaging. Import nu : ce fichier n'a jamais été sous `@layer`,
 * et cette déduplication ne change pas sa cascade.
 *
 * Ne restent ici que les règles propres au champ mono-ligne du marché standard.
 */
/*
 * Tronc commun du CSS de l'emballage cadeau — 34 règles identiques au caractère
 * près entre le marché standard (EMEA/AMS) et JP/HK.
 *
 * Volontairement SANS `@layer` : chaque variante l'importe avec la couche qui
 * est déjà la sienne — `@import … layer(components)` côté JP/HK, import nu côté
 * standard, qui n'a jamais été layered. Envelopper ce fichier changerait la
 * cascade de l'un des deux, ce que cette déduplication ne doit pas faire.
 *
 * N'ajouter ici que des règles valables pour les deux marchés. Ce qui diverge
 * reste dans le fichier de la variante, après l'import.
 */
.cart__packaging-container {
  display: block;
  margin: var(--spacings-large-s, 4rem) 0;
}
.cart__packaging-title {
  margin-bottom: var(--spacings-small-xl, 1rem);
}
.cart__packaging-description {
  line-height: 1.125rem;
  width: 40.625rem;
  max-width: 100%;
}
.cart__packaging-product-container {
  margin-top: calc(var(--spacing) * 15);
  transition: 0.4s;
}
.cart__packaging-product-container.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.cart__packaging-product-content {
  width: 26.875rem;
  max-width: 100%;
}
.cart__packaging-product-image {
  width: 5rem;
  min-width: 5rem;
}
.cart__packaging-product-image .placeholder-svg, .cart__packaging-product-img {
  width: 100%;
  aspect-ratio: 3/4;
}
.radio-style-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.radio-style-label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;

  width: 0.75rem;
  height: 0.75rem;
  min-width: 0.75rem;
  min-height: 0.75rem;
  border: 1px solid var(--color-black);
  border-radius: 100%;
}
.radio-style-checkbox:checked ~ .radio-style-label::before {
  content: '';
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-black);
}
.radio-style-label-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacings-medium-xs, 1.25rem);
  cursor: pointer;
}
.cart__packaging-product-description {
  color: var(--color-content-secondary);
}
.cart__packaging-message-container {
  margin-top: var(--spacings-medium-l, 2.5rem);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  transform: translateY(-0.625rem);
}
.cart__packaging-message-container.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.cart__packaging-message-container[data-packaging-message] {
  display: none;
}
.cart__packaging-message-container[data-packaging-message].show {
  display: block !important;
}
.cart__packaging-message-header {
  margin-bottom: var(--spacings-medium-s, 1.5rem);
}
.cart__packaging-message-title {
  margin-bottom: var(--spacings-small-xl, 1rem);
}
.cart__packaging-message-quantity-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacings-medium-xs, 1.25rem);
}
.cart__packaging-message-error-container {
  display: none;
  padding-top: var(--spacings-small-m, 0.5rem);
  color: var(--color-rouge);
}
.cart__packaging-message-error-container.error {
  display: flex;
  align-items: center;
  gap: var(--spacings-small-s, 0.25rem);
}
.cart__packaging-message-remaining-characters {
  display: flex;
  align-items: center;
  gap: var(--spacings-small-s, 0.25rem);
}
.cart__packaging-message-remaining-icon {
  margin-top: var(--spacings-small-xs, 0.125rem);
}
.cart__packaging-message-remaining-characters {
  margin-top: var(--spacings-small-m, 0.5rem);
}
.cart__packaging-message-remaining-characters-text, .cart__packaging-message-remaining-characters-count {
  color: var(--color-content-secondary);
}
.cart__packaging-message-button-container {
  text-align: center;
}
.cart__packaging-message-button-container .button {
  margin-top: var(--spacings-medium-xs, 1.25rem);
}
.cart__packaging-message-quantity-container .cart__item-quantity-input {
  min-width: 1.75rem;
  width: 1.75rem;
  height: 1.5625rem;
  margin: 0 var(--spacings-medium-s, 1.5rem);
}
.cart__item-quantity-button-icon {
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.cart__item-quantity-button-icon:hover:not([style*='opacity: 0.5']) {
  opacity: 0.7;
}
.cart__packaging-message-note-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacings-small-xl, 1rem);
  width: 100%;
}
.cart__packaging-message-note-text {
  width: 100%;
}
.cart__packaging-message-note-button {
  margin-top: 0;
  margin-bottom: 0;
}
.cart__packaging-message-text {
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  color: var(--color-content-secondary);
  text-transform: uppercase;
  margin-bottom: var(--spacings-small-s, 0.25rem);
}
.cart__packaging-message-input-text {
  padding: 0.75rem 0.625rem 0.75rem 0.9375rem;
  border: 0.8px solid var(--Gris-Nacre, #e6e5e5);
  width: 100%;
  outline: none;
  font-size: 0.75rem;
  font-weight: 300;
  color: #000;
}
/* END_SNIPPET:cart-packaging */

/* START_SNIPPET:cart-samples (INDEX:129) */
/* ⚠ Auto-generated from src/snippets/cart-samples/cart-samples.css — do not edit directly. */
/* src/snippets/cart-samples/cart-samples.css */
@layer components {
  .cart__samples {
    margin-top: var(--spacings-large-m, 5rem);
  }

  /* Message d'erreur affiche en tete de la liste du panier */

  .cart__samples-header {
    margin-bottom: var(--spacings-medium-xs, 1.25rem);
  }

  .cart__samples-products-container {
    width: 18.4375rem;
    margin: auto;
  }

  .cart__samples-products {
    display: flex;
    gap: var(--spacings-medium-xs, 1.25rem);
  }

  .cart__samples-products-item {
    width: 100%;
    height: max-content;
    border: 1px solid var(--color-blanc-montaigne);
  }

  .cart__samples-products-item-image {
    background-color: var(--color-white-100, #f8f8f8);
    width: 100%;
    aspect-ratio: 3/4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacings-small-s, 0.25rem);
    cursor: pointer;
    background-color: var(--color-white-100, #f8f8f8);
  }

  .cart__samples-products-item-image svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .cart__samples-products-item-title {
    padding: var(--spacings-small-xl, 1rem) var(--spacings-small-m, 0.5rem);
    font-size: 0.875rem;
    line-height: 1.125rem;
    font-weight: 400;
  }

  .cart__samples-button-container .button {
    margin-top: var(--spacings-medium-xs, 1.25rem);
  }

  .cart__samples-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9;
  }

  /* Hauteur en dvh : sur iOS Safari, 100vh vaut la hauteur "large viewport"
     (barres retractees), ce qui poussait le bas du panneau — donc le CTA de
     validation — sous la barre d'outils du navigateur. */

  .cart__samples-popup {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 100%;
    width: 28.75rem;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    transition: left 0.3s ease-in-out;

    background-color: var(--color-white);
  }

  .cart__samples-popup-overlay.active {
    display: block;
  }

  .cart__samples-popup.active {
    left: calc(100% - 28.75rem);
  }

  .cart__samples-popup-header {
    flex: 0 0 auto;
    border-bottom: 1px solid var(--color-gris-nacre);
    padding: var(--spacings-small-xl, 1rem) var(--spacings-medium-xs, 1.25rem);
  }

  .cart__samples-popup-close-container {
    display: flex;
    justify-content: flex-end;
  }

  .cart__samples-popup-close {
    cursor: pointer;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cart__samples-popup-close svg {
    width: 1rem;
    height: 1rem;
  }

  .cart__samples-popup-title {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.25rem;
    font-weight: 300;
    text-transform: uppercase;
    text-align: left;
    margin-top: var(--spacings-small-m, 0.5rem);
    color: #6d6d6d;
  }

  /* La liste occupe l'espace restant : plus de hauteur calculee en dur, donc le
     pied de panneau ne peut plus etre pousse hors ecran quand le libelle du CTA
     passe sur deux lignes (JP) ou quand la hauteur de viewport change. */

  .cart__samples-popup-products-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: var(--spacings-small-xl, 1rem) var(--spacings-medium-xs, 1.25rem)
      var(--spacings-medium-l, 2.5rem);
  }

  .cart__samples-popup-button-container {
    flex: 0 0 auto;
    padding: var(--spacings-small-xl, 1rem) var(--spacings-medium-xs, 1.25rem);
    padding-bottom: calc(
      var(--spacings-small-xl, 1rem) + env(safe-area-inset-bottom, 0rem)
    );
    background-color: var(--color-white);
    border-top: 1px solid var(--color-gris-nacre);
  }

  .cart__samples-popup-button-container .button {
    margin-top: 0;
  }

  .cart__samples-popup-products {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacings-medium-m, 2rem) var(--spacings-medium-xs, 1.25rem);
  }

  .cart__samples-popup-product {
    width: calc(50% - 0.625rem);
    cursor: pointer;
  }

  .cart__samples-popup-product.disabled {
    cursor: initial;
  }

  .cart__samples-popup-product-content {
    padding-top: var(--spacings-small-xl, 1rem);
  }

  .cart__samples-popup-product-image-container {
    position: relative;
    aspect-ratio: 3/4;
    line-height: 0;
    border: 1px solid var(--color-white);
  }

  .cart__samples-popup-product.active img {
    width: calc(100% - 0.0625rem);
  }

  .cart__samples-popup-product.active
    .cart__samples-popup-product-image-container {
    border: 1px solid var(--color-black);
  }

  .cart__samples-popup-product.disabled
    .cart__samples-popup-product-image-container {
    opacity: 0.5;
  }

  .cart__samples-popup-product-title {
    font-family: var(--font-headline);
    font-size: 0.875rem;
    line-height: 1.125rem;
    font-weight: 400;
  }

  .cart__samples-popup-product-description {
    font-family: var(--font-body);
    font-size: 0.75rem;
    line-height: 1.125rem;
    font-weight: 300;
    color: var(--color-content-secondary);
  }

  .cart__samples-popup-product-check-container {
    display: none;
    width: 1.875rem;
    height: 1.875rem;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 1;
    top: 0.75rem;
    right: 0.75rem;
    background-color: var(--color-white);
    border-radius: 50%;
  }

  .cart__samples-popup-product-check-container svg {
    width: 1.125rem;
    height: 1.125rem;
  }

  .cart__samples-popup-product.active
    .cart__samples-popup-product-check-container {
    display: flex;
  }

  @media screen and (max-width: 1024px) {
    .cart__samples-products {
      gap: calc(var(--spacing) * 5);
    }
    .cart__samples-products-container {
      width: 13.125rem;
    }
    .cart__samples-button-container .button {
      margin-top: var(--spacings-small-xl, 1rem);
    }
  }

  @media screen and (max-width: 460px) {
    .cart__samples-popup {
      width: 100%;
    }
    .cart__samples-popup.active {
      left: 0;
    }
  }
}
/* END_SNIPPET:cart-samples */

/* START_SNIPPET:cart-total (INDEX:130) */
@layer reset, base, components, variants;

  @layer components {
    .cart__engraving_info {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 1rem 0;
      @media screen and (min-width: 1024px) {
        padding: 2.5rem 0;
      }
    }
  }
/* END_SNIPPET:cart-total */

/* START_SNIPPET:category-card (INDEX:131) */
/* ⚠ Auto-generated from src/snippets/category-card/category-card.css — do not edit directly. */
/* src/snippets/category-card/category-card.css */
/*
  Ratio de l'image : la valeur vient de --card-ratio, posée en style inline par
  snippets/category-card.liquid. Remplace un bloc style Liquid qui était réémis
  à l'identique à chaque itération de boucle.

  Reste dans @layer settings pour conserver la force qu'avait la règle
  #shopify-block-… d'origine face aux règles de composant.

  Pas de tag Liquid ici : ce commentaire part dans un bloc stylesheet, qui doit
  rester du CSS statique (theme-check StaticStylesheetAndJavascriptTags).
*/
@layer settings {
  c-category-card img {
    aspect-ratio: var(--card-ratio);
  }
}

@layer components {
  c-category-card {
    display: grid;
    height: 100%;
    grid-template-rows: auto 1fr;

    .media-container {
      align-self: flex-start;
    }
    .content-container {
      --background-color: transparent;
      display: grid;
      text-align: center;
      justify-content: center;
      padding: var(--spacings-small-xl, 1rem);
      height: 100%;

      .inside {
        display: grid;
        height: 100%;
        gap: var(--spacings-small-m, 0.5rem);
        grid-template-rows: 1fr auto;

        .inside__top {
          display: grid;
          gap: var(--spacings-small-m, 0.5rem);
          align-self: flex-start;
          .title {
            color: var(--Content-primary, #000);
            /* headline-medium/regular */
            font-family: var(--font-headline);
            font-size: var(--typography-headline-m-font-size, 2rem);
            font-style: normal;
            font-weight: var(--typography-headline-m-font-weight, 400);
            line-height: var(--typography-headline-m-line-height, 2.375rem);
            /* 118.75% */
            letter-spacing: var(--typography-headline-m-letter-spacing, 0);
          }

          .description {
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            line-clamp: 2;
            -webkit-line-clamp: 2;
            align-self: stretch;
          }
          .category-card__product-count {
            padding-block-start: 0.5rem;
          }
        }
        .inside__bottom {
          display: grid;
          gap: var(--spacings-small-m, 0.5rem);
          align-self: flex-end;
        }
      }
    }
  }
}
/* END_SNIPPET:category-card */

/* START_SNIPPET:collections-list (INDEX:133) */
/* ⚠ Auto-generated from src/snippets/collections-list/collections-list.css — do not edit directly. */
/* src/snippets/collections-list/collections-list.css */
@layer components {
  .collections-list {
    margin: var(--spacings-medium-xl, 3.5rem) auto;
  }

  .collections-list__title,
  .collections-list__description {
    margin-bottom: var(--spacings-small-m, 0.5rem);
  }

  .collections-list__title {
    font-family: var(--font-headline);
    font-size: 2rem;
    line-height: 2.375rem;
    font-weight: 400;
    letter-spacing: 0;
  }

  .collections-list__collections-titles-container {
    padding: var(--spacings-medium-s, 1.5rem) var(--spacings-small-xl, 1rem)
      var(--spacings-small-m, 0.5rem);
    width: fit-content;
    margin: 0 auto;
    display: flex;
    gap: var(--spacings-medium-s, 1.5rem);
    justify-content: left;
    align-items: center;
    flex-wrap: nowrap;
    overflow: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }

  .collections-list__collection-title-container {
    user-select: none;
  }

  .collections-list__collection-title {
    position: relative;
    cursor: pointer;
  }

  .collections-list__collection-title.active::after {
    content: '';
    position: absolute;
    top: calc(100% + 0.375rem);
    left: 0;
    right: 0;
    width: 100%;
    height: 0.05rem;
    background-color: var(--color-black-200);
  }

  .collections-list__collection-container {
    position: relative;
    display: none;
  }

  .collections-list__collection-container.active {
    display: block;
  }

  .collections-list__header {
    padding: 0 var(--spacings-small-xl, 1rem);
  }

  .collections-list__content {
    padding-top: var(--spacings-medium-s, 1.5rem);
    overflow: hidden;
  }

  /* ── Embla ──────────────────────────────────────────────────── */

  .collections-list__embla {
    position: relative;
  }

  .collections-list__embla .embla__viewport {
    overflow: hidden;
  }

  /* embla__container */
  .collections-list__products {
    display: flex;
    touch-action: pan-y pinch-zoom;
    gap: 0.5rem;
    padding-inline: var(--spacings-small-xl, 1rem);

    @media screen and (min-width: 1024px) {
      gap: var(--spacings-small-xl, 1rem);
      padding-inline: 0;
    }
  }

  /* embla__slide */
  .collections-list__product-item {
    flex: 0 0 16.0625rem;
    min-width: 0;
    height: auto;
    display: flex;

    @media screen and (min-width: 1024px) {
      flex: 0 0 20.75rem;
    }
  }

  .collections-list__product-item-container {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  /* progress bar */
  .collections-list__embla .embla__progress {
    margin-top: var(--spacings-small-xl, 1rem);
    margin-inline: auto;
    width: 15rem;
    max-width: 90%;
    height: 0.0625rem;
    background: var(--State-Disable, #c8c8c8);
    border-radius: var(--radius-small, 2px);
    overflow: hidden;
  }

  .collections-list__embla .embla__progress__bar {
    height: 100%;
    width: 100%;
    background: var(--color-black, #000);
    border-radius: var(--radius-small, 2px);
    will-change: transform;
    transition: transform 0.3s ease;
  }

  /* prev / next buttons */
  .collections-list__embla .container_embla__prev,
  .collections-list__embla .container_embla__next {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 6.25rem;
    height: 100%;
    cursor: none;

    @media screen and (min-width: 1024px) {
      display: grid;
    }

    &[data-disabled] {
      opacity: 0;
      pointer-events: none;
    }
  }

  .collections-list__embla .container_embla__prev {
    left: 0;
    justify-content: flex-start;
  }

  .collections-list__embla .container_embla__next {
    right: 0;
    justify-content: flex-end;
  }

  .collections-list__embla .embla__prev,
  .collections-list__embla .embla__next {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full, 999px);
    border: 1px solid var(--Border-primary, #000);
    background: var(--Background-primary, #fff);
    cursor: pointer;
  }

  /* ── Responsive ─────────────────────────────────────────────── */

  @media screen and (max-width: 1024px) {
    .collections-list__title {
      font-size: 1.75rem;
      line-height: 2.125rem;
    }

    .collections-list__collections-titles-container {
      width: 100%;
    }

    .collections-list__title-container {
      padding-bottom: var(--spacings-medium-xs, 1.25rem);
    }
  }
}
/* END_SNIPPET:collections-list */

/* START_SNIPPET:container-video (INDEX:136) */
@layer reset, base, components, variants ,settings;

  @layer components {
    .container-video {
      position: relative;
      display: grid;
      video {
        width: 100%;
        height: auto;
        max-width: 100%;
        object-fit: cover;
      }
    }
    .video-desktop {
      display: none;
      @media screen and (min-width: 1024px) {
        display: grid;
        align-self: center;
      }
    }
    .video-mobile {
      display: grid;
      @media screen and (min-width: 1024px) {
        display: none;
      }
    }
    .video-controls {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-between;
      pointer-events: none;
      z-index: 2;
    }
    .video-pause-hit-area {
      position: absolute;
      inset: 0;
      z-index: 1;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;

      &[hidden] {
        display: none;
      }
    }
    .video-btn {
      pointer-events: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 3.25rem;
      height: 3.25rem;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      color: #fff;
      display: grid;
      align-items: center;
      justify-content: center;

      &[hidden] {
        display: none;
      }
    }
    .video-btn__icon {
      grid-column: 1/-1;
      grid-row: 1/-1;
      display: flex;
      align-items: center;
      justify-content: center;
      svg {
        width: 1.5rem;
        height: 1.5rem;
      }
      &[hidden] {
        pointer-events: none;
        visibility: hidden;
      }
    }
  }

  @layer variants {
    /*
     * `v-fill` — la vidéo remplit sa cellule au lieu de se caler sur sa hauteur
     * intrinsèque. À passer via `extra_class` quand l'appelant impose déjà une
     * hauteur (un `aspect-ratio` sur le conteneur, typiquement).
     *
     * En `@layer variants` et non par spécificité : le thème déclare partout
     * `@layer reset, base, components, variants, settings`, donc `variants` bat
     * `components` quels que soient la spécificité et l'ordre source. Un appelant
     * qui tenterait de surcharger `.container-video video { height: auto }`
     * ci-dessus depuis son propre `@layer components` se retrouverait à égalité
     * de spécificité, départagé par un ordre source non garanti.
     */
    .container-video.v-fill {
      height: 100%;
      min-height: 0;
      align-self: stretch;

      .video-desktop,
      .video-mobile {
        height: 100%;
        min-height: 0;
        align-self: stretch;
      }

      video {
        height: 100%;
        object-fit: cover;
      }
    }
  }
/* END_SNIPPET:container-video */

/* START_SNIPPET:countdown (INDEX:137) */
/* ⚠ Auto-generated from src/snippets/countdown/countdown.css — do not edit directly. */
/* src/snippets/countdown/countdown.css */
@layer components {
  c-countdown {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    padding: var(--spacings-small-xl, 1rem) 0;
  }

  .countdown__item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .countdown__label {
    min-height: 0.875rem;
  }

  .countdown__end-message {
    text-align: center;
  }

  [data-show-seconds='false'] .countdown__item--seconds,
  [data-show-seconds='false'] .countdown__separator--seconds {
    display: none;
  }
}
/* END_SNIPPET:countdown */

/* START_SNIPPET:cta (INDEX:141) */
@layer components {
  }
  @layer variants {
    .cta.v-fit {
      width: fit-content;
      justify-self: center;
    }
    .cta.v-primary.v-margin-top {
      margin-top: var(--spacings-medium-m, 2rem);
    }
    .cta.v-secondary.v-margin-top {
      margin-top: var(--spacings-medium-s, 1.5rem);
    }
    .cta.v-primary {
      position: relative;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      &.v-small {
        height: var(--spacings-medium-l, 2.5rem);
        padding: 0 var(--spacings-small-m, 0.5rem);
        .cta--label {
          gap: var(--spacings-small-xs, 0.125rem);

          font-family: var(--font-headline);
          font-size: var(--typography-label-s-alternatif-font-size, 0.875rem);
          font-style: normal;
          font-weight: var(--typography-label-s-alternatif-font-weight, 400);
          line-height: var(--typography-label-s-alternatif-line-height, 1rem); /* 114.286% */
          letter-spacing: var(--typography-label-s-alternatif-letter-spacing, 0);
        }
      }
      &.v-large {
        height: var(--spacings-medium-xl, 3rem);
        padding: 0 var(--spacings-medium-s, 1.5rem);
        .cta--label {
          gap: var(--spacings-small-s, 0.25rem);
          font-style: normal;
          font-size: var(--typography-label-m-alternatif-font-size, 1rem);
          font-family: var(--font-headline);
          font-weight: var(--typography-label-m-alternatif-font-weight, 400);
          line-height: var(--typography-label-m-alternatif-line-height, 1.125rem);
          letter-spacing: var(--typography-label-m-alternatif-letter-spacing, 0);
        }
      }
      &.v-light {
        color: var(--Content-primary, #000);
        border: var(--border-width-extra-small, 1px) solid currentColor;
        background: var(--Background-primary, #fff);
        transition: all 0.4s ease;

        &:after {
          content: '';
          position: absolute;
          left: 0;
          bottom: 0;
          background: currentColor;
          width: 100%;
          height: 0.125rem;
          clip-path: inset(0 0 0 0);
          transition: all 0.4s ease;
        }
        &:hover,
        &:focus {
          &:after {
            clip-path: inset(100% 0 0 0);
          }
        }
        &:active {
          color: var(--State-Pressed, #717171);
        }
        &:disabled,
        &.is-form-disabled {
          color: var(--State-Disable, #c8c8c8);
          cursor: initial;
          .cta--label {
            color: var(--State-Disable, #c8c8c8);
          }
        }
        .cta--label {
          color: var(--Content-primary, #000);
        }
      }
      &.v-dark {
        color: var(--Content-primary, #000);
        border: var(--border-width-extra-small, 1px) solid transparent;
        background: currentColor;
        transition: all 0.4s ease;

        &:active {
          color: var(--State-Pressed, #717171);
        }
        &:disabled,
        &.is-form-disabled {
          color: var(--State-Disable, #c8c8c8);
          cursor: initial;
        }
        .cta--label {
          color: #fff;
        }
      }
      .cta--label {
        display: flex;
        align-items: center;
      }
    }

    .cta.v-secondary {
      position: relative;
      display: inline-flex;
      justify-content: center;
      align-items: flex-start;
      gap: var(--spacings-small-s, 0.25rem);

      &.v-large {
        .cta--label {
          position: relative;
          display: flex;
          align-items: flex-start;
          gap: var(--spacings-small-s, 0.25rem);
          /* label-medium/alt */
          font-family: var(--font-headline);
          font-size: var(--typography-label-m-alternatif-font-size, 1rem);
          font-style: normal;
          font-weight: var(--typography-label-m-alternatif-font-weight, 400);
          line-height: var(--typography-label-m-alternatif-line-height, 1.125rem); /* 112.5% */
          letter-spacing: var(--typography-label-m-alternatif-letter-spacing, 0);
          padding-bottom: 0.25rem;

          &:after {
            transition: all 0.4s ease;

            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            background: currentColor;
            width: 100%;
            height: 0.0625rem;
          }
        }
      }
      &:active {
        color: var(--State-Pressed, #717171);
      }
      &:disabled,
      &.is-form-disabled {
        color: var(--State-Disable, #c8c8c8);
        cursor: initial;
      }
      &:hover,
      &:focus {
        .cta--label::after,
        .cta--label .cta--label__text::after {
          transform: translateY(-0.125rem);
        }
      }
      &.v-normal .cta--label {
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: var(--spacings-small-s, 0.25rem);
        /* label-medium/alt */
        font-family: var(--font-headline);
        font-size: var(--typography-label-m-alternatif-font-size, 1rem);
        font-style: normal;
        font-weight: var(--typography-label-m-alternatif-font-weight, 400);
        line-height: var(--typography-label-m-alternatif-line-height, 1.125rem); /* 112.5% */
        letter-spacing: var(--typography-label-m-alternatif-letter-spacing, 0);
        .cta--label__text {
          position: relative;
          padding-bottom: 0.25rem;

          &:after {
            transition: all 0.4s ease;

            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            background: currentColor;
            width: 100%;
            height: 0.0625rem;
          }
        }
      }
    }
    .cta.v-full {
      width: 100%;
    }
  }
/* END_SNIPPET:cta */

/* START_SNIPPET:description-main-products (INDEX:149) */
/* ⚠ Auto-generated from src/snippets/description-main-products/description-main-products.css — do not edit directly. */
/* src/snippets/description-main-products/description-main-products.css */
@layer components {
  .e-reservation {
    padding-top: 0.5rem;
  }
  .description-main-products {
    overflow: auto;
  }

  [data-render-related-product] {
    display: grid;
  }

  .buy-main-product {
    display: grid;
    width: 100%;
    padding-inline: 1rem;
    margin-block-start: 2.5rem;
    @media screen and (min-width: 1024px) {
      padding-inline: 0;
    }
  }
}

@layer variants {
  /* La zone d'achat porte déjà son écart haut (`margin-block-start: 2.5rem`
     ci-dessus) : le price button n'y ajoute pas le sien, sinon 40 + 32 = 72px.
     En `variants` parce que `.cta.button-primary.v-price` y vit aussi — une
     règle en `components` ne pourrait pas l'atteindre. */
  .buy-main-product .cta.button-primary.v-price {
    margin-block-start: 0;
  }

  .product-description__inside.v-desktop {
    display: none;

    @media screen and (min-width: 1024px) {
      display: grid;
    }
  }
}
/* END_SNIPPET:description-main-products */

/* START_SNIPPET:engraving-panel (INDEX:151) */
@layer reset, base, components, variants;

  @layer components {
    .engraving-panel__engraving_info {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      gap: 0.5rem;
      text-align: left;
    }

    .engraving-panel {
      position: fixed;
      top: 0;
      visibility: hidden;
      pointer-events: none;
      right: 0;
      width: 100%;
      height: 100vh;
      height: 100dvh;
      background: white;
      z-index: 20;
      display: grid;
      grid-template: auto 1fr auto / auto;
      transform: translateY(100%);
      transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
      background-color: white;

      overflow-y: scroll;

      &.is-open {
        transform: translateY(0);
        pointer-events: auto;
        visibility: visible;
        &:has([data-tab-id='tab-1']:checked) {
          .engraving-step--position {
            opacity: 1;
            pointer-events: auto !important;
            z-index: 2 !important;
          }
          .bottom-panel-1 {
            opacity: 1 !important;
            pointer-events: auto !important;
            z-index: 2 !important;
          }
        }
        &:has([data-template-nbr='1']:checked) {
          .engraving-step__content-1 {
            opacity: 1 !important;
            display: grid !important;
            pointer-events: auto;
            z-index: 2;
            input {
              display: inline-block;
              &[disabled] {
                display: none;
              }
            }
          }
        }
        &:has([data-template-nbr='2']:checked) {
          .engraving-step__content-2 {
            opacity: 1 !important;
            display: grid !important;
            pointer-events: auto;
            input {
              display: inline-block;
              &[disabled] {
                display: none;
              }
            }
          }
        }
        &:has([data-tab-id='tab-2']:checked) {
          .engraving-step--text {
            opacity: 1;
            display: grid !important;
            pointer-events: auto !important;
            z-index: 2 !important;
          }
          .bottom-panel-2 {
            position: relative;
            opacity: 1 !important;
            pointer-events: auto !important;
            z-index: 2 !important;
          }
        }
        &:has([data-tab-id='tab-3']:checked) {
          .engraving-step--fonts {
            display: grid;
            position: relative;
            opacity: 1;
            pointer-events: auto !important;
            z-index: 2 !important;
          }
          .bottom-panel-3 {
            position: relative;
            opacity: 1 !important;
            pointer-events: auto !important;
            z-index: 2 !important;
          }
        }
        &:has([data-tab-id='tab-4']:checked) {
          .engraving-step--colors {
            display: grid;
            position: relative;
            opacity: 1;
            pointer-events: auto !important;
            z-index: 2 !important;
          }
          .bottom-panel-4 {
            position: relative;
            opacity: 1 !important;
            pointer-events: auto !important;
            z-index: 2 !important;
          }
        }
      }

      @media screen and (min-width: 1024px) {
        grid-template: auto 1fr / auto;
        overflow-y: hidden;
      }
    }

    .engraving-panel__header {
      align-self: start;
      padding: var(--spacings-small-xl, 1rem) var(--spacings-medium-xs, 1.25rem);

      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: var(--spacings-small-xl, 1rem);
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
      z-index: 1;
      max-width: 90rem;
      width: 100%;
      position: sticky;
      top: 0;

      @media screen and (min-width: 1024px) {
        position: relative;
        top: unset;
        padding: var(--spacings-small-xl, 1rem) var(--spacings-medium-xs, 1.25rem);

        margin: 0 auto;
        box-shadow: none;
      }

      button {
        justify-self: flex-end;
        svg {
          width: 1.5rem;
          height: 1.5rem;
        }
      }
    }

    .engraving-panel__body {
      display: flex;
      flex-direction: column;

      max-width: 90rem;
      width: 100%;
      height: fit-content;

      @media screen and (min-width: 1024px) {
        max-height: calc(100svh - 3.75rem);
        display: grid;
        align-items: flex-start;
        grid-template: auto / 1fr 39.5625rem;
        gap: 0;
        margin: 0 auto;
      }

      .content {
        width: 100%;
        display: flex;
        flex-direction: column;

        @media screen and (min-width: 1024px) {
          display: grid;
          height: 100vh;
          max-height: none;
          overflow-y: auto;
        }
      }
    }

    .engraving-panel__3D-viewer {
      width: 100%;
      height: 40%;
      background-color: var(--Background-secondary, #fff);

      @media screen and (min-width: 1024px) {
        aspect-ratio: unset;
        position: sticky;
        height: calc(100svh - 3.75rem);
        top: 0;
      }
      .power-viewer-3603d-wrapper {
        height: 100% !important;
      }
      power-viewer-360 {
        display: block !important;
        width: 100% !important;
        height: 100%;
      }
      power-viewer-360-3d {
        display: block;
        height: 100%;
        width: 100%;
        aspect-ratio: 1;
      }
    }

    .engraving-tabs {
      position: sticky;
      top: 0;
      background-color: white;
      z-index: 10;
      display: flex;
      padding: var(--spacings-small-xl, 1rem) 0;
      justify-content: center;
      align-items: center;
      gap: var(--spacings-medium-s, 1.5rem);
      align-self: stretch;

      @media screen and (min-width: 1024px) {
        display: none;
      }
    }

    .engraving-tabs__item {
      position: relative;
      display: flex;
      height: var(--spacings-medium-s, 1.5rem);
      padding-bottom: var(--spacings-small-m, 0.5rem);
      justify-content: center;
      align-items: center;
      color: var(--Content-secondary, #4d4d4d);

      &.is-disabled {
        opacity: 0.5;
      }

      &:has(input:checked) {
        border-bottom: var(--border-width-extra-small, 1px) solid var(--Border-primary, #000);
        color: var(--Content-primary, #000);
        pointer-events: none;
      }

      &:has(input:focus-visible),
      label {
        font-family: var(--typography-label-m-regular-font-family, 'Apercu Pro');
        font-size: var(--typography-label-m-regular-font-size, 0.875rem);
        font-style: normal;
        font-weight: var(--typography-label-m-regular-font-weight, 400);
        line-height: var(--typography-label-m-regular-line-height, 1rem);
        letter-spacing: var(--typography-label-m-regular-letter-spacing, 0);
      }

      input {
        position: absolute;
        width: 0.0625rem;
        height: 0.0625rem;
        padding: 0;
        margin: -0.0625rem;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
      }
    }

    .engraving-panel__form-wrapper c-product-form form {
      padding: var(--spacings-small-xl, 1rem);
      display: grid;

      grid-template: 1fr / 1fr;

      @media screen and (min-width: 1024px) {
        overflow: visible;
        gap: var(--spacings-medium-l, 2.5rem);
        padding: var(--spacings-large-xs, 3.5rem) var(--spacings-large-l, 7.5rem) var(--spacings-medium-l, 2.5rem);
      }
    }
    c-product-form {
      -ms-overflow-style: none; /* IE and Edge */
      scrollbar-width: none; /* Firefox */
      &::-webkit-scrollbar {
        display: none;
      }
    }
    .engraving-step {
      display: grid;
      grid-column: 1/-1;
      grid-row: 1/-1;
      opacity: 0;
      pointer-events: none;

      @media screen and (min-width: 1024px) {
        opacity: 1;
        pointer-events: auto;
        grid-column: unset;
        grid-row: unset;
      }
      .engraving-step__header {
        display: none;
        @media screen and (min-width: 1024px) {
          display: grid;
          width: 100%;
          padding-block-end: 1.125rem;
        }
      }
    }

    .engraving-step__content {
      opacity: 0;
      display: none;
      input {
        display: none;
      }
    }

    .engraving-step--position {
      display: flex;
      /*padding: var(--spacings-small-xl, 16px);*/
      justify-content: center;
      flex-wrap: wrap;
      align-items: flex-start;
      column-gap: var(--spacings-small-xl, 1rem);
      align-self: stretch;
      @media screen and (min-width: 1024px) {
        padding: 0;
        justify-content: flex-start;
      }
    }

    .button--disabled {
      opacity: 0.5;
      filter: grayscale(1);
    }
    .engraving-panel__footer-desktop {
      /*position: sticky;
      bottom: 0;
      */
      display: none;
      @media screen and (min-width: 1024px) {
        background-color: white;
        align-content: flex-start;

        z-index: 2;
        display: grid;
        gap: var(--spacings-small-l, 0.75rem);
        text-align: center;
        justify-content: center;
        padding: 0 var(--spacings-large-l, 7.5rem) var(--spacings-large-xs, 3.5rem);
      }
    }
    .engraving-panel__footer {
      align-self: end;
      position: sticky;
      align-content: flex-start;

      bottom: env(safe-area-inset-bottom, 0);
      display: grid;
      gap: var(--spacings-small-l, 0.75rem);
      grid-template: auto/auto;
      text-align: center;
      justify-content: center;
      background-color: white;
      padding: var(--spacings-small-m, 0.5rem);
      padding-bottom: calc(var(--spacings-small-m, 0.5rem) + env(safe-area-inset-bottom, 0rem));
      z-index: 3;

      @media screen and (min-width: 1024px) {
        display: none;
      }
      .bottom-panel {
        pointer-events: none;
        display: grid;
        justify-items: center;
        opacity: 0;
        grid-column: 1/-1;
        grid-row: 1/-1;
      }
    }

    @keyframes slideInFromRight {
      from {
        transform: translateX(30%);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    @keyframes slideInFromLeft {
      from {
        transform: translateX(-30%);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    @media screen and (max-width: 1023px) {
      .engraving-panel[data-direction='forward'].is-open {
        &:has([data-tab-id='tab-1']:checked) .engraving-step--position,
        &:has([data-tab-id='tab-2']:checked) .engraving-step--text,
        &:has([data-tab-id='tab-3']:checked) .engraving-step--fonts,
        &:has([data-tab-id='tab-4']:checked) .engraving-step--colors {
          animation: slideInFromLeft 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
        }
      }

      .engraving-panel[data-direction='backward'].is-open {
        &:has([data-tab-id='tab-1']:checked) .engraving-step--position,
        &:has([data-tab-id='tab-2']:checked) .engraving-step--text,
        &:has([data-tab-id='tab-3']:checked) .engraving-step--fonts,
        &:has([data-tab-id='tab-4']:checked) .engraving-step--colors {
          animation: slideInFromRight 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
        }
      }
    }
  }
/* END_SNIPPET:engraving-panel */

/* START_SNIPPET:engraving-product-form-input (INDEX:152) */
@layer reset, base, components, variants;

  @layer components {
    .engraving--font-diptyque {
      font-family: var(--font-headline);
      font-size: 2.75rem;
      align-self: center;
    }
    .engraving--font-desmond {
      font-family: 'Desmond Handwriting', cursive;
      font-size: 2.75rem;
      align-self: center;
    }
    .engraving-option {
      position: relative;
      display: grid;
      gap: var(--spacings-small-m, 0.5rem);
      padding: var(--spacings-small-m, 0.5rem) var(--spacings-small-l, 0.75rem) var(--spacings-small-l, 0.75rem)
        var(--spacings-small-l, 0.75rem);
      text-align: center;
      border-radius: var(--radius-small, 2px);
      border: var(--border-width-extra-small, 1px) solid transparent;
      .engraving-option__image {
        width: 2.5rem;
        height: 3.375rem;
        display: grid;
        aspect-ratio: 40/54;
        justify-self: center;
      }
      .engraving-option__content {
        display: grid;
        gap: var(--spacings-small-xs, 0.125rem);
      }
      &:has(input:checked) {
        border: var(--border-width-extra-small, 1px) solid var(--Border-secondary, #717171);
      }

      &:has(input:focus-visible) {
        box-shadow:
          0 0 0 0.125rem white,
          0 0 0 0.25rem var(--Border-primary, #000);
        outline: none;
      }

      label {
        display: grid;
      }

      input {
        position: absolute;
        width: 100%;
        height: 100%;
        padding: 0;
        top: 0;
        left: 0;
        margin: -0.0625rem;
        overflow: hidden;
        opacity: 0;
        cursor: pointer;
        white-space: nowrap;
        border-width: 0;
        &::placeholder {
          color: var(--Content-primary);
        }
      }
    }
    .engraving-step--text {
      align-items: flex-start;
      align-content: flex-start;

      @media screen and (min-width: 1024px) {
        overflow-y: auto;
      }

      .engraving-step__content {
        gap: var(--spacings-small-xl, 1rem);
      }
      .engraving-input {
        display: grid;
        gap: var(--spacings-small-m, 0.5rem);
        .engraving-input__wrapper {
          position: relative;
          display: flex;
          align-items: center;
        }
        .engraving-input__counter {
          position: absolute;
          right: var(--spacings-small-l, 0.75rem);
          color: var(--Content-secondary, #4d4d4d);
          pointer-events: none;
        }
        label {
          display: grid;
          padding-inline-start: var(--spacings-small-xl, 1rem);
        }
        input {
          width: 100%;
          padding: var(--spacings-small-xl, 1rem) calc(var(--spacings-small-l, 0.75rem) * 4)
            var(--spacings-small-xl, 1rem) var(--spacings-small-l, 0.75rem);
          border-radius: var(--radius-small, 2px);
          border: var(--border-width-extra-small, 1px) solid var(--Border-secondary, #717171);

          &.is-error {
            border-color: var(--State-Error, #d13037);
          }
        }
        .engraving-input__error {
          display: none;
          color: var(--State-Error, #d13037);
          margin-top: var(--spacings-small-xs, 0.125rem);
          align-items: center;
          gap: var(--spacings-small-xs, 0.125rem);
          padding-inline-start: var(--spacings-small-xl, 1rem);

          svg {
            width: 0.75rem;
            height: 0.75rem;
            flex-shrink: 0;
          }

          &.is-active {
            display: flex;
          }
        }
      }
    }
    .engraving-step--fonts,
    .engraving-step--colors {
      display: grid;
      align-items: flex-start;
      .engraving-step__content {
        --nbr-choices: 1;
        /* padding: var(--spacings-small-xl, 16px);*/
        justify-content: center;
        grid-template-columns: repeat(var(--nbr-choices), auto);
        align-items: center;
        justify-items: center;
        gap: var(--spacings-small-xl, 1rem);
        @media screen and (min-width: 1024px) {
          padding: 0;
          justify-content: flex-start;
          justify-items: flex-start;
          grid-template-columns: repeat(var(--nbr-choices), auto);
        }
        .engraving-option {
          width: fit-content;

          &:has(input:checked) {
            background-color: var(--Color-Background-secondary);
            border: var(--border-width-extra-small, 1px) solid var(--Border-secondary, #717171);
          }
          .engraving-option__image {
            width: 4.375rem;
            height: 4.375rem;
            aspect-ratio: 1/1;
            background-color: var(--Background-secondary, #f8f8f8);
          }
        }
      }
    }
  }
/* END_SNIPPET:engraving-product-form-input */

/* START_SNIPPET:filter-count (INDEX:159) */
/* no inject */
  /* Le CSS de ce composant vit dans src/shared/collection-view/ et est servi par
   assets/theme-shared.css : il pilote les deux piles collection. Le marqueur
   "no inject" empêche le pipeline de re-remplir ce bloc. */
/* END_SNIPPET:filter-count */

/* START_SNIPPET:full-page-loader (INDEX:165) */
@layer components {
    .full-page-loader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(0.5rem);
      -webkit-backdrop-filter: blur(0.5rem);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .full-page-loader[aria-hidden='false'] {
      opacity: 1;
      pointer-events: all;
    }

    .full-page-loader__content {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.25rem;
    }

    .full-page-loader__logo {
      width: 10rem;
      height: auto;
      aspect-ratio: 160/200;
    }

    .full-page-loader__spinner {
      width: 1.5rem;
      height: 1.5rem;
      border: 2px solid var(--color-black, #000);
      border-top-color: transparent;
      border-radius: 50%;
    }
  }
/* END_SNIPPET:full-page-loader */

/* START_SNIPPET:gallery-main-product (INDEX:178) */
/* ⚠ Auto-generated from src/snippets/gallery-main-product/gallery-main-product.css — do not edit directly. */
/* src/snippets/gallery-main-product/gallery-main-product.css */
@layer reset, base, components, variants;

@layer components {
  header:has(.header--grid-mobile) {
    position: absolute !important;
    top: unset;

    @media (min-width: 1024px) {
      position: sticky !important;
      mix-blend-mode: unset !important;
      top: 0;
    }
  }

  header.is-edito-visible {
    mix-blend-mode: unset !important;
  }

  header.is-edito-visible .header-inside {
    background-color: transparent;
  }

  /* Le fondu ayant disparu sur mobile (voir src/sections/header/header.css),
     la barre de progression ne s'adapte plus seule à son fond : on la
     repasse en clair sur les slides sombres (édito OU Night vision /
     `v-black`), avec le signal `.is-edito-visible` que la galerie pose.

     Specificity must beat the nested mobile dark default
     (`.gallery-main-product .embla .embla__progress…`, 0,4,0) — hence
     `.embla` in the selector. */
  @media screen and (max-width: 1023.98px) {
    body:has(header.is-edito-visible)
      .gallery-main-product
      .embla
      .embla__progress {
      background: rgba(255, 255, 255, 0.35);
    }

    body:has(header.is-edito-visible)
      .gallery-main-product
      .embla
      .embla__progress
      .embla__progress__bar {
      background: #fff;
    }

    /* Night vision: description stays visible (unlike edito) and must be
       white on the dark slide. On edito the block is opacity 0, so color
       is irrelevant there. */
    body:has(header.is-edito-visible)
      .gallery-main-product
      .product-description {
      color: var(--color-white);
    }
  }

  header.is-edito-visible .header__logo svg,
  header.is-edito-visible .menu__item {
    color: var(--color-white);
  }

  .main-product__gallery {
    .engraving-trigger__wrapper {
      --tuncat-expanded-height: 0;
      position: relative;
      grid-row: 1 / -1;
      grid-column: 1 / -1;
      pointer-events: none;
      transition: opacity 0.3s ease;
      display: grid;
      align-self: flex-end;
      justify-self: flex-end;
      margin-block-end: calc(
        12.6875rem + (var(--short-description-height, 10.6875rem) - 10.6875rem)
      );
      z-index: 2;

      @media screen and (min-width: 1024px) {
        justify-self: flex-end;
        position: sticky;
        bottom: 0;
        margin-block-end: 0;
      }
      .engraving-trigger__wrapper--content {
        height: auto;
        display: grid;
      }
      .engraving-trigger {
        pointer-events: auto;
        position: sticky;
        align-self: flex-end;
        /*top: calc(100vh - 64px - 39px - 16px);*/
        margin-block-end: 1rem;
        margin-inline-end: 1rem;
        z-index: 2;
        display: grid;
        width: fit-content;
        justify-self: end;
        padding: var(--spacings-small-m, 0.5rem);

        gap: var(--spacings-small-xs, 0.125rem);
        border-radius: var(--radius-full, 999px);
        background: var(--Background-primary, #fff);
        align-content: center;
        overflow: hidden;

        @media screen and (min-width: 1024px) {
          position: sticky;
          top: unset;
          align-self: flex-end;
          bottom: 1rem;
        }

        .engraving-trigger__content {
          --label-size: 1ch;
          display: inline-grid;
          align-items: center;
          grid-template-columns: auto 0ch;
          gap: 0;
          transition: all 0.3s ease;
          .logo {
            display: inline-grid;
            justify-items: center;
            align-items: center;
          }
        }

        &:hover,
        .is-animate-engraving-trigger & {
          .engraving-trigger__content {
            grid-template-columns: auto var(--label-size);
          }

          .label {
            transform: translateX(0);
            opacity: 1;
          }
        }

        .label {
          transform: translateX(100%);
          opacity: 0;
          transition: all 0.3s ease;
        }
      }
    }
  }
  .gallery-main-product {
    display: grid;
    @media (min-width: 1024px) {
      position: sticky;
      top: 7.5rem;
    }

    .main-product__slider {
      grid-row: 1 / -1;
      grid-column: 1 / -1;
    }

    .main-product__tags {
      grid-column: 1/-1;
      grid-row: 1/-1;
      justify-self: flex-start;
      align-self: flex-start;
      z-index: 2;
      margin-block-start: 5.75rem;
      margin-inline-start: 1rem;
      transition: opacity 0.3s ease;

      @media (min-width: 1024px) {
        margin-block-start: 1rem;
        margin-inline-start: 1rem;
      }

      .main-product__tag-text {
        background-color: white;
        padding: 0.25rem;
      }
    }

    .embla {
      --slide-spacing: 1rem;
      --slide-size-mobile: 100%;
      --slide-size-tablet: 60%;
      --slide-size-desktop: 100%;

      .embla__viewport {
        --bg-info-card: 'transparent';
        overflow: hidden;
        position: relative;
        padding-block-end: 0.125rem;
        display: grid;

        @media (min-width: 1024px) {
          padding-inline: 0;
        }
      }

      .product-description {
        grid-column: 1/-1;
        grid-row: 1/-1;
        z-index: 2;
        align-self: end;
        justify-self: center;
        width: 100%;
        text-align: center;
        min-height: 10.6875rem;

        /* Noir explicite au lieu de `color: white` + `mix-blend-mode:
           difference` : sur packshot le fondu rendait du noir. Sur slides
           sombres (Night vision / édito) `.is-edito-visible` repasse en
           blanc (voir règle mobile ci-dessus) ; l'édito masque aussi le
           bloc en opacity. Voir src/sections/header/header.css. */
        color: var(--color-black, #000);
        pointer-events: none;
        transition: opacity 0.3s ease;
        padding: 0 0 var(--spacings-medium-s, 1.5rem);

        @media (min-width: 1024px) {
          display: none;
        }
      }

      .embla__container {
        grid-column: 1/-1;
        grid-row: 1/-1;
        transition: height 0.3s linear;
        height: fit-content;
        display: flex;
        align-items: flex-start;
        /* Add this */
        touch-action: pan-y pinch-zoom;
        margin-left: calc(var(--slide-spacing) * -1);

        /* Galerie à une seule image : plus rien à faire défiler, on centre la
           slide (elle ne fait que 60 % de la largeur en tablette). Le test est
           « une slide, aucune slide qui en suive une autre » plutôt que
           `:only-child`, pour rester vrai si un jour un nœud non-slide est
           ajouté dans le conteneur. */
        &:has(.embla__slide):not(:has(.embla__slide ~ .embla__slide)) {
          justify-content: center;
        }
      }

      .embla__slide {
        flex: 0 0 var(--slide-size-mobile);
        min-width: 0;

        @media (min-width: 768px) {
          flex: 0 0 var(--slide-size-tablet);
        }

        @media (min-width: 1024px) {
          flex: 0 0 var(--mp-gallery-slide-size, var(--slide-size-desktop));
        }
      }

      .container_embla__prev,
      .container_embla__next {
        width: 2.5rem;
        height: 2.5rem;
        z-index: 2;
        position: absolute;
        display: none;
        top: 50%;
        opacity: 1;
        transform: translateY(-50%);
        cursor: pointer;

        @media (min-width: 1024px) {
          display: grid;
        }

        &[data-disabled] {
          opacity: 0;
          pointer-events: none;
          cursor: not-allowed;
        }
      }

      .container_embla__prev {
        left: 1rem;
      }

      .container_embla__next {
        right: 1rem;
      }

      .embla__prev,
      .embla__next {
        cursor: pointer;
        display: grid;
        align-self: center;
        justify-self: center;
        width: 2.5rem;
        height: 2.5rem;
        justify-content: center;
        align-items: center;
        aspect-ratio: 1/1;
        border-radius: var(--radius-full, 999px);
        border: var(--border-width-extra-small, 1px) solid
          var(--Border-primary, #000);
        background: var(--Background-primary, #fff);
        transform: none !important;
        transition: background-color 0.15s ease-out;
      }

      .embla__prev:hover,
      .embla__next:hover {
        background: var(--color-white-100, #f8f8f8);
      }

      .embla__progress {
        display: block;
        border-radius: var(--radius-small, 2px);
        background: rgba(255, 255, 255, 0.35);
        mix-blend-mode: difference;
        position: relative;
        height: 0.0625rem;
        justify-self: center;
        align-self: end;
        width: 15rem;
        max-width: 90%;
        overflow: hidden;
        margin-block-end: 0.5rem;
        margin-inline: auto;

        .embla__progress__bar {
          background: white;
          position: absolute;
          width: 100%;
          top: 0;
          bottom: 0;
          left: 0;
          mix-blend-mode: difference;
          transition: transform 0.3s ease;
        }

        /* Mobile : aucun fondu (voir src/sections/header/header.css). Sur
           packshot blanc le fondu rendait du sombre — on le pose en dur. */
        @media screen and (max-width: 1023.98px) {
          mix-blend-mode: normal;
          background: rgba(20, 24, 26, 0.25);

          .embla__progress__bar {
            mix-blend-mode: normal;
            background: var(--color-black, #14181a);
          }
        }
      }
    }
  }
}
@layer variants {
  .gallery-main-product.v-mobile {
    display: grid;
    @media (min-width: 1024px) {
      display: none;
    }
  }
  .gallery-main-product.v-desktop {
    display: none;
    @media (min-width: 1024px) {
      display: grid;
    }
  }
}
/* END_SNIPPET:gallery-main-product */

/* START_SNIPPET:info-card (INDEX:218) */
/* ⚠ Auto-generated from src/snippets/info-card/info-card.css — do not edit directly. */
/* src/snippets/info-card/info-card.css */
@layer components {
  c-info-card {
    background-color: var(--bg-info-card);
    display: grid;
    max-width: 28.0625rem;
    padding: var(--spacings-medium-xs, 1.25rem) var(--spacings-medium-s, 1.5rem)
      var(--spacings-medium-s, 1.5rem) var(--spacings-medium-s, 1.5rem);
    align-items: center;
    gap: var(--spacings-medium-xs, 1.25rem);
    justify-items: center;
    height: 100%;
    box-sizing: border-box;
    align-items: flex-start;

    .icon-container {
      width: var(--spacings-medium-m, 2rem);
      height: var(--spacings-medium-m, 2rem);

      img {
        aspect-ratio: 1/1;
      }
    }

    .content-container {
      display: grid;
      row-gap: 0.5rem;
      max-width: 28.0625rem;
      padding: 0;
      text-align: center;
    }
  }
}
/* END_SNIPPET:info-card */

/* START_SNIPPET:link (INDEX:222) */
@layer components {
    .link {
      margin-top: 0.75rem;
    }
    
  }
  @layer variants {
    .link.v-primary {
      position: relative;
      display: inline-flex;
      justify-content: center;
      align-items: flex-start;
      gap: var(--spacings-small-s, 0.25rem);

      &:active {
        color: var(--State-Pressed, #717171);
      }
      &:disabled {
        color: var(--State-Disable, #c8c8c8);
        cursor: initial;
      }
      &:hover,
      &:focus {
        .cta--label::after,
        .cta--label .cta--label__text::after {
          transform: translateY(-0.125rem);
        }
      }
      .cta--label {
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: var(--spacings-small-s, 0.25rem);
        /* label-medium/alt */
        font-family: var(--font-headline);
        font-size: var(--typography-label-m-regular-font-size, 0.875rem);
        font-style: normal;
        font-weight: var(--typography-label-m-regular-font-weight, 400);
        line-height: var(--typography-label-m-regular-line-height, 1rem); /* 114.286% */
        letter-spacing: var(--typography-label-m-regular-letter-spacing, 0);
        .cta--label__text {
          position: relative;
          padding-bottom: 0.25rem;

          &:after {
            transition: all 0.4s ease;

            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            background: currentColor;
            width: 100%;
            height: 0.0625rem;
          }
        }
      }
    }
    .link.v-secondary {
      position: relative;
      display: inline-flex;
      justify-content: center;
      align-items: flex-start;
      gap: var(--spacings-small-s, 0.25rem);

      &:active {
        color: var(--State-Pressed, #717171);
      }
      &:disabled {
        color: var(--State-Disable, #c8c8c8);
        cursor: initial;
      }
      &:hover,
      &:focus {
        .cta--label::after,
        .cta--label .cta--label__text::after {
          transform: translateY(-0.125rem);
        }
      }
      .cta--label {
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: var(--spacings-small-s, 0.25rem);
        font-family: var(--font-body);
        font-size: var(--typography-label-s-regular-font-size, 0.75rem);
        font-style: normal;
        font-weight: var(--typography-label-s-regular-font-weight, 400);
        line-height: var(--typography-label-s-regular-line-height, 0.875rem); /* 116.667% */
        letter-spacing: var(--typography-label-s-regular-letter-spacing, 0);
        .cta--label__text {
          position: relative;
          padding-bottom: 0.25rem;

          &:after {
            transition: all 0.4s ease;

            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            background: currentColor;
            width: 100%;
            height: 0.0625rem;
          }
        }
      }
    }
    .link.v-tabs {
      position: relative;
      display: inline-flex;
      justify-content: center;
      align-items: flex-start;
      gap: var(--spacings-small-s, 0.25rem);
      color: var(--Content-secondary, #4d4d4d);

      &:disabled {
        color: var(--State-Disable, #c8c8c8);
        cursor: initial;
      }
      &:hover,
      &:focus,
      &.is-active {
        color: var(--Content-primary, #000);
        .cta--label::after,
        .cta--label .cta--label__text::after {
          transform: translateY(-0.125rem);

          background-color: currentColor;
        }
      }
      .cta--label {
        position: relative;
        display: flex;
        align-items: flex-start;
        gap: var(--spacings-small-s, 0.25rem);
        font-family: var(--font-body);
        font-size: var(--typography-label-m-regular-font-size, 0.875rem);
        font-style: normal;
        font-weight: var(--typography-label-m-regular-font-weight, 400);
        line-height: var(--typography-label-m-regular-line-height, 1rem); /* 114.286% */
        letter-spacing: var(--typography-label-m-regular-letter-spacing, 0);
        .cta--label__text {
          position: relative;
          padding-bottom: 0.5rem;

          &:after {
            transition: all 0.4s ease;

            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            background-color: transparent;
            width: 100%;
            height: 0.0625rem;
          }
        }
      }
    }
  }
/* END_SNIPPET:link */

/* START_SNIPPET:localization-trigger (INDEX:226) */
/* ⚠ Auto-generated from src/snippets/localization-trigger/localization-trigger.css — do not edit directly. */
/* src/snippets/localization-trigger/localization-trigger.css */
.localization-trigger {
  cursor: pointer;
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  text-align: inherit;
}

.localization-trigger:not(.localization-trigger--header):not(
    .localization-trigger--mobile-menu
  ) {
  display: flex;
  flex-flow: row wrap;
  gap: 1.5rem;

  & p {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-white);
  }

  & span {
    margin-inline-start: auto;
    cursor: pointer;
    color: var(--color-white);
  }

  & p > svg {
    flex-shrink: 0;
    inline-size: var(--icon-chevron-size);
    block-size: var(--icon-chevron-size);
    transform: rotate(-90deg);
  }

  & p > svg path {
    fill: currentColor;
  }
}

.localization-trigger--header {
  display: none;
  align-items: center;

  @media (width >= 64rem) {
    display: inline-flex;
  }

  & .localization-trigger__link {
    margin-top: 0;
  }

  &:hover .link.v-secondary .cta--label::after,
  &:hover .link.v-secondary .cta--label .cta--label__text::after,
  &:focus .link.v-secondary .cta--label::after,
  &:focus .link.v-secondary .cta--label .cta--label__text::after,
  &:focus-visible .link.v-secondary .cta--label::after,
  &:focus-visible .link.v-secondary .cta--label .cta--label__text::after {
    transform: translateY(-0.125rem);
  }
}

.localization-trigger--mobile-menu {
  padding-block-end: 1rem;

  @media (width >= 64rem) {
    display: none;
  }

  & p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    inline-size: 100%;
    color: var(--color-content-secondary);
    white-space: nowrap;
  }

  & span {
    color: var(--color-black);
  }

  & svg {
    block-size: 1rem;
    inline-size: 1rem;
    margin-inline-start: auto;
  }
}

.header__action-item--localization {
  display: none;
  margin-right: 0.5rem;

  @media (width >= 64rem) {
    display: flex;
    align-items: center;
  }
}
/* END_SNIPPET:localization-trigger */

/* START_SNIPPET:main-product-reassurance (INDEX:228) */
/* ⚠ Auto-generated from src/snippets/main-product-reassurance/main-product-reassurance.css — do not edit directly. */
/* src/snippets/main-product-reassurance/main-product-reassurance.css */
@layer components {
  .reassurance-main-product {
    padding-inline: 1rem;
    overflow: hidden;
    padding-block-start: 1.5rem;
    @media (min-width: 1024px) {
      padding-block-start: 2rem;
    }
  }
  .main-product-reassurance {
    .embla__viewport {
      overflow: hidden;
      position: relative;
    }

    .embla__container {
      display: flex;
      touch-action: pan-y pinch-zoom;
    }

    .embla__slide {
      flex: 0 0 100%;
      min-width: 0;
      display: grid;
    }

    .main-product-reassurance__item {
      display: grid;
      align-content: center;
      text-align: center;
      padding: 1rem 0.25rem;
      .item-title {
        padding-bottom: 0.25rem;
      }
    }

    .embla__dots {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.5rem;
      padding-block: 0.25rem;
    }

    .embla__dot {
      appearance: none;
      background: none;
      border: none;
      padding: 0;
      cursor: pointer;
      width: 0.625rem;
      height: 0.0625rem;
      background-color: var(--color-foreground, #1a1a1a);
      opacity: 0.2;
      transition: opacity 0.3s ease;

      &.is-active {
        opacity: 1;
      }
    }

    .container_embla__prev,
    .container_embla__next {
      display: none;
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 2;
      width: 25%;
      height: auto;
      opacity: 1;
      transform: none;
      cursor: pointer;

      @media (hover: hover) and (pointer: fine) {
        display: grid;
        align-items: center;
      }
    }

    .container_embla__prev {
      left: 0;
      justify-content: flex-start;
    }

    .container_embla__next {
      right: 0;
      justify-content: flex-end;
    }

    .embla__prev,
    .embla__next {
      cursor: pointer;
      display: grid;
      align-self: center;
      width: 2rem;
      height: 2rem;
      justify-content: center;
      align-items: center;
      aspect-ratio: 1 / 1;
      border-radius: var(--radius-full, 999px);
      border: var(--border-width-extra-small, 1px) solid
        var(--Border-primary, #000);
      background: var(--Background-primary, #fff);
      opacity: 0;
      transform: none !important;
      transition:
        opacity 0.2s ease,
        background-color 0.15s ease-out;
      pointer-events: none;
    }

    .container_embla__prev:hover .embla__prev,
    .container_embla__prev:focus-within .embla__prev,
    .container_embla__next:hover .embla__next,
    .container_embla__next:focus-within .embla__next {
      opacity: 1;
    }

    .embla__prev:hover,
    .embla__next:hover {
      background: var(--color-white-100, #f8f8f8);
    }
  }

  .main-product-reassurance__trigger {
    position: relative;
    z-index: 2;
    cursor: pointer;
  }

  .reinsurances-custom__sidebar {
    position: fixed;
    z-index: 11;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.4s ease,
      visibility 0.4s ease;

    &.active {
      opacity: 1;
      visibility: visible;
    }
  }

  .reinsurances-custom__sidebar-background {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.5;
    cursor: pointer;
  }

  .reinsurances-custom__sidebar-content {
    position: absolute;
    z-index: 10;
    left: 100%;
    width: 31.875rem;
    height: 100%;
    background-color: #fff;
    transition: left 0.4s ease;

    &.active {
      left: calc(100% - 31.875rem);
    }

    @media screen and (max-width: 768px) {
      max-width: 100%;

      &.active {
        left: 0;
      }
    }
  }

  .reinsurances-custom__sidebar-header {
    padding: var(--spacings-medium-s, 1.5rem);
    border-bottom: var(--border-width-extra-small, 1px) solid
      var(--color-gris-nacre);
  }

  .reinsurances-custom__sidebar-body {
    padding: 1.25rem var(--spacings-medium-s, 1.5rem);
    max-height: calc(100vh - 9.375rem);
    overflow-y: auto;
  }

  .reinsurances-custom__sidebar-header-close {
    width: 100%;
    text-align: right;
    cursor: pointer;
  }

  .reinsurances-custom__sidebar-title {
    padding-bottom: var(--spacings-small-xl, 1rem);

    &:empty {
      display: none;
    }
  }

  .reinsurances-custom__sidebar-description {
    ul {
      list-style: disc;
    }

    a {
      text-decoration: underline;
    }

    :is(p, li) {
      margin-block: 1rem;

      &:first-child {
        margin-block-start: 0;
      }

      &:last-child {
        margin-block-end: 0;
      }
    }
  }
}
/* END_SNIPPET:main-product-reassurance */

/* START_SNIPPET:main-product-tuncat-description (INDEX:229) */
/* ⚠ Auto-generated from src/snippets/main-product-tuncat-description/main-product-tuncat-description.css — do not edit directly. */
/* src/snippets/main-product-tuncat-description/main-product-tuncat-description.css */
@layer components {
  .main-product-tuncat-description {
    display: block;
    padding-block-start: 1rem;
    padding-inline: 1rem;
    pointer-events: auto;
    text-align: center;
  }

  .main-product-tuncat-description__short,
  .main-product-tuncat-description__long {
    max-width: 40.8125rem;
    margin-inline: auto;
  }

  .main-product-tuncat-description__long {
    display: none;
    margin-block-start: 0.5rem;
  }

  .main-product-tuncat-description__see-more,
  .main-product-tuncat-description__see-less {
    cursor: pointer;
    text-decoration: underline;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
  }

  .main-product-tuncat-description__see-more {
    display: inline;
    margin-inline-start: 0.25rem;
  }

  .main-product-tuncat-description__see-less {
    display: block;
    width: fit-content;
    margin-block-start: 0.5rem;
    margin-inline: auto;
  }

  /* La description sort du richtext avec toutes ses balises. Le reset global a
     mis les marges à zéro, retiré les puces et les soulignés : on les rend ici,
     au seul périmètre de la description. */
  :is(
    .main-product-tuncat-description__short,
    .main-product-tuncat-description__long
  ) {
    /* Le rythme vertical est porté par le bloc qui précède, jamais par celui
       qui suit : le dernier paragraphe repasse en inline pour accrocher le
       bouton (règle plus bas) et une boîte inline ignore margin-block-start.
       Les <li> sont exclus — ils gardent leur interligne de liste — et rien
       n'est posé devant un bouton, qui a déjà sa propre marge. */
    & :not(button, li):has(+ :not(button)) {
      margin-block-end: 0.75em;
    }

    & :is(ul, ol) {
      padding-inline-start: 1.25em;
      text-align: left;
    }

    & ul {
      list-style: disc;
    }

    & ol {
      list-style: decimal;
    }

    & a {
      text-decoration: underline;
    }

    /* Le reset passe les span en inline-block : un span posé au milieu d'une
       phrase par le marchand ne se couperait plus en fin de ligne. */
    & span {
      display: inline;
    }
  }

  /* « Lire la suite » reste dans le fil du dernier paragraphe, comme avant :
     sans ça le bouton tomberait sous le bloc. Volontairement limité à <p> —
     accroché à la fin d'une liste, il serait illisible. */
  .main-product-tuncat-description__short
    > p:has(+ .main-product-tuncat-description__see-more) {
    display: inline;
  }

  .main-product-tuncat-description.is-expanded
    .main-product-tuncat-description__see-more {
    display: none;
  }

  .main-product-tuncat-description.is-expanded
    .main-product-tuncat-description__long {
    display: block;
  }

  c-tuncat:not(:defined) {
    visibility: hidden;
  }
}

@layer variants {
  .main-product-tuncat-description.v-desktop {
    display: none;

    @media screen and (min-width: 1024px) {
      display: block;
    }
  }
}
/* END_SNIPPET:main-product-tuncat-description */

/* START_SNIPPET:media-card (INDEX:230) */
/* no inject */
/* Le CSS de ce composant vit dans src/shared/ et est servi par
   assets/theme-shared.css : il était recopié dans plusieurs blocs via @import.
   Le marqueur "no inject" empêche le pipeline de re-remplir ce bloc. */
/* END_SNIPPET:media-card */

/* START_SNIPPET:picture (INDEX:235) */
@layer base {
    picture {
      display: grid;
    }
  }
/* END_SNIPPET:picture */

/* START_SNIPPET:plp-night-toggle (INDEX:236) */
/* no inject */
  /* Le CSS de ce composant vit dans src/shared/collection-view/ et est servi par
   assets/theme-shared.css : il pilote les deux piles collection. Le marqueur
   "no inject" empêche le pipeline de re-remplir ce bloc. */
/* END_SNIPPET:plp-night-toggle */

/* START_SNIPPET:plp-view-toggle (INDEX:237) */
/* no inject */
  /* Le CSS de ce composant vit dans src/shared/collection-view/ et est servi par
   assets/theme-shared.css : il pilote les deux piles collection, une copie par
   section aurait recréé une triplication. Le marqueur "no inject" empêche le
   pipeline de re-remplir ce bloc. */
/* END_SNIPPET:plp-view-toggle */

/* START_SNIPPET:product-card-horizontal-engraving (INDEX:241) */
@layer reset, base, components, variants;

  @layer components {
    .cart__item-engraving {
      padding: 0.5rem;
      background-color: var(--Background-secondary, #f8f8f8);
      max-width: 33.4375rem;

      &.is-open {
        .product-card-horizontal__toggle .plus-minus-icon svg {
          transform: rotate(90deg);
        }
        .cart__item-engraving-wrapper {
          grid-template-rows: 1fr;
          padding-block-start: 0.75rem;
        }
      }
      .cart__item-engraving-title {
        display: grid;
        background: transparent;
        border: none;
        padding: 0;
        row-gap: 0.5rem;
        cursor: pointer;
        @media screen and (min-width: 1024px) {
          width: 100%;

          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
      /*
        Reprend les déclarations que `.container-plus-minus` héritait de la
        feuille des filtres (theme-shared.css / filter-collection). Classe
        renommée pour couper ce couplage : l'accordéon gravure n'a rien à voir
        avec les filtres de collection.
      */
      .product-card-horizontal__toggle {
        display: grid;
        flex-shrink: 0;
        justify-self: flex-start;
      }
      .plus-minus-icon {
        display: flex;
        align-items: center;
        margin: 0;
        gap: 0.25rem;
        svg {
          display: inline-block;
          width: 1rem;
          height: 1rem;
          transform: rotate(270deg);
          transition: transform 0.3s ease;
        }
      }
      .cart__item-engraving-footer {
        padding-block-start: 0.75rem;
      }
      .cart__item-engraving-wrapper {
        display: grid;
        grid-template-rows: 0fr;
        transition: all 0.3s ease;
      }
      .cart__item-engraving-content {
        overflow: hidden;
        display: grid;
        gap: 0.25rem;
      }
      .cart__item-engraving-line {
        display: grid;
        grid-template-columns: auto 1fr;
        justify-content: flex-start;
        align-items: center;
        justify-items: flex-start;
        gap: 0.25rem;
      }
    }
  }
/* END_SNIPPET:product-card-horizontal-engraving */

/* START_SNIPPET:product-card-horizontal (INDEX:244) */
@layer reset, base, components, variants;

  @layer components {
    .product-card-horizontal {
      display: grid;
      border-radius: var(--radius-medium, 4px);
      max-height: 9.5rem;
      width: 22.5625rem;
      grid-template: auto/auto 1fr;
      height: 100%;
      padding: var(--spacings-small-l, 0.75rem);
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(1.25rem);
      gap: var(--spacings-small-l, 0.75rem);
      @media screen and (min-width: 1024px) {
        width: 25rem;
        max-height: 10.625rem;
      }

      .container-image {
        width: 6rem;
        aspect-ratio: 3/4;
        display: inline-grid;
        @media screen and (min-width: 1024px) {
          aspect-ratio: 109/146;
          width: 6.8125rem;
        }
        img,
        video {
          height: 100%;
          width: 100%;
          object-fit: cover;
        }
      }
      .container-content {
        display: grid;
        align-items: center;
        align-content: center;
        text-align: start;

        .content-top {
          display: grid;
          gap: var(--spacings-small-m, 0.5rem);
          width: 100%;

          @media screen and (min-width: 1024px) {
            gap: var(--spacings-small-l, 0.75rem);
          }
          .product-card-horizontal-title-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
          .product-name {
            overflow: hidden;
            height: fit-content;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .product-name-2 {
            overflow: hidden;
            height: fit-content;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            line-clamp: 1;
            -webkit-box-orient: vertical;
          }
        }
        .content-bottom {
          padding-top: var(--spacings-medium-xs, 1.25rem);

          .button--shoppable {
            position: relative;
            block-size: 1.25rem;
            padding-inline: initial;
            font-size: 0.875rem;
            background-color: transparent;
            border: none;
            box-shadow: none;
            appearance: none;

            svg {
              display: inline-block;
            }

            &::before {
              content: '';
              position: absolute;
              block-size: 0.0625rem;
              inline-size: 100%;
              inset-block-end: 0rem;
              inset-inline-start: -0.0625rem;
              background-color: currentcolor;
              transition: 0.3s ease;
              pointer-events: none;
            }

            &:hover::before {
              inset-block-end: 0.125rem;
            }
            .button__label:before {
              content: none;
            }
          }
        }
      }
    }

    /*
      Pastille à fond gris, partagée avec les sous-snippets `-labels`,
      `-engraving` et `-preorder`. Remplace les `style=` inline d'origine ;
      les valeurs sont celles des tokens correspondants (4/4/2px et 8px).
    */
    .product-card-horizontal__badge {
      padding: var(--spacings-small-s, 0.25rem) var(--spacings-small-s, 0.25rem) var(--spacings-small-xs, 0.125rem);
      background: var(--Background-secondary, #f8f8f8);

      &.product-card-horizontal__badge--lg {
        padding: var(--spacings-small-m, 0.5rem);
      }
    }
  }

  @layer variants {
    .product-card-horizontal.v-full {
      width: 100%;
    }
    /* Titre en haut, prix en bas : la carte se lit sur toute la hauteur de son
       visuel. L'espace libre porte l'écart, `.content-bottom` n'a donc pas à le
       creuser — son retrait vertical ne ferait qu'ajouter de la hauteur dès que
       le contenu remplit la colonne. */
    .product-card-horizontal.v-display {
      .container-content {
        align-content: space-between;
      }

      .content-bottom {
        padding-top: 0;
      }
    }
    .product-card-horizontal.v-quantity-selector {
      max-height: initial;
      .container-content {
        align-content: space-between;
      }
      .content-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
/* END_SNIPPET:product-card-horizontal */

/* START_SNIPPET:product-card-v2 (INDEX:245) */
/* ⚠ Auto-generated from src/snippets/product-card-v2/product-card-v2.css — do not edit directly. */
  /* src/snippets/product-card-v2/product-card-v2.css */
/* END_SNIPPET:product-card-v2 */

/* START_SNIPPET:product-form (INDEX:255) */
/* ⚠ Auto-generated from src/snippets/product-form/product-form.css — do not edit directly. */
/* src/snippets/product-form/product-form.css */
@layer reset, base, components, variants,settings;

@layer components {
  c-product-form {
    display: grid;
    align-self: flex-end;
  }

  .gw-float-widget[type='button'] {
    display: none;
  }

  .product-preorder__message {
    text-align: center;
    display: grid;
    justify-content: center;
    padding-block-end: var(--spacing-small-s);
  }
}
/* END_SNIPPET:product-form */

/* START_SNIPPET:product-images (INDEX:257) */
/* ⚠ Auto-generated from src/snippets/product-images/product-images.css — do not edit directly. */
/* src/snippets/product-images/product-images.css */
@layer components {
  .product-images {
    overflow: hidden;

    .embla__parallax__layer {
      width: 100%;
      height: 100%;
    }

    picture {
      display: block;
      width: 100%;
      height: 100%;
    }

    img,
    video {
      display: block;
      width: 100%;
      object-fit: cover;
    }
  }
}

@layer variants {
  .product-images:not(.v-edito-image-mobile) {
    padding-block-start: 4.25rem;
    height: calc(
      41.8125rem + 0.5rem + (var(--short-description-height, 10.6875rem) - 10.6875rem)
    );

    @media (min-width: 1024px) {
      aspect-ratio: 3/4;
      height: auto;
      padding-block-start: 0;
    }

    img,
    video {
      height: 30.6875rem;

      @media (min-width: 1024px) {
        height: 100%;
      }
    }
  }

  .product-images:not(.v-edito-image-mobile):not(.v-black) {
    background-color: #f8f8f8;
  }

  .product-images.v-black:not(.v-edito-image-mobile) {
    background: linear-gradient(
      0deg,
      rgb(12, 12, 12),
      rgb(27, 25, 24),
      rgb(21, 21, 19),
      rgb(12, 12, 12),
      rgb(13, 13, 13)
    );

    img,
    video {
      height: 30.6875rem;

      @media (min-width: 1024px) {
        height: 100%;
      }
    }
  }

  .product-images.v-edito-image-mobile {
    height: calc(43.6875rem + var(--tuncat-expanded-height, 0rem));

    @media (min-width: 1024px) {
      aspect-ratio: 3/4;
      height: auto;
    }

    img,
    video {
      aspect-ratio: 9/16;
      height: 43.6875rem;

      @media (min-width: 1024px) {
        height: 100%;
        aspect-ratio: unset;
      }
    }
  }
}
/* END_SNIPPET:product-images */

/* START_SNIPPET:push-collection (INDEX:266) */
/* ⚠ Auto-generated from src/snippets/push-collection/push-collection.css — do not edit directly. */
/* src/snippets/push-collection/push-collection.css */
@layer components {
  /*
   * Le push est une `c-media-card` : `src/shared/media-card/media-card.css`
   * porte toute la carte (grille `auto 1fr`, `.content-container`, `.inside`).
   * Ce fichier ne fait que deux choses de plus : placer la carte dans la grille
   * collection, et donner son ratio au média.
   */
  c-media-card.push-collection {
    min-width: 0;

    /*
     * Direct child of the grid (legacy Liquid PLP without an `<li>` wrapper).
     */
    :is(.collection-grid, .collection-grid--next, .grid-collection) > & {
      grid-column: var(--push-col-mobile, 1) / span var(--push-span-mobile, 1);
      grid-row: var(--push-row-mobile, auto);

      @media screen and (min-width: 768px) {
        grid-column: var(--push-col-desktop, 1) / span
          var(--push-span-desktop, 1);
        grid-row: var(--push-row-desktop, auto);
      }
    }

    /*
     * List-item wrapper (Algolia HitsGrid / Liquid grids coded as `ul`/`li`).
     * Placement custom properties are copied onto the `<li>` so we never need
     * `display: contents` on the list item.
     */
    :is(.collection-grid, .collection-grid--next, .grid-collection)
      > li:has(> &) {
      grid-column: var(--push-col-mobile, 1) / span var(--push-span-mobile, 1);
      grid-row: var(--push-row-mobile, auto);
      min-width: 0;
      list-style: none;

      @media screen and (min-width: 768px) {
        grid-column: var(--push-col-desktop, 1) / span
          var(--push-span-desktop, 1);
        grid-row: var(--push-row-desktop, auto);
      }
    }

    /*
     * Le contenu suit le média au lieu de tomber au bas de la ligne :
     * `media-card.css` cale `.inside__bottom` en `align-self: flex-end` dans une
     * carte en `height: 100%`, ce qui vaut entre media-cards de même hauteur,
     * pas à côté de cartes produit qui étirent la piste.
     */
    .content-container {
      height: fit-content;
      align-self: start;

      /*
       * L'écart au média est porté par chaque bloc, pas par le conteneur : le
       * titre et le lien n'ont pas le même, et l'un comme l'autre peut être seul
       * sous le visuel.
       */
      .inside {
        /*
         * `.inside` déclare deux pistes (`1fr auto`) quoi qu'il arrive, et une
         * gouttière se pose entre deux pistes même quand l'une est vide. Elle est
         * remplacée ici par le padding haut de `.inside__bottom`, qui vaut aussi
         * bien entre les deux blocs que sous le média quand le lien est seul.
         */
        row-gap: 0;

        /*
         * Même valeur que le `row-gap` de `.card-product`, dont le contenu n'a
         * pas de padding haut : les titres des deux cartes doivent s'aligner sur
         * une même ligne de la grille collection.
         */
        .inside__top {
          padding-block-start: var(--spacings-small-xl, 1rem);
        }

        .inside__bottom {
          padding-block-start: var(--spacings-medium-xs, 1.25rem);

          /* Le padding ci-dessus sépare seul le lien de ce qui le précède. */
          .link {
            margin-top: 0;
          }
        }
      }
    }
  }

  .push-collection__media {
    min-width: 0;

    .push-collection__visual-link {
      grid-column: 1 / -1;
      grid-row: 1 / -1;
      display: grid;
    }

    picture,
    img,
    video {
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }

    /*
     * Le ratio est porté par le média, PAS par `.push-collection__media`.
     *
     * Un `aspect-ratio` sur le conteneur ne contraint pas ses pistes de grille :
     * la ligne se dimensionne toujours sur la hauteur intrinsèque du visuel
     * (mesuré : boîte 594 px, piste 1320 px). Il fallait alors `overflow: hidden`
     * pour masquer le débordement — ce qui rognait aussi `.container-button`,
     * calé en `align-items: flex-end` sur cette piste de 1320 px. Le bouton du
     * media content était rendu, mais hors de la zone visible.
     *
     * Sur le média, le ratio dimensionne la piste elle-même : le conteneur suit,
     * et le bouton se pose au bas de ce qu'on voit. C'est déjà le motif des
     * pushes de Query Rule (`c-media-card.algolia-rule-push img`).
     */
    img,
    video {
      height: 100%;
      object-fit: cover;
      aspect-ratio: var(--push-ratio-mobile, 3 / 4);

      /*
       * 768px, le même point de bascule que le placement — PAS 1024px, celui du
       * fichier servi par `picture.liquid`. Le ratio est une fonction de
       * l'emprise, pas du fichier : à 900px une entrée est déjà en 4 colonnes,
       * et lui laisser son ratio mobile donnait un bloc de 1486px de haut
       * (mesuré : 836px de large en 9/16). L'écart entre le fichier portrait
       * servi jusqu'à 1023px et la boîte paysage est absorbé par
       * `object-fit: cover`, qui est précisément là pour ça.
       */
      @media screen and (min-width: 768px) {
        aspect-ratio: var(--push-ratio-desktop, 3 / 4);
      }
    }
  }
}
/* END_SNIPPET:push-collection */

/* START_SNIPPET:quick-buy (INDEX:269) */
/* no inject */
/* Le CSS de ce composant vit dans src/shared/ et est servi par
   assets/theme-shared.css : il était recopié dans plusieurs blocs via @import.
   Le marqueur "no inject" empêche le pipeline de re-remplir ce bloc. */
/* END_SNIPPET:quick-buy */

/* START_SNIPPET:related-products-v2 (INDEX:272) */
/* ⚠ Auto-generated from src/snippets/related-products-v2/related-products-v2.css — do not edit directly. */
/* src/snippets/related-products-v2/related-products-v2.css */
.related-products-v2 {
  display: grid;
  position: relative;
  /* Allow shrink so the viewport can overflow (grid min-width: auto otherwise
     grows with the track and Embla never sees scroll room). */
  min-width: 0;
  max-width: 100%;
  --slide-spacing: 0.5rem;
  --slide-size: 33%;
  width: 100%;
  margin-block-start: 1rem;

  @media screen and (min-width: 1024px) {
    margin-block-start: 2.5rem;
  }

  .embla__viewport {
    overflow: hidden;
    display: block;
    position: relative;
    min-width: 0;
    width: 100%;
  }

  .embla__container {
    display: flex;
    touch-action: pan-y pinch-zoom;
  }

  /*
   * When Embla is off: size to content and center.
   * When Embla is on (data-overflow): leave width unset — max-content
   * collapses Embla's scroll range to 0.
   */
  &:not([data-overflow]) .embla__container {
    width: max-content;
    margin-inline: auto;
  }

  .embla__slide {
    padding-left: var(--slide-spacing);
    flex: 0 0 auto;
    min-width: 0;
  }

  .container_embla__prev,
  .container_embla__next {
    width: 2rem;
    height: 2rem;
    z-index: 2;
    position: absolute;
    display: none;
    top: 50%;
    opacity: 1;
    transform: translateY(-50%);
    cursor: pointer;

    &[data-disabled] {
      opacity: 0;
      pointer-events: none;
      cursor: not-allowed;
    }
  }

  /* Arrows only when breakpoint rule allows (desktop); swipe uses data-overflow. */
  &[data-arrows] {
    .container_embla__prev,
    .container_embla__next {
      display: grid;
    }
  }

  .container_embla__prev {
    left: 0;
  }

  .container_embla__next {
    right: 0;
  }

  .embla__prev,
  .embla__next {
    cursor: pointer;
    display: grid;
    align-self: center;
    justify-self: center;
    width: 2rem;
    height: 2rem;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-full, 999px);
    border: var(--border-width-extra-small, 1px) solid
      var(--Border-primary, #000);
    background: var(--Background-primary, #fff);
    transform: none !important;
    transition: background-color 0.15s ease-out;
  }

  .embla__prev:hover,
  .embla__next:hover {
    background: var(--color-white-100, #f8f8f8);
  }

  .related-product {
    display: grid;
    width: fit-content;
    padding: var(--spacings-small-m, 0.5rem) var(--spacings-small-l, 0.75rem)
      var(--spacings-small-l, 0.75rem) var(--spacings-small-l, 0.75rem);
    border-radius: var(--radius-small, 2px);
    border: var(--border-width-extra-small, 1px) solid transparent;
    text-align: center;
    row-gap: 0.5rem;

    &.is-active {
      border: var(--border-width-extra-small, 1px) solid
        var(--Border-secondary, #717171);
    }

    .related-product__img {
      img,
      video {
        max-width: 2.5rem;
        width: 100%;
        object-fit: cover;
        aspect-ratio: 40 / 54;
      }
    }

    .related-product__content {
      display: grid;
      row-gap: 0.125rem;
    }
  }
}
/* END_SNIPPET:related-products-v2 */

/* START_SNIPPET:set-to-compose-form (INDEX:277) */
/* ⚠ Auto-generated from src/snippets/set-to-compose-form/set-to-compose-form.css — do not edit directly. */
/* src/snippets/set-to-compose-form/set-to-compose-form.css */
@layer reset, base, components, variants;

@layer components {
  .set-to-compose-form {
    align-self: flex-end;
  }
  .set-to-compose-form form {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--spacings-small-xl);
  }
  .set-to-compose-form__quantity-wrapper {
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    border-radius: var(--radius-full, 999px);
    background: var(--Background-secondary, #f8f8f8);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: var(--spacings-small-xs);
  }
  .set-to-compose-form__quantity-value {
    color: var(--Content-primary, #000);
  }
  .set-to-compose-form__decrement,
  .set-to-compose-form__increment {
    width: 1rem;
    height: 1rem;
    display: block;
    align-items: center;
    justify-content: center;
    color: var(--Content-primary, #000);
    transition: color 0.4s ease;

    @media screen and (max-width: 768px) {
      width: 1.0625rem;
      height: 1.0625rem;
    }

    &:disabled {
      color: var(--State-Disable, #c8c8c8);
    }
  }
}
/* END_SNIPPET:set-to-compose-form */

/* START_SNIPPET:shoppable-product (INDEX:279) */
/* ⚠ Auto-generated from src/snippets/shoppable-product/shoppable-product.css — do not edit directly. */
/* src/snippets/shoppable-product/shoppable-product.css */
/*
  Position des pins shoppable.

  Les valeurs sont propres à chaque pin et arrivent par --pin-* en style inline
  (snippets/shoppable-product.liquid). Seules les RÈGLES vivent ici : Shopify les
  bundle une fois dans styles.css, quel que soit le nombre de pins, là où
  l'ancienne balise de style par pin repartait dans chaque réponse HTML.

  @layer variants et non components : `.shoppable-product` est déjà défini en
  components dans src/sections/shoppable/shoppable.css. À layer et spécificité
  égaux, c'est l'ordre de concaténation de styles.css qui départagerait — et
  Shopify ne le spécifie pas. variants garantit l'override.

  @media et non @container : aucun ancêtre ne porte container-type, une requête
  de conteneur ne matcherait donc jamais.
*/
@layer variants {
  .shoppable-product {
    top: var(--pin-y);
    left: var(--pin-x);
  }

  @media (max-width: 1024px) {
    .shoppable-product {
      top: var(--pin-y-mobile);
      left: var(--pin-x-mobile);
    }
  }
}
/* END_SNIPPET:shoppable-product */

/* START_SNIPPET:slide-push-menu-mobile (INDEX:281) */
@layer components {
    slide-push-mobile {
      position: relative;
      max-width: 100%;
      display: block;
      /* Reprend l'aplomb des anciennes puces, qui flottaient en absolu à
         1rem du bas du composant. */
      padding-bottom: calc(var(--spacing) * 8);
    }
    .slide-push-menu-mobile {
      position: relative;
      padding-top: calc(var(--spacing) * 20);
      /* La barre est en flux, plus en absolu : ce padding ne réserve donc plus
         sa place, il ne fait que l'écarter des cartes. */
      padding-bottom: calc(var(--spacing) * 12);
      overflow-x: scroll;
      display: flex;
      scroll-snap-type: x proximity;
      scroll-behavior: smooth;
      scroll-snap-align: start;
      -webkit-overflow-scrolling: touch;
      flex-wrap: nowrap;
      column-gap: calc(var(--spacing) * 4);
      max-width: 100%;
    }
    .slide-push-menu-mobile__item {
      flex: 0 0 auto;
      scroll-snap-align: start;
      width: 18.75rem;
      box-sizing: border-box;
      display: grid;
      /* Les descriptions de longueurs inégales ne doivent pas décaler
         verticalement les visuels d'une carte à l'autre. */
      align-content: start;
      row-gap: calc(var(--spacing) * 8);
      text-align: center;
    }
    .slide-push-menu-mobile__image-link img {
      aspect-ratio: 4/3;
      height: 100%;
    }
    /* Gabarit repris de `.push-menu__content` (src/sections/header/header.css) :
       les classes du push desktop ne sont pas réutilisables telles quelles, car
       `.push-menu` porte un `translateX` / `opacity: 0` piloté par l'ouverture
       du sous-menu qui rendrait la carte mobile invisible. */
    .slide-push-menu-mobile__content {
      display: grid;
      text-align: center;
      row-gap: calc(var(--spacing) * 4);
      padding: 0 var(--spacings-small-xl, 1rem) var(--spacings-small-xl, 1rem);
    }
    .slide-push-menu-mobile__description {
      word-break: break-word;
    }
    .slide-push-menu-mobile__link {
      /* Neutralise le `margin: 1.25rem auto auto` de `.button-primary--link`,
         qui vit en @layer base — `components` l'emporte. */
      margin: 0;
      padding-top: var(--spacings-small-l);
      width: fit-content;
      justify-self: center;
    }
    slide-push-mobile .embla__progress {
      margin-inline: auto;
      width: 15rem;
      max-width: 90%;
      height: 0.0625rem;
      background: var(--State-Disable, #c8c8c8);
      border-radius: var(--radius-small, 2px);
      overflow: hidden;
    }
    slide-push-mobile .embla__progress__bar {
      height: 100%;
      width: calc(100% / var(--push-slide-count, 1));
      background: var(--color-black, #000);
      border-radius: var(--radius-small, 2px);
      will-change: transform;
      transition: transform 0.3s ease;
    }
    @media screen and (min-width: 1024px) {
      slide-push-mobile {
        display: none;
      }
    }
  }
/* END_SNIPPET:slide-push-menu-mobile */

/* START_SNIPPET:slider-button (INDEX:282) */
/* ⚠ Auto-generated from src/snippets/slider-button/slider-button.css — do not edit directly. */
/* src/snippets/slider-button/slider-button.css */
.embla__prev svg,
.embla__next svg {
  inline-size: var(--icon-chevron-size);
  block-size: var(--icon-chevron-size);
}
/* END_SNIPPET:slider-button */

/* START_SNIPPET:sticky-composition-bar (INDEX:284) */
/* ⚠ Auto-generated from src/snippets/sticky-composition-bar/sticky-composition-bar.css — do not edit directly. */
/* src/snippets/sticky-composition-bar/sticky-composition-bar.css */
@layer reset, base, components, variants;

@layer components {
  .sticky-composition-bar {
    --section-max-width: 120rem;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: var(--background-primary, #ffffff);
    border-top: 1px solid var(--State-Disable, #c8c8c8);
    width: 100%;
    box-sizing: border-box;
    transition: height 0.8s ease-out;
    overflow: hidden;

    &.open {
      height: var(--open-height);
    }

    &:not(.open) {
      height: var(--closed-height);
    }
  }

  .sticky-composition-bar_header {
    width: 100%;
    max-width: var(--section-max-width);
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacings-small-xl) var(--spacings-large-xl);

    @media screen and (max-width: 768px) {
      padding: var(--spacings-small-xl);
    }
  }

  .sticky-composition-bar--left {
    display: flex;
    align-items: center;
    text-align: left;
  }

  .sticky-composition-bar_title {
    color: var(--Content-primary, #000);
  }

  .sticky-composition-bar--right {
    display: flex;
    align-items: center;
    gap: var(--spacings-small-xl);
  }

  .sticky-composition-bar_price {
    color: var(--Content-primary, #000);
    white-space: nowrap;
  }

  .sticky-composition-bar_toggle {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    transform: rotate(90deg);
    transition: transform 0.3s ease-in-out;

    .sticky-composition-bar.open & {
      transform: rotate(270deg);
    }
  }

  .sticky-composition-bar_toggle_icon {
    width: var(--icon-chevron-size);
    height: var(--icon-chevron-size);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--Content-primary, #000);

    & svg {
      inline-size: var(--icon-chevron-size);
      block-size: var(--icon-chevron-size);
    }

    @media screen and (max-width: 768px) {
      display: inline-block;
    }
  }

  .sticky-composition-bar_content {
    padding: var(--spacings-medium-xs) 0;
    max-width: var(--section-max-width);
    margin: 0 auto;
  }

  .sticky-composition-bar_content_items {
    display: flex;
    padding: 0 var(--spacings-medium-m);
    justify-content: center;
    align-items: flex-start;
    gap: var(--spacings-small-xl);
    align-self: stretch;

    @media screen and (max-width: 768px) {
      padding: 0 var(--spacings-small-xl);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(auto-fill, 1fr);
      column-gap: var(--spacings-small-m);
      row-gap: var(--spacings-small-xl);
      max-height: 72vh;
      overflow-y: auto;
    }
  }

  .sticky-composition-bar_content_item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 0 0;
    align-self: stretch;
    background: var(--Background-secondary, #f8f8f8);
    aspect-ratio: 216/328;
    max-width: min(28.125rem, 20vw);
    position: relative;

    &.has-content {
      aspect-ratio: unset;
    }

    .mobile-hidden {
      display: block;
    }

    .mobile-visible {
      display: none;
    }

    @media screen and (max-width: 768px) {
      aspect-ratio: unset;
      max-width: 100%;

      .mobile-hidden {
        display: none;
      }

      .mobile-visible {
        display: block;
      }
    }
  }

  .sticky-composition-bar_content_item_button--remove {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    border-radius: var(--radius-full, 999px);
    border: var(--border-width-extra-small, 1px) solid
      var(--Border-primary, #000);
    background: var(--Background-primary, #fff);
    padding: 0;
    margin: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition:
      background 0.3s ease,
      opacity 0.3s ease;
    pointer-events: none;

    &:hover {
      background: var(--Background-secondary, #f8f8f8);
    }
  }

  .sticky-composition-bar_content_item.has-content
    .sticky-composition-bar_content_item_button--remove {
    opacity: 1;
    pointer-events: auto;
  }

  .sticky-composition-bar_content_item_button--remove_icon {
    width: 1rem;
    height: 1rem;

    @media screen and (max-width: 768px) {
      width: 1.125rem;
      height: 1.125rem;
    }
  }

  .sticky-composition-bar_content_item_image {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 3/4;
  }

  .sticky-composition-bar_content_item_image img:not([src]) {
    display: none;
  }

  .sticky-composition-bar_content_item_title {
    width: 100%;
    padding: var(--spacings-small-xl) var(--spacings-small-m);
    text-align: center;
  }

  .sticky-composition-bar_content_button {
    width: fit-content;
    margin: 0 auto;
    margin-top: var(--spacings-medium-m);
  }
}
/* END_SNIPPET:sticky-composition-bar */

/* START_SNIPPET:story-list (INDEX:285) */
/* ⚠ Auto-generated from src/snippets/story-list/story-list.css — do not edit directly. */
/* src/snippets/story-list/story-list.css */
@layer reset, base, components, variants, settings;

@layer components {
  .story-list {
    display: grid;
    /* Repli si l'hôte n'a pas reçu ses custom properties inline.
       ⚠️ Jamais de délimiteur Liquid littéral dans ce fichier : il atterrit dans
       le bloc stylesheet généré, où Shopify le parse comme un tag. */
    --story-ratio-mobile: 9/16;
    --story-ratio-desktop: 16/9;
    --story-play-state: running;
    --story-progress: 0;
    /* Pas de `--story-duration` ici : Liquid résout le défaut, le JS le relaie.
       Le déclarer en ferait un second réglage à garder d'accord avec le premier. */
    /* Le JS publie les deux couples, le breakpoint tranche ici. Le seuil DOIT
       rester celui de `.story-list__stage` et du `<source media>` des images. */
    --story-fg-desktop: #ffffff;
    --story-fg-subtle-desktop: #c8c8c8;
    --story-fg-mobile: #ffffff;
    --story-fg-subtle-mobile: #c8c8c8;
    --story-fg: var(--story-fg-mobile);
    --story-fg-subtle: var(--story-fg-subtle-mobile);

    @media screen and (min-width: 1024px) {
      --story-fg: var(--story-fg-desktop);
      --story-fg-subtle: var(--story-fg-subtle-desktop);
    }
  }

  .story-list__media {
    position: relative;
    display: grid;
    overflow: hidden;
    min-width: 0;
  }

  /* Le ratio descend jusqu'au média : la scène le porte pour réserver la hauteur
     avant le premier octet, le média le porte à son tour pour que sa boîte vienne
     du ratio et non d'un étirement. */
  .story-list__stage {
    aspect-ratio: var(--story-ratio-mobile);
    display: grid;
    overflow: hidden;

    /* Au-dessus de la surface de tap pour que le lien d'une carte soit atteignable,
       mais tout la traverse : sinon elle confisque pause et navigation. */
    position: relative;
    z-index: 2;
    pointer-events: none;

    img,
    video {
      grid-area: 1 / 1;
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: var(--story-ratio-mobile);
      /* `cover` et non `contain` : écart assumé avec le « Maintains original aspect
         ratio » de la US, au profit d'un module qui ne montre jamais de bandes. */
      object-fit: cover;
    }

    @media screen and (min-width: 1024px) {
      aspect-ratio: var(--story-ratio-desktop);

      img,
      video {
        aspect-ratio: var(--story-ratio-desktop);
      }
    }
  }

  /* Même case de grille pour tous : hauteur unique, donc aucun saut au changement. */
  .story-list__segment {
    grid-area: 1 / 1;
    display: grid;
    min-width: 0;

    &[hidden] {
      display: none;
    }
  }

  .story-list__variant {
    grid-area: 1 / 1;
    display: grid;
    width: 100%;
    height: 100%;
  }

  /* ── Cartes contenu ────────────────────────────────────────────────────── */

  /* Même contrat que `src/blocks/_media-container/_media-container.css`. */
  .story-list__cards {
    grid-area: 1 / 1;
    /* Flex et non grille : en grille la carte se calerait dans SA rangée implicite
       et resterait collée en haut. */
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /* La gouttière suit le CADRAGE et non le breakpoint, comme le côté des
       cartes : 16px en vertical, 24px en paysage. Le cadrage mobile est vertical,
       c'est donc la valeur de base ; seul le paysage desktop l'élargit, dans le
       bloc `v-cards-inline-end` ci-dessous. */
    padding: var(--spacings-small-xl, 1rem);
    pointer-events: none;
    /* Le lien n'hérite pas de la protection de la surface : appui maintenu = menu iOS. */
    -webkit-touch-callout: none;
    /* Déduite du fond par Liquid. Ni `.label-m-regular` ni `.body-m-light` ne
       déclarent de `color` : tout hérite d'ici. */
    color: var(--story-card-fg, #000000);

    /* Seul le LIEN reprend le pointeur : la carte entière ferait une zone morte où
       ni la pause ni la navigation ne répondraient. Vaut pour la carte comme pour
       le CTA, d'où la règle ici et la cible élargie plus bas. */
    a {
      pointer-events: auto;
    }
  }

  /* En 9/16 les cartes restent centrées, quel que soit le breakpoint : c'est le
     cadrage qui décide du côté, pas la largeur d'écran. `v-cards-inline-end` ne
     marque donc rien d'autre que le cadrage paysage desktop, d'où la gouttière
     large ici : elle a la même cause que l'alignement. */
  @media screen and (min-width: 1024px) {
    .story-list.v-cards-inline-end .story-list__cards {
      justify-content: flex-end;
      padding: var(--spacings-medium-s, 1.5rem);
    }

    /* … sauf le CTA, TOUJOURS centré, quel que soit le cadrage : une carte est un
       encart qu'on pose dans un angle, un bouton est une invitation qu'on met au
       milieu. Seul l'axe horizontal change — il reste en bas, comme la carte.
       `:has()` plutôt qu'une classe de variante : le markup reste identique dans
       les deux renderers, donc rien à garder d'accord entre le Liquid et son
       jumeau JS. Le thème s'en sert déjà (`sections/section-stories.liquid`) et
       le plancher Safari 16.4 le couvre.
       La gouttière large, elle, est bien conservée : elle tient au cadrage. */
    .story-list.v-cards-inline-end .story-list__cards:has(.story-list__cta) {
      justify-content: center;
    }
  }

  /* `min-width: 0` : sans lui la carte déborde la scène, qui la rogne en silence. */
  .story-list__card {
    width: 100%;
    flex: 0 1 auto;
    /* 361px. Plafond propre au module : `c-info-card` porte le sien, plus large,
       pour les surfaces où la carte n'est pas posée sur un visuel. */
    max-width: 22.5625rem;
  }

  /* La cible élargie ne vaut que pour le lien de la CARTE : une ligne de texte ne
     fait que 20 px de haut, le pseudo-élément hérite du pointeur et la porte à
     44 px, le seuil AAA (WCAG 2.5.5), sans toucher au dessin.
     ⚠️ Surtout pas sur `.story-list__cards a`, qui attraperait aussi le CTA :
     `.cta.v-primary.v-light::after` se sert du MÊME pseudo-élément pour son
     soulignement animé, et les deux règles se marcheraient dessus. Le bouton
     `v-large` dépasse de toute façon déjà 44 px. */
  .story-list__card a {
    position: relative;

    &::after {
      content: '';
      position: absolute;
      inset: -0.75rem -1rem;
    }
  }

  /* Le CTA occupe le même créneau que la carte — même gouttière, même côté, même
     zone de pointeur — mais pas sa largeur : un bouton se dimensionne sur son
     libellé là où la carte tient 361 px. */
  .story-list__cta {
    flex: 0 0 auto;
  }

  /* Une ANIMATION et non `@starting-style`, qui demanderait Safari 17.5 au-dessus
     du plancher 16.4 du thème : un élément en `display: none` recrée son animation
     quand il réapparaît, donc `hidden` → visible est déjà le déclencheur.
     ⚠️ Ne jamais nommer ces keyframes `story-fill` : `handleAnimationEnd` filtre
     sur ce nom et prendrait chaque carte pour une fin de story. Le CTA REPREND
     ces keyframes plutôt que d'en déclarer d'autres, pour la même raison. */
  .story-list__card,
  .story-list__cta {
    animation: story-card-in 0.6s cubic-bezier(0.48, -0.01, 0.34, 0.99) 0.2s
      both;
    /* `both` obligatoire : sans lui la carte s'affiche pleine pendant le délai. */
  }

  @keyframes story-card-in {
    from {
      opacity: 0;
      transform: translateY(0.75rem);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .story-list__card {
      animation: none;
    }
  }

  /* Un segment vidéo porte ses deux cadrages, le CSS en montre un. Le seuil DOIT
     rester celui de `.story-list__stage` et du `<source media>` des images. */
  .story-list__variant[data-variant='desktop'] {
    display: none;
  }

  @media screen and (min-width: 1024px) {
    .story-list__variant[data-variant='desktop'] {
      display: grid;
    }

    .story-list__variant[data-variant='mobile'] {
      display: none;
    }
  }

  /* ── Rangée du haut ────────────────────────────────────────────────────── */

  /* Le flex donne à la barre l'espace laissé libre par les icônes ; un
     positionnement absolu obligerait à le réserver à la main. */
  .story-list__topbar {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: var(--spacings-small-m, 0.5rem);
    /* Les boutons épousent leur icône : sans ce padding, glyphes collés au bord.
       Haut plus serré que les trois autres côtés. */
    padding: var(--spacings-small-m, 0.5rem) var(--spacings-small-xl, 1rem)
      var(--spacings-small-xl, 1rem);
    /* Voile de lisibilité : les commandes se posent sur un média contribué, dont
       aucune dominante n'est garantie en haut de cadre. Porté par la rangée et
       non par un pseudo-élément — elle couvre déjà exactement la bande à voiler. */
    border-radius: var(--radius-medium, 4px) var(--radius-medium, 4px) 0 0;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.3) -138.39%,
      rgba(0, 0, 0, 0) 100%
    );
    /* Seuls les boutons captent le clic : sinon la rangée vole la bande haute. */
    pointer-events: none;

    /* Aucune couleur fixe ne tient sur un média qui change à chaque segment.
       `--story-fg` est DÉDUITE par Liquid de la dominante contribuée, jamais
       réglée — aucune combinaison illisible n'est donc configurable. Même montage
       que `snippets/plp-night-toggle.liquid`. */
    color: var(--story-fg, #fff);
  }

  /* ── Barres de progression ─────────────────────────────────────────────── */

  .story-list__bars {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: var(--spacings-small-s, 0.25rem);
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
  }

  /* Même couple déduit que le reste de la rangée, pour la même raison. */
  .story-bar {
    flex: 1 1 0;
    height: 0.1875rem;
    border-radius: var(--radius-small, 2px);
    background: var(--story-fg-subtle, #c8c8c8);
    overflow: hidden;
  }

  .story-bar__fill {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--story-fg, #fff);
    transform: scaleX(0);
    transform-origin: left center;
    /* Aucune transition : la boucle rAF donne déjà la fluidité, et une barre qui
       traîne mentirait sur le temps restant. */
  }

  /* Régime image : `animation-play-state` est l'unique levier de pause, ce qui
     fait repartir la reprise au point de gel sans calcul de temps écoulé. */
  [data-story-regime='timed'] .story-bar[data-story-active] .story-bar__fill {
    animation: story-fill var(--story-duration) linear forwards;
    animation-play-state: var(--story-play-state);
  }

  /* Régime vidéo : la vidéo est l'horloge, la barre se fige avec elle. */
  [data-story-regime='media'] .story-bar[data-story-active] .story-bar__fill {
    animation: none;
    transform: scaleX(var(--story-progress));
  }

  @keyframes story-fill {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }

  /* ── Surface tactile ───────────────────────────────────────────────────── */

  .story-list__surface {
    position: absolute;
    inset: 0;
    z-index: 1;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    /* Le défilement vertical doit survivre à la capture du pointeur, et le
       pinch-zoom aussi : `pan-y` seul rend la story inzoomable, alors que
       chaque autre carrousel du thème laisse passer le geste. */
    touch-action: pan-y pinch-zoom;
    /* Sinon iOS ouvre son menu contextuel et vole le geste de maintien. */
    -webkit-touch-callout: none;
    user-select: none;
  }

  /* ── Commandes ─────────────────────────────────────────────────────────── */

  /* Les boutons épousant leur icône, la gouttière doit être explicite. */
  .story-list__controls,
  .story-list__nav {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--spacings-small-s, 0.25rem);
  }

  /* Les chevrons ne servent qu'en desktop : en mobile, ce sont les zones de tap. */
  @media screen and (max-width: 1023px) {
    .story-list__nav {
      display: none;
    }
  }

  .story-btn--nav[disabled] {
    opacity: 0.4;
    cursor: default;
  }

  .story-btn {
    pointer-events: auto;
    display: grid;
    align-items: center;
    justify-content: center;
    /* Le bouton épouse son icône, donc la cible vaut 24 px : le minimum de la
       SC 2.5.8, tout juste. Le seuil AAA demanderait une boîte plus grande que le
       dessin — choix assumé. */
    padding: 0;
    border: none;
    background: transparent;
    /* C'est la rangée qui porte la couleur, et le fondu qui la retourne. */
    color: inherit;
    cursor: pointer;

    &[hidden] {
      display: none;
    }
  }

  .story-btn__icon {
    grid-column: 1/-1;
    grid-row: 1/-1;
    display: flex;
    align-items: center;
    justify-content: center;

    &[hidden] {
      pointer-events: none;
      visibility: hidden;
    }
  }

  /* L'icône seule est dimensionnée ici : la cible est celle du bouton, au-dessus. */
  .story-btn svg {
    width: var(--icon-chevron-size);
    height: var(--icon-chevron-size);
  }

  /* Pas de bouton replay : le bouton lecture devient « recommencer », une commande
     au centre du visuel aurait masqué la carte contenu. */
}

@layer variants {
  /* Chaque breakpoint pose sa gouttière et n'hérite pas de l'autre : le plein
     écran s'écrit `0`, il ne s'obtient pas en omettant la règle. */
  .story-list.v-container-full-width-mobile {
    padding-inline: 0;
  }

  .story-list.v-container-padded-mobile {
    padding-inline: var(--spacings-medium-m, 2rem);
  }

  @media screen and (min-width: 1024px) {
    .story-list.v-container-full-width-desktop {
      padding-inline: 0;
    }

    .story-list.v-container-padded-desktop {
      padding-inline: 7.5rem;
    }
  }

  /* ── Tuile placée dans la grille collection ────────────────────────────── */
  /* 768px et non 1024px : celui de `.collection-grid`. Grille et placement DOIVENT
     basculer ensemble. Valeurs identiques à `snippets/push-collection.liquid`. */
  .story-list.v-placed {
    min-width: 0;
    grid-column: var(--story-col-mobile, 1) / span var(--story-span-mobile, 1);
    grid-row: var(--story-row-mobile, auto);

    /* Une tuile de grille ne porte jamais le padding de module. */
    padding-inline: 0;

    @media screen and (min-width: 768px) {
      grid-column: var(--story-col-desktop, 1) / span
        var(--story-span-desktop, 1);
      grid-row: var(--story-row-desktop, auto);
    }
  }

  /*
   * HitsGrid hoists placement vars onto the `<li>` — the list item is then the
   * grid cell. Direct-child rules on `.story-list.v-placed` still cover the
   * Liquid `display: contents` wrapper path.
   */
  :is(.collection-grid, .collection-grid--next, .grid-collection)
    > li:has(> .story-list.v-placed) {
    grid-column: var(--story-col-mobile, 1) / span var(--story-span-mobile, 1);
    grid-row: var(--story-row-mobile, auto);
    min-width: 0;
    list-style: none;

    @media screen and (min-width: 768px) {
      grid-column: var(--story-col-desktop, 1) / span
        var(--story-span-desktop, 1);
      grid-row: var(--story-row-desktop, auto);
    }
  }
}
/* END_SNIPPET:story-list */

/* START_SNIPPET:virtual-set-composition (INDEX:301) */
@layer components {
    /* Le retrait latéral mobile est porté par chaque bloc de la colonne
       description, jamais par la colonne elle-même, qui ne le prend qu'à partir
       de 1024px : sans lui, les cartes touchent les bords de l'écran. */
    .virtual-set-composition {
      display: grid;
      gap: var(--spacings-medium-xs, 1.25rem);
      width: 100%;
      padding-top: var(--spacings-small-xl, 1rem);
      padding-inline: var(--spacings-small-xl, 1rem);
      text-align: left;

      @media screen and (min-width: 1024px) {
        padding-inline: 0;
      }
    }

    .virtual-set-composition__heading {
      margin: 0;
      text-align: center;
    }

    .virtual-set-composition__list {
      display: grid;
      gap: var(--spacings-small-m, 0.5rem);
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .virtual-set-composition__item {
      margin: 0;
    }

    /* Grisé, pas masqué : le composant reste lisible et à sa place, seule sa
       disponibilité change d'apparence. C'est le CTA du coffret qui porte le
       message, la carte n'en affiche aucun. */
    .virtual-set-composition__item.is-unavailable .product-card-horizontal {
      filter: grayscale(1);
      opacity: 0.45;
    }

    .virtual-set-composition__item .product-card-horizontal {
      width: 100%;
      max-width: none;
    }
  }
/* END_SNIPPET:virtual-set-composition */