/** Shopify CDN: Minification failed

Line 1218:0 Unexpected "{"
Line 1218:1 Expected identifier but found "%"
Line 1219:17 Unexpected "2026"
Line 1221:3 Expected identifier but found "%"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:ax-avantages (INDEX:4) */
.ax-avantages {
  --container-gutter: 10px;
}

@media screen and (min-width: 700px) {
  .ax-avantages {
    --container-gutter: 16px;
  }
}

.ax-avantages__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

@media screen and (min-width: 1000px) {
  .ax-avantages__grid {
    grid-template-columns: 1.5fr 1fr;
    gap: 16px;
    align-items: stretch;
  }
}

.ax-avantages__panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border-radius: 8px;
}

.ax-avantages__bg,
.ax-avantages__overlay,
.ax-avantages__content {
  grid-area: 1 / 1;
  min-width: 0;
}

.ax-avantages__bg {
  z-index: 0;
}

.ax-avantages__bg picture {
  display: block;
  height: 100%;
}

.ax-avantages__bg img,
.ax-avantages__bg svg,
.ax-avantages__image {
  display: block;
  width: 100%;
  height: auto;
  min-height: 100%;
  object-fit: cover;
}

.ax-avantages__overlay {
  z-index: 1;
  background: var(--ax-overlay-color, #000);
  opacity: var(--ax-overlay-opacity, 0);
  pointer-events: none;
}

.ax-avantages__content {
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.75rem;
}

@media screen and (min-width: 1000px) {
  .ax-avantages__content {
    padding: 2.5rem;
  }
}

.ax-avantages__panel--left .ax-avantages__content {
  align-items: flex-start;
  text-align: left;
}

.ax-avantages__panel--right .ax-avantages__content {
  align-items: center;
  text-align: center;
}

.ax-avantages__head {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.ax-avantages__panel--right .ax-avantages__head {
  align-items: center;
}

.ax-avantages__tag {
  color: var(--ax-tag-text, inherit);
}

.ax-avantages__title {
  color: var(--ax-title-color, inherit);
  font-family: var(--heading-font-family);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.ax-avantages__title > * {
  margin: 0;
}

.ax-avantages__title strong,
.ax-avantages__title b {
  /* Charte V2 : emphase en FreightNeo Pro Medium (cf. display/H1/H2 dans theme.css). */
  font-weight: 500;
}

.ax-avantages__title--lg {
  font-size: var(--text-h2);
}

.ax-avantages__title--sm {
  font-size: var(--text-h3);
}

.ax-avantages__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.ax-avantages__panel--right .ax-avantages__actions {
  justify-content: center;
}

/*
 * Bouton standard du thème (.button) : couleurs, hover et typo sont hérités,
 * les couleurs marchand sont injectées via snippets/button-color-vars.liquid.
 * On ne surcharge ici que les espacements propres à la section.
 */
.ax-avantages__button {
  --button-padding-block: 0.85rem;
  --button-padding-inline: 1.5rem;
}
/* END_SECTION:ax-avantages */

/* START_SECTION:ax-breadcrumb (INDEX:5) */
.ax-breadcrumb {
    padding-block-start: 1rem;
  }

  /* Maquette : 32px entre le fil d'ariane et le contenu qui suit */
  .shopify-section:has(.ax-breadcrumb) + .shopify-section .section-spacing {
    padding-block-start: 2rem;
  }

  .ax-breadcrumb__list {
    display: flex;
    gap: 1.25rem;
  }

  .ax-breadcrumb__item {
    font-size: var(--text-xs);
    font-weight: 400;
    opacity: 0.7;
    position: relative;
  }

  /* Élément courant (dernier segment, non cliquable) */
  .ax-breadcrumb__item--current {
    opacity: 1;
  }

  /* Séparateur (ex: "•" ou "/" en ::before/::after) */
  .ax-breadcrumb__separator {
    width: 0.25rem;
    height: 0.25rem;
    background-color: currentColor;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.7;
    position: absolute;
    left: -0.75rem;
    top: 50%;
    transform: translateY(-50%);
  }
/* END_SECTION:ax-breadcrumb */

/* START_SECTION:ax-featured-product (INDEX:7) */
.ax-featured {
  --container-gutter: 10px;
}

@media screen and (min-width: 700px) {
  .ax-featured {
    --container-gutter: 16px;
  }
}

@media screen and (max-width: 999px) {
  .ax-featured__slideshow {
    border-radius: 24px;
  }
}

.ax-featured__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

@media screen and (min-width: 1000px) {
  .ax-featured__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
  }
}

.ax-featured__slideshow {
  position: relative;
  display: grid;
  overflow: hidden;
}

.ax-featured__slide {
  grid-area: 1 / -1;
  display: grid;
  overflow: hidden;
  will-change: opacity;
}

.ax-featured__slide:not(.is-selected) {
  visibility: hidden;
}

.ax-featured__slide-media,
.ax-featured__slide-content,
.ax-featured__slide-link {
  grid-area: 1 / -1;
}

.ax-featured__slide-media,
.ax-featured__slide-media > picture {
  display: block;
}

.ax-featured__slide-image {
  width: 100%;
  height: auto;
  display: block;
}

.ax-featured__slide-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem;
  color: #fff;
  pointer-events: none;
}

.ax-featured__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.ax-featured__slide-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
}

.ax-featured__slide-title {
  display: flex!important;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
}

.ax-featured__slide-title-strong,
.ax-featured__slide-title-light {
  font-size: 40px;
  font-weight: 800;
  line-height: 100%;
  letter-spacing: -1.2px;
}

.ax-featured__slide-title-light {
  font-weight: 400;
}

/*
 * Faux bouton plein posé sur l'image : fond blanc, libellé Mulberry. Sélecteur
 * doublé (.button.…) car le bundle des sections est chargé AVANT theme.css, donc
 * à spécificité égale les tokens du thème gagneraient. Le hover est celui du
 * thème, déclenché par data-button-hover-proxy sur la slide (le bouton n'est pas
 * cliquable, c'est le lien qui recouvre la slide qui l'est).
 */
.button.ax-featured__slide-button {
  pointer-events: none;
  font-size: 0.9375rem;

  --button-background: 255 255 255;
  --button-text-color: 107 0 0;
  --button-padding-block: 0.75rem;
  --button-padding-inline: 1.25rem;
}

.ax-featured__slide-link {
  z-index: 2;
}

.ax-featured__progress {
  position: absolute;
  z-index: 3;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.5rem;
  width: auto;
  transform: none;
  color: #fff;
  justify-content: flex-start;
}

.ax-featured__progress .scroll-marker {
  position: relative;
  overflow: hidden;
}

.ax-featured__product {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ax-featured__product-link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.ax-featured__product-media {
  position: relative;
  overflow: hidden;
}

.ax-featured__product-badge {
  position: absolute;
  z-index: 1;
  top: 1rem;
  left: 1rem;
}

.ax-featured__product-image {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.ax-featured__product-quick-buy {
  position: absolute;
  z-index: 3;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 1rem;
}

.ax-featured__product-quick-buy .button {
  --button-background: 255 255 255;
  --button-text-color: 107 0 0;
  font-weight: 700;
}

@media screen and (pointer: fine) {
  .ax-featured__product-quick-buy {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
  }

  .ax-featured__product:hover .ax-featured__product-quick-buy,
  .ax-featured__product:focus-within .ax-featured__product-quick-buy {
    opacity: 1;
    transform: translateY(0);
  }
  
  .ax-featured__product-quick-buy .button:not([disabled]):not([aria-busy='true']):hover {
    background: rgb(var(--button-background));
    color: rgb(var(--button-text-color));
    border-color: rgb(var(--button-border-color));
  }
}

@media screen and (max-width: 999px) {
  .ax-featured__product-quick-buy {
    opacity: 1;
    transform: none;
  }
}

.ax-featured__product-info {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.ax-featured__product-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.ax-featured__product-title {
  --line-clamp-count: 1;
  font-size: 16px;
  font-weight: 600;
}

@media screen and (min-width: 700px) {
  .ax-featured__product-title {
    font-size: 18px;
  }
}

.ax-featured__product-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.9375rem;
  white-space: nowrap;
}

.ax-featured__product-rating .icon {
  width: 0.9375rem;
  height: 0.9375rem;
}

.ax-featured__product-subtitle {
  font-size: var(--text-sm);
}

.ax-featured__product-price {
  font-size: var(--text-base);
  font-weight: 600;
}

@media screen and (min-width: 1000px) {
  .ax-featured__slide-title-strong,
  .ax-featured__slide-title-light {
    font-size: 64px;
    letter-spacing: -1.92px;
  }

  .ax-featured__product {
    height: 100%;
  }

  .ax-featured__product-media {
    flex: 1 1 auto;
    min-height: 0;
  }

  .ax-featured__product-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}
/* END_SECTION:ax-featured-product */

/* START_SECTION:ax-histoire (INDEX:8) */
.ax-histoire__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}

@media screen and (min-width: 1000px) {
  .ax-histoire__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: var(--ax-histoire-min-height, 600px);
  }
}

.ax-histoire__intro {
  display: flex;
}

.ax-histoire__intro-inner {
  display: flex;
  flex: 1 0 0;
  min-width: 200px;
  min-height: fit-content;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  /* Sur mobile on s'aligne sur la gouttière du thème (--container-gutter =
     1.5rem) : les 3rem fixes ne laissaient que ~264px de contenu sur un écran
     de 360px, d'où le rendu « zoomé » et le titre coupé. */
  padding: 3rem var(--container-gutter);
  text-align: center;
}

@media screen and (min-width: 1000px) {
  .ax-histoire__intro-inner {
    padding: 3rem;
  }
}

.ax-histoire__title {
  /* Suit la couleur de texte du jeu de couleurs du panneau (blanc sur fond
     foncé, Mulberry sur le rose clair de la PLP) — était blanc en dur. */
  color: rgb(var(--text-color));
  text-align: center;
  font-family: var(--heading-font-family);
  /* Token Figma h1 mobile = 40px (cf. snippets/css-variables.liquid ~l.155) ;
     était à 44px, hors échelle. Le 88px desktop plus bas est conservé. */
  font-size: 40px;
  /* Charte V2 : taille H1 → FreightNeo Pro Medium (500). */
  font-weight: 500;
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-letter-spacing);
}

.ax-histoire__title > * {
  margin: 0;
}

@media screen and (min-width: 1000px) {
  .ax-histoire__title {
    font-size: 88px;
  }
}

.ax-histoire__intro-cta .button {
  --button-background: 255 255 255;
  --button-text-color: 107 0 0;
}

.ax-histoire__intro-text {
  font-size: var(--text-sm);
  line-height: 1.6;
}

.ax-histoire__intro-text > * {
  margin: 0;
}

.ax-histoire__intro-text > * + * {
  margin-top: 0.75em;
}

@media screen and (min-width: 1000px) {
  .ax-histoire__intro-text {
    max-width: 50%;
  }
}

.ax-histoire__media {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

@media screen and (min-width: 1000px) {
  .ax-histoire__media {
    aspect-ratio: auto;
  }
}

.ax-histoire__media-bg,
.ax-histoire__media-scrim {
  position: absolute;
  inset: 0;
}

.ax-histoire__media-bg > picture,
.ax-histoire__media-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ax-histoire__media-scrim {
  z-index: 1;
  background: linear-gradient(to top, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0) 45%);
  pointer-events: none;
}

.ax-histoire__media-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
}

@media screen and (min-width: 1000px) {
  .ax-histoire__media-content {
    padding: 3rem;
  }
}

.ax-histoire__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ax-histoire__media-text {
  font-size: var(--text-sm);
  line-height: 1.6;
}

.ax-histoire__media-text > * {
  margin: 0;
}

.ax-histoire__media-text > * + * {
  margin-top: 0.75em;
}

@media screen and (min-width: 1000px) {
  .ax-histoire__media-text {
    max-width: 50%;
  }
}
/* END_SECTION:ax-histoire */

/* START_SECTION:ax-stats (INDEX:10) */
.ax-stats__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
  }

  @media screen and (min-width: 1000px) {
    .ax-stats__grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      min-height: var(--ax-stats-min-height, 600px);
    }
  }

  .ax-stats__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
  }

  /* Desktop : l'image reste collée pendant le scroll des onglets, sans jamais
   dépasser la hauteur de l'écran (moins la zone de header sticky). */
  @media screen and (min-width: 1000px) {
    .ax-stats__media {
      aspect-ratio: auto;
      position: sticky;
      inset-block-start: var(--sticky-area-height, 0px);
      align-self: start;
      height: calc(100vh - var(--sticky-area-height, 0px));
      max-height: 100vh;
    }
  }

  .ax-stats__media :is(img, svg),
  .ax-stats__media picture {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Les slides sont empilées et masquées par `visibility` et non `display` : elles
   restent dans la mise en page, donc leurs images lazy sont déjà chargées quand
   on change d'onglet. */
  .ax-stats__slide {
    position: absolute;
    inset: 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s;
  }

  .ax-stats__slide--efficacy,
  .ax-stats:not([data-ax-active-media]):has(.accordion__disclosure[open] [data-ax-media='ingredient'])
    .ax-stats__slide--ingredient,
  .ax-stats:not([data-ax-active-media]):has(.accordion__disclosure[open] [data-ax-media='env']) .ax-stats__slide--env,
  .ax-stats[data-ax-active-media='efficacy'] .ax-stats__slide--efficacy,
  .ax-stats[data-ax-active-media='ingredient'] .ax-stats__slide--ingredient,
  .ax-stats[data-ax-active-media='env'] .ax-stats__slide--env {
    visibility: visible;
    opacity: 1;
  }

  /* Avant que le script ne prenne la main, l'onglet ouvert au chargement gagne sur
   la slide au repos ; ensuite `data-ax-active-media` fait autorité. */
  .ax-stats:not([data-ax-active-media]):has(.accordion__disclosure[open] [data-ax-media]:not([data-ax-media='efficacy']))
    .ax-stats__slide--efficacy,
  .ax-stats[data-ax-active-media]:not([data-ax-active-media='efficacy']) .ax-stats__slide--efficacy {
    visibility: hidden;
    opacity: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .ax-stats__slide {
      transition: none;
    }
  }

  @media screen and (min-width: 1000px) {
    .ax-stats--image-right .ax-stats__media {
      order: 2;
    }

    .ax-stats--image-right .ax-stats__tabs {
      order: 1;
    }

    .ax-stats--image-left .ax-stats__media {
      order: 1;
    }

    .ax-stats--image-left .ax-stats__tabs {
      order: 2;
    }
  }

  .ax-stats__tabs {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem 1.5rem;
  }

  @media screen and (min-width: 1000px) {
    .ax-stats__tabs {
      padding: 4rem;
      justify-content: flex-start;
    }

    .ax-stats__tabs-inner {
      position: sticky;
      inset-block-start: var(--sticky-area-height, 0px);
    }
  }

  /* Maquette : titre d'onglet H4 24px / 1.1 / -0.02em, gouttière de 24px
   entre le titre et le séparateur. */
  .ax-stats .ax-stats__tab {
    --accordion-block-padding: 1.5rem;
    scroll-margin-block-start: calc(var(--sticky-area-height, 0px) + 1.5rem);
    box-shadow: 0 1px 0 rgb(var(--border-color));
  }

  .ax-stats__tab .accordion__summary {
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    letter-spacing: -0.02em;
    text-transform: var(--heading-text-transform);
    font-size: 24px;
    line-height: 1.1;
  }

  .ax-stats .accordion__content {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  @media screen and (min-width: 1000px) {
    .ax-stats .accordion__content {
      gap: 1rem;
    }
  }

  .ax-stats .accordion__content > :not(.ax-stats__stat) {
    flex-basis: 100%;
    font-size: var(--text-sm);
    line-height: 1.6;
  }

  .ax-stats__stat {
    display: flex;
    flex: 1 1 100%;
    flex-direction: column;
    gap: 0.5rem;
  }

  @media screen and (min-width: 1000px) {
    .ax-stats__stat {
      flex: 1 1 0;
      min-width: 8rem;
    }
  }

  /* Maquette : chiffre H1 64px, leading 1, tracking -0.03em, FreightNeo Pro
   Medium (500) — la police est désormais embarquée (charte V2). */
  .ax-stats__stat-value {
    margin: 0;
    font-family: var(--heading-font-family);
    font-weight: 500;
    letter-spacing: -0.03em;
    /* Token Figma h1 : 40px mobile / 64px desktop. Le mobile était à 48px. */
    font-size: 40px;
    line-height: 1;
  }

  @media screen and (min-width: 1000px) {
    .ax-stats__stat-value {
      font-size: 64px;
    }
  }

  .ax-stats__stat-label {
    font-size: var(--text-sm);
    line-height: 1.2;
  }

  .ax-stats__stat-label > * {
    margin: 0;
  }

  .ax-stats__stat-label > * + * {
    margin-top: 0.25em;
  }

  /* Mentions légales sous les chiffres d'efficacité : italique, corps réduit
   (obligations légales, cf. demande client). */
  /* Sélecteur descendant : doit primer sur `.accordion__content > :not(.ax-stats__stat)`
   qui impose --text-sm aux enfants non-stat. */
  /* Taille en dur (et non --text-xs) : la cliente veut la mention nettement plus
   discrète que le libellé du chiffre, sous le plancher de la variable de thème. */
  .ax-stats .accordion__content > .ax-stats__legend {
    flex-basis: 100%;
    font-size: 0.625rem;
    font-style: italic;
    line-height: 1.3;
  }

  @media screen and (min-width: 1000px) {
    .ax-stats .accordion__content > .ax-stats__legend {
      font-size: 0.625rem;
    }
  }

  .ax-stats__legend > * {
    margin: 0;
  }

  .ax-stats__legend > * + * {
    margin-top: 0.25em;
  }

  /* Mise en avant de la 1re efficacité prouvée, superposée sur l'image (cf. maquette).
   Réservée à l'onglet « Efficacité » : l'onglet « Description » réutilise la même
   image mais sans le chiffre. */
  .ax-stats__media-highlight {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem;
    color: rgb(var(--text-color));
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s;
  }

  .ax-stats:not([data-ax-active-media]):has(.accordion__disclosure[open] [data-ax-highlight])
    .ax-stats__media-highlight,
  .ax-stats[data-ax-active-highlight] .ax-stats__media-highlight {
    visibility: visible;
    opacity: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .ax-stats__media-highlight {
      transition: none;
    }
  }

  .ax-stats__media-highlight-value {
    margin: 0;
    font-family: var(--heading-font-family);
    font-weight: var(--heading-font-weight);
    letter-spacing: -0.03em;
    line-height: 1;
    font-size: clamp(3.5rem, 9vw, 136px);
  }

  .ax-stats__media-highlight-label {
    max-width: 24rem;
    font-size: var(--text-sm);
    line-height: 1.2;
  }

  .ax-stats__media-highlight-label > * {
    margin: 0;
  }
/* END_SECTION:ax-stats */

/* START_SECTION:ax-yotpo-review (INDEX:12) */
.ax-yotpo-review {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.ax-yotpo-review__summary {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ax-yotpo-review__score {
  font-family: var(--heading-font-family);
  /* Token Figma h1 : 40px mobile / 64px desktop. Le mobile était à 44px. */
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--heading-letter-spacing);
  text-transform: uppercase;
}

@media screen and (min-width: 1000px) {
  .ax-yotpo-review__score {
    font-size: 64px;
  }
}

.ax-yotpo-review__details {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ax-yotpo-review__stars {
  display: flex;
  column-gap: 0.125rem;
}

.ax-yotpo-review__count {
  font-size: var(--text-sm);
  line-height: 1.4;
}

.ax-yotpo-review .yotpo-widget-instance {
  width: 100%;
}
/* END_SECTION:ax-yotpo-review */

/* START_SECTION:blog-post-banner (INDEX:15) */
/* Titre d'article : taille laissée au réglage de la section, graisse 500 comme
     la maquette (le thème titre en 800). `.shopify-section--…` pour l'emporter
     sur les utilitaires de taille du thème, chargés après ce bundle. */
  .shopify-section--blog-post-banner h1 {
    font-weight: 500;
    line-height: 1;
  }
/* END_SECTION:blog-post-banner */

/* START_SECTION:blog-post-products (INDEX:17) */
/* Titre du rail : H4 de la maquette, soit 24px en graisse 400 (le `.h4` du
     thème applique la graisse de titre du site, 800, et l'emporte à spécificité
     égale car theme.css est chargé après ce bundle). */
  .blog-post-products .blog-post-products__heading {
    font-weight: 400;
    line-height: 1.1;
    margin-block-end: 1.25rem;
  }

  /* `> ` pour l'emporter sur un reset `ul` imbriqué du thème (margin-inline). */
  .blog-post-products > .blog-post-products__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  /* Chaque produit est une carte posée sur la bande de fond du rail. */
  .blog-post-product {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr);
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background-color: rgb(var(--background));
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
  }

  .blog-post-product:hover {
    box-shadow: 0 4px 20px rgb(0 0 0 / 0.12);
    transform: translateY(-1px);
  }

  .blog-post-product__media {
    aspect-ratio: 1;
    padding: 0.35rem;
    border-radius: 8px;
    background: rgb(var(--background-secondary));
    display: grid;
    place-items: center;
    overflow: hidden;
  }

  .blog-post-product__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
  }

  .blog-post-product__info {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  /* Titre à gauche, note calée en haut à droite. */
  .blog-post-product__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .blog-post-product__title {
    font-weight: 600;
    line-height: 1.2;
  }

  .blog-post-product__rating {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    line-height: 1;
  }

  .blog-post-product__rating svg {
    width: 0.9em;
    height: auto;
  }

  .blog-post-product__price {
    font-weight: 700;
    line-height: 1.2;
  }
/* END_SECTION:blog-post-products */

/* START_SECTION:blog-post-toc (INDEX:18) */
/* Tant que la liste n'est pas remplie par le JS (ou si JS désactivé), on masque
     le sommaire pour éviter un titre orphelin. */
  .ax-toc:has(.ax-toc__list:empty) {
    display: none;
  }

  /* `.ax-toc ` : la classe utilitaire `.h4` du thème (theme.css, chargé après ce
     bundle) pèse autant et gagnait sur le uppercase et le poids. */
  .ax-toc .ax-toc__title {
    text-transform: uppercase;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.02em;
    margin-block-end: 0.5rem;
  }

  /* `> ` pour l'emporter sur un reset `ul` imbriqué du thème (margin-inline). */
  .ax-toc > .ax-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: ax-toc;
    font-size: var(--text-base);
    /* Maquette : line-height 2 sur des entrées d'une seule ligne, soit une boîte
       de 32px. Ici les titres d'article passent souvent à la ligne : on garde le
       rythme de ~32px entre entrées via `--ax-toc-item-gap` et un interligne
       resserré, sinon les entrées sur 2-3 lignes se délitent. */
    --ax-toc-item-gap: 0.6rem;
    line-height: 1.4;
  }

  .ax-toc__item + .ax-toc__item {
    margin-block-start: var(--ax-toc-item-gap);
  }

  .ax-toc__link {
    text-decoration: none;
    transition: opacity 0.15s ease, color 0.15s ease;
  }

  .ax-toc__summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .ax-toc__arrow {
    flex: none;
    transition: transform 0.2s ease;
  }

  .ax-toc__details[open] .ax-toc__arrow {
    transform: rotate(180deg);
  }

  /* `padding` et non `margin` : `:where(ol, ul):not(.unstyled-list) :where(ol, ul)`
     (theme.css) force `margin-block-start: 0 !important` sur les listes imbriquées. */
  .ax-toc .ax-toc__sublist {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-block-start: var(--ax-toc-item-gap);
  }

  /* Titres de 1er niveau (H2) : numérotés « 1. », « 2. »… et en gras, alignés au
     ras du titre « Sommaire » (le `padding-inline-start: 1ch` du reset `li` du
     thème les décalait de 9px vers la droite). */
  .ax-toc .ax-toc__item:not(.ax-toc__item--sub) {
    counter-increment: ax-toc;
    padding-inline-start: 0;
  }

  /* Respiration supplémentaire avant chaque nouveau titre de 1er niveau. */
  .ax-toc__item:not(.ax-toc__item--sub):not(:first-child) {
    margin-block-start: 1.5rem;
  }

  /* `> ` : les entrées H3 sont désormais imbriquées dans la <li> du H2, un
     sélecteur descendant les capterait aussi. */
  .ax-toc__item:not(.ax-toc__item--sub) > .ax-toc__link,
  .ax-toc__summary > .ax-toc__link {
    font-size: var(--text-sm);
    font-weight: 600;
  }

  .ax-toc__item:not(.ax-toc__item--sub) > .ax-toc__link::before,
  .ax-toc__summary > .ax-toc__link::before {
    content: counter(ax-toc) ". ";
  }

  /* Sous-titres (H3) : liste à puces disque indentée, même couleur que le reste
     (maquette : pas d'atténuation, seul le poids distingue les niveaux). */
  /* `.ax-toc ` : `:where(ol, ul):not(.unstyled-list) li` (theme.css) impose
     padding-inline-start: 1ch et l'emporte à spécificité égale. */
  /* Décalage porté par la marge (et non le padding) : la puce `outside` s'accroche
     au bord de la <li>, donc la marge la fait rentrer dans le rail (~10px du bord,
     texte à ~26px comme la maquette) tout en gardant l'alinéa négatif sur les
     entrées qui passent à la ligne. */
  .ax-toc .ax-toc__item--sub {
    margin-inline-start: 1.625rem;
    padding-inline-start: 0;
    list-style: disc outside;
    display: list-item;
  }

  .ax-toc__link:hover,
  .ax-toc__link:focus-visible {
    opacity: 0.7;
  }

  .ax-toc__link.is-active {
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }
/* END_SECTION:blog-post-toc */

/* START_SECTION:collection-banner (INDEX:21) */
{%- comment -%}
  Recette design 2026-08 : plus de filet entre le titre de collection et la liste
  de produits (cf. maquette V2), sur desktop comme sur mobile.
  {%- endcomment -%}
  .collection-banner__container {
    border-bottom: 0;
  }

  .collection-banner__container.section-spacing--tight {
    padding-block-end: 2rem;
  }

  /* Rangée des sous-catégories */
  .collection-subcategories {
    display: flex;
    gap: 0.75rem;
  }

  .collection-subcategories__link {
    font-size: var(--text-xs);
    line-height: 1;
    padding: 0.3125rem 0.625rem;
    display: block;
    border: 1px solid rgb(var(--border-color));
    border-radius: 0.25rem;
    transition: border-color 0.2s ease-in-out;
  }

  .collection-subcategories__link:hover {
    border-color: rgb(var(--color-foreground));
  }
/* END_SECTION:collection-banner */

/* START_SECTION:collection-seo (INDEX:23) */
.collection-seo {
    display: grid;
    gap: 2rem;
  }

  .collection-seo__content {
    font-size: var(--text-sm);
    line-height: 1.4;
    color: rgba(0, 0, 0, 0.7);
  }

  .collection-seo__logos {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-block-start: 1.5rem;
  }

  .collection-seo__logo {
    width: auto;
    max-height: 60px;
    object-fit: contain;
    /* Annule les marges appliquées par .prose aux enfants, qui décalent l'alignement vertical */
    margin-block: 0 !important;
  }

  @media screen and (min-width: 1000px) {
    /* 2 colonnes : titre (col 1) + texte en un seul bloc qui coule sur toute
       la largeur restante (col 2). Pas de découpage en colonnes CSS : le texte
       ne doit jamais être scindé en deux blocs. */
    .collection-seo {
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
      column-gap: 4rem;
      row-gap: 1.5rem;
      align-items: start;
    }

    .collection-seo__title {
      grid-column: 1;
      grid-row: 1;
    }

    .collection-seo__content {
      grid-column: 2;
      grid-row: 1;
    }

    /*
     * metafield_tag enveloppe tout le texte dans un unique <div>, dont les enfants
     * directs sont les <p> : on cible ce niveau pour l'espacement des paragraphes.
     */
    .collection-seo__content > * > * {
      margin-block-start: 0;
      margin-block-end: var(--prose-default-spacing);
    }

    .collection-seo__content > * > :last-child {
      margin-block-end: 0;
    }

    /* Logos alignés sous le texte (colonne 2 de la grille) */
    .collection-seo__logos {
      grid-column: 2;
      grid-row: 2;
      margin-block-start: 0;
    }
  }
/* END_SECTION:collection-seo */

/* START_SECTION:faq (INDEX:29) */
.shopify-section--faq .faq__content .accordion.bg-secondary {
    border-radius: 8px;
    --accordion-block-padding: 0.75rem;
    --accordion-inline-padding: 1rem;
    --border-color: var(--background-secondary-text-color) / 0.1;
    color: rgb(var(--background-secondary-text-color));
  }

  .shopify-section--faq .faq__content .accordion.bg-secondary + .accordion {
    margin-block-start: 0.5rem;
  }

  .shopify-section--faq .section-header .prose :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .display-m, .display-l, .display-xl) {
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  .shopify-section--faq .accordion__summary {
    font-family: var(--text-font-family);
    font-weight: 700;
    font-size: var(--text-sm);
    line-height: 1.2;
    letter-spacing: 0;
  }

  .shopify-section--faq .accordion__summary .icon-faq-arrow {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform 0.3s ease-in-out;
  }

  .shopify-section--faq .accordion.is-open .accordion__summary .icon-faq-arrow {
    transform: rotate(180deg);
  }

  /* Section header prose spacing: mobile 16px */
  .shopify-section--faq .section-header .prose {
    --prose-default-spacing: 1rem;
    --prose-heading-spacing: 1rem;
    --prose-button-spacing: 1rem;
  }

  .shopify-section--faq .section-header .max-w-sm {
    font-size: var(--text-xs);
    line-height: 1.2;
    color: rgb(var(--text-color));
  }

  @media screen and (min-width: 700px) {
    .shopify-section--faq .section-header .max-w-sm {
      font-size: var(--text-sm);
    }
  }

  @media screen and (min-width: 1000px) {
    /* Section header prose spacing: desktop 24px */
    .shopify-section--faq .section-header .prose {
      --prose-default-spacing: 1.5rem;
      --prose-heading-spacing: 1.5rem;
      --prose-button-spacing: 1.5rem;
    }
  }

  /* Au-delà de 1399px le gutter passe à 4rem, ce qui doublerait l'entre-colonnes
     (2 x 64px) alors que la maquette n'en garde que 88px. */
  @media screen and (min-width: 1399px) {
    .shopify-section--faq .section-split__column:first-child {
      padding-inline-end: 2.75rem;
    }

    .shopify-section--faq .section-split__column:last-child {
      padding-inline-start: 2.75rem;
    }
  }
/* END_SECTION:faq */

/* START_SECTION:main-article (INDEX:40) */
/*
   * Échelle typographique du corps d'article, d'après la maquette : polices du
   * site, mais tailles et graisses de la maquette : H2 40/500, H3 32/400 et un
   * corps en 14px (token font-size-text-small). Les graisses 400/500
   * correspondent aux fichiers FreightNeoPro Book/Medium embarqués (charte V2),
   * il n'y a donc pas de synthèse.
   * Sélecteurs préfixés par `.article-main` pour l'emporter sur les utilitaires
   * du thème (theme.css est chargé après ce bundle).
   */
  .article-main .prose :where(p, li) {
    font-size: var(--text-sm);
    line-height: 1.4;
  }

  /* Neutralise les dimensions inline posées par l'éditeur riche et le
     `max-height: 100%` / `object-fit: cover` du reset img du thème. */
  .article-main .prose img {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
  }

  .article-main .prose h2 {
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1.1;
  }

  .article-main .prose h3 {
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.1;
  }
/* END_SECTION:main-article */

/* CSS from block stylesheet tags */
/* START_BLOCK:_ax-stats-description (INDEX:82) */
.ax-stats__description {
  width: 100%;
  font-size: var(--text-sm);
  line-height: 1.6;
}

.ax-stats__description > * {
  margin-block: 0;
}

.ax-stats__description > * + * {
  margin-block-start: 1em;
}

.ax-stats__description :where(a) {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
/* END_BLOCK:_ax-stats-description */

/* START_BLOCK:_ax-stats-environment (INDEX:84) */
.ax-stats__env {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

/* Maquette : texte courant 14px / 1.4, intertitres en gras à la même taille. */
.ax-stats .accordion__content > .ax-stats__env {
  font-size: var(--text-sm);
  line-height: 1.4;
}

/* Uniquement la marge : taille et interlignage restent hérités du conteneur,
   pour que .ax-stats__stat-value (64px) et .ax-stats__stat-label (1.2) gardent
   la main sur leurs propres <p>. */
:where(.ax-stats__env) :where(p) {
  margin: 0;
}

.ax-stats__env-strong,
.ax-stats__env-text :where(strong, b) {
  font-weight: 700;
}

.ax-stats__env-text > * {
  margin: 0;
}

/* Chiffres : 3 colonnes en desktop (2 pour le duo formule), 2 en mobile. */
.ax-stats__env-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1rem;
}

@media screen and (min-width: 700px) {
  .ax-stats__env-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ax-stats__env-stats--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Le chiffre ne doit jamais casser sur deux lignes (« 100 » / « % »). */
.ax-stats__env-stats .ax-stats__stat-value {
  white-space: nowrap;
}

/* Encarts (certification, conseils de tri) : fond très léger, radius bouton. */
.ax-stats__env-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--button-border-radius, 8px);
  background: rgb(var(--text-color) / 0.02);
}

.ax-stats__env-card--stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

.ax-stats__env-card-media {
  flex: 0 0 auto;
  width: 49px;
}

.ax-stats__env-card-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 56px;
  object-fit: contain;
  mix-blend-mode: darken;
}

.ax-stats__env-card-text {
  flex: 1 1 0;
  min-width: 0;
}

/* Conseils de tri : picto + phrase + paires élément / destination. */
.ax-stats__sorting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.ax-stats__sorting-picto {
  flex: 0 0 auto;
  display: block;
  width: 49px;
  color: rgb(var(--text-color));
}

.ax-stats__sorting-picto svg {
  display: block;
  width: 100%;
  height: auto;
}

.ax-stats__sorting-text,
.ax-stats__sorting-item {
  flex: 1 1 9rem;
  min-width: 0;
  line-height: 1.2;
}

.ax-stats__sorting-item p {
  line-height: 1.2;
}
/* END_BLOCK:_ax-stats-environment */

/* START_BLOCK:_ax-stats-ingredient (INDEX:85) */
.ax-stats__ingredients {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

/* Maquette : 3 cartes de largeur égale, gouttière de 16px. */
.ax-stats__ingredients-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

@media screen and (min-width: 700px) {
  .ax-stats__ingredients-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ax-stats__ingredient {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ax-stats__ingredient-media {
  overflow: hidden;
  border-radius: var(--button-border-radius, 8px);
}

.ax-stats__ingredient-image,
.ax-stats__ingredient-media picture {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.ax-stats__ingredient-text {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ax-stats__ingredient-name {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.4;
  color: rgb(var(--text-color));
}

.ax-stats__ingredient-desc {
  font-size: var(--text-xs);
  line-height: 1.2;
  color: rgb(var(--text-color) / 0.7);
}

.ax-stats__ingredient-desc > * {
  margin: 0;
}

/* Lien "Voir la liste INCI" : simple disclosure, sans JS. */
.ax-stats__inci-toggle {
  display: inline-block;
  width: fit-content;
  padding-block-end: 0.25rem;
  border-block-end: 1px solid rgb(var(--text-color));
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.ax-stats__inci-content {
  padding-block-start: 1rem;
  font-size: var(--text-xs);
  line-height: 1.4;
}

.ax-stats__inci-content > * {
  margin: 0;
}

.ax-stats__inci-content > * + * {
  margin-block-start: 0.75rem;
}

.ax-stats__inci-subtext {
  color: rgb(var(--text-color) / 0.7);
}
/* END_BLOCK:_ax-stats-ingredient */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:ax-tag (INDEX:136) */
.ax-tag {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid var(--ax-tag-border, color-mix(in srgb, currentColor 50%, transparent));
  border-radius: var(--ax-tag-radius, 16px);
  color: var(--ax-tag-text, currentColor);
  font-size: var(--ax-tag-font-size, 12px);
  font-weight: var(--ax-tag-font-weight, var(--text-font-bold-weight, 700));
  line-height: 1.2;
}

.ax-tag--square {
  --ax-tag-radius: 5px;
}

.ax-tag--round {
  --ax-tag-radius: 16px;
}
/* END_SNIPPET:ax-tag */

/* START_SNIPPET:blog-post-card (INDEX:138) */
/* Ribbon (metafield custom.ribbon) posé sur la photo : couleurs volontairement
   absolues (maquette) et non issues du color scheme, pour rester lisible quel
   que soit le scheme de la section, y compris ceux à fond transparent. */
.blog-post-card__ribbon {
  --blog-post-card-ribbon-background: #ffffff;
  --blog-post-card-ribbon-text-color: #110d0e;

  position: absolute;
  z-index: 1;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  display: block;
  width: max-content;
  max-width: calc(100% - 16px);
  padding: 5px 8px;
  border-radius: 4px;
  background-color: var(--blog-post-card-ribbon-background);
  color: var(--blog-post-card-ribbon-text-color);
  font-size: var(--text-xs);
  font-weight: var(--text-font-bold-weight, 700);
  line-height: normal;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* END_SNIPPET:blog-post-card */

/* START_SNIPPET:blog-tags (INDEX:139) */
.blog-tags-pills {
  width: 100%;
}

/* Inside a .prose wrapper, keep the designed 16px gap with the text above */
.prose .blog-tags-pills {
  margin-block-start: 1rem;
}

.blog-tags-pills > .blog-tags-pills__list {
  margin-block-start: 0;
}

.blog-tags-pills__list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-block: 0.5rem;
}

/* La classe est doublée volontairement : `.prose a:not(…, .button)` (theme.css)
   pèse (0,2,1) et theme.css est chargé après le bundle des snippets. Sans ce
   surpoids, son `background: linear-gradient` (soulignement de lien) écrase le
   fond des pills et souligne chaque tag. */
.blog-tags-pills a.blog-tag-pill.blog-tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid rgb(var(--text-color) / 0.2);
  border-radius: 4px;
  background: none;
  background-color: rgb(var(--text-color) / 0);
  color: rgb(var(--text-color));
  font-size: var(--text-xs);
  font-weight: var(--text-font-bold-weight, 700);
  line-height: normal;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.blog-tags-pills a.blog-tag-pill.blog-tag-pill:hover {
  border-color: rgb(var(--text-color) / 0.5);
}

/* Pill active : on s'appuie sur les couleurs de bouton primaire du color scheme
   (blanc / texte foncé sur scheme-3) car --background peut être transparent */
.blog-tags-pills a.blog-tag-pill.blog-tag-pill[aria-current='page'] {
  background-color: rgb(var(--button-background-primary));
  border-color: rgb(var(--button-text-primary) / 0.2);
  color: rgb(var(--button-text-primary));
}

@media screen and (min-width: 700px) {
  .blog-tags-pills__list {
    gap: 1rem;
  }
}

@media screen and (max-width: 699px) {
  .blog-tags-pills__list {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .blog-tags-pills__list::-webkit-scrollbar {
    display: none;
  }
}
/* END_SNIPPET:blog-tags */