/** Shopify CDN: Minification failed

Line 2223:0 Unexpected "<"

**/
* {
  box-sizing: border-box;
}

body {
  color: var(--color-foreground);
  background: var(--color-background);
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100svh;
  font-variation-settings: 'slnt' 0;
}

:root {
  --hover-shadow-color: var(--color-shadow);
  --hover-transition-duration: 0.25s;
  --hover-transition-timing: ease-out;
  --surface-transition-duration: 0.3s;
  --surface-transition-timing: var(--ease-out-quad);
  --submenu-animation-speed: 360ms;
  --submenu-animation-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
}

html {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) var(--color-background);
  scroll-behavior: smooth;
}

@media (min-width: 990px) {
  html:has(.page-wrapper),
  html:has(.page-wrapper) body {
    height: 100dvh;
    overflow: hidden;
  }
}

html[scroll-lock],
html[scroll-lock] .page-wrapper {
  overflow: hidden;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  transition: margin-right var(--animation-speed) var(--animation-timing-fade-out);
}

@media (min-width: 990px) {
  .page-wrapper {
    height: 100dvh;
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--color-foreground-rgb) / var(--opacity-40)) var(--color-background);
  }

  .page-wrapper--drawer-open shopify-account::part(dialog) {
    translate: calc(-1 * var(--theme-drawer-width, var(--sidebar-width)));
  }
}

.page-wrapper--drawer-open {
  margin-right: var(--theme-drawer-width, var(--sidebar-width));
  transition-timing-function: var(--animation-timing-fade-in);
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
  width: 100%;
  height: auto;
}

input,
textarea,
select {
  font: inherit;
  border-radius: var(--style-border-radius-inputs);
}

/** override ios and firefox defaults */
select {
  background-color: var(--color-background);
  color: currentcolor;
}

.product-card,
.collection-card,
.predictive-search-results__card--product,
.predictive-search-results__card {
  position: relative;
  transition: transform var(--hover-transition-duration) var(--hover-transition-timing),
    box-shadow var(--hover-transition-duration) var(--hover-transition-timing);
  z-index: var(--layer-flat);
}

.product-card__link {
  position: absolute;
  inset: 0;
}

.product-card__content {
  position: relative;
}

.product-card__content {
  cursor: pointer;
}

dialog {
  /* the ::backdrop inherits from the originating element, custom properties must be set on the dialog element */
  --backdrop-color-rgb: var(--color-shadow-rgb);

  background-color: var(--color-background);
  color: var(--color-foreground);
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

.wrap-text {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

p:empty {
  display: none;
}

:first-child:is(p, h1, h2, h3, h4, h5, h6),
:first-child:empty + :where(p, h1, h2, h3, h4, h5, h6) {
  margin-block-start: 0;
}

/* Remove bottom margin from last text item, or previous to last if the last is empty */
:last-child:is(p, h1, h2, h3, h4, h5, h6),
:where(p, h1, h2, h3, h4, h5, h6):nth-child(2):has(+ :last-child:empty) {
  margin-block-end: 0;
}

/* view transitions */

/*
 * The cross-document (MPA) opt-in `@view-transition { navigation: auto }` is declared per-layout
 * (layout/theme.liquid and layout/password.liquid), because this stylesheet is shared by both layouts
 * and a static stylesheet can't read theme settings.
 * It is gated on the same `settings.page_transition_enabled or settings.transition_to_main_product` condition as the
 * render blocker, so the opt-in and its opt-out switch can never disagree. The rules below only
 * take effect once an `@view-transition` opt-in is active, so they are inert without it.
 */
@media (prefers-reduced-motion: no-preference) {
  /* Keep page interactive while view transitions are running */
  :root {
    view-transition-name: none;
  }

  /* Have the root transition during page navigation */
  html:active-view-transition-type(page-navigation),
  html:active-view-transition-type(product-image-transition) {
    view-transition-name: root-custom;
  }

  ::view-transition {
    pointer-events: none;
  }

  html:active-view-transition-type(page-navigation) main[data-page-transition-enabled='true'] {
    view-transition-name: main-content;
  }

  html:active-view-transition-type(page-navigation) main[data-product-transition='true'][data-template*='product'] {
    view-transition-name: none;
  }

  ::view-transition-old(main-content) {
    animation: var(--view-transition-old-main-content);
  }

  ::view-transition-new(main-content) {
    animation: var(--view-transition-new-main-content);
  }

  html:active-view-transition-type(product-image-transition) {
    [data-view-transition-type='product-image-transition'] {
      view-transition-name: product-image-transition;
    }

    [data-view-transition-type='product-details'] {
      view-transition-name: product-details;
    }
  }

  ::view-transition-group(product-image-transition) {
    z-index: 1;
  }

  ::view-transition-group(product-image-transition),
  ::view-transition-group(product-details) {
    animation-duration: var(--animation-speed);
    animation-timing-function: var(--animation-easing);
  }

  ::view-transition-old(product-image-transition),
  ::view-transition-new(product-image-transition) {
    block-size: 100%;
    overflow: hidden;
    object-fit: cover;
    animation-duration: 0.25s;
    animation-timing-function: var(--animation-easing);
  }

  ::view-transition-new(product-details) {
    animation: var(--view-transition-new-main-content);
  }
}

/* Focus */
*:focus-visible {
  outline: var(--focus-outline-width) solid currentcolor;
  outline-offset: var(--focus-outline-offset);
}

@supports not selector(:focus-visible) {
  *:focus {
    outline: var(--focus-outline-width) solid currentcolor;
    outline-offset: var(--focus-outline-offset);
  }
}

.focus-inset {
  outline-offset: calc(var(--focus-outline-width) * -1);
}

/* Layout */
.content-for-layout {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content-for-layout > .shopify-section:last-child {
  flex-grow: 1;
}

/* Set up page widths & margins */
.page-width-wide,
.page-width-normal,
.page-width-narrow,
.page-width-content {
  --page-margin: 16px;
}

@media screen and (min-width: 750px) {
  .page-width-wide,
  .page-width-normal,
  .page-width-narrow,
  .page-width-content {
    --page-margin: 40px;
  }
}

.page-width-wide {
  /* NOTE: This results in a page width of 2400px because of how we set up margins with grid */
  --page-content-width: var(--wide-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-normal {
  --page-content-width: var(--normal-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-narrow,
.page-width-content {
  /* NOTE: This results in a page width of 1400px because of how we set up margins with grid */
  --page-content-width: var(--narrow-page-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

.page-width-content {
  --page-content-width: var(--normal-content-width);
  --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2));
}

/* Section width full vs. page
   The reason we use a grid to contain the section is to allow for the section to have a
   full-width background image even if the section content is constrained by the page width. Do not try
   to rewrite this to max-width: --page-width; margin: 0 auto;, it doesn't work. */
.section {
  --full-page-grid-central-column-width: min(
    var(--page-width) - var(--page-margin) * 2,
    calc(100% - var(--page-margin) * 2)
  );
  --full-page-grid-margin: minmax(var(--page-margin), 1fr);
  --full-page-grid-with-margins: var(--full-page-grid-margin) var(--full-page-grid-central-column-width)
    var(--full-page-grid-margin);

  /* Utility variable gives the grid's first column width. Provides an offset width for components like carousels */
  --util-page-margin-offset: max(
    var(--page-margin),
    calc((100% - min(var(--page-content-width), 100% - var(--page-margin) * 2)) / 2)
  );

  /* Offset for full-width sections to account for the page margin,
  used for Marquee — note that --util-page-margin-offset doesn't work here */
  --full-page-margin-inline-offset: calc(((100vw - var(--full-page-grid-central-column-width)) / 2) * -1);

  width: 100%;

  /* This is required to make background images work, which are <img> rendered absolutely */
  position: relative;

  /* Set up the grid */
  display: grid;
  grid-template-columns: var(--full-page-grid-with-margins);
  min-height: var(--section-min-height, 'auto');
}

/* Place all direct children in the center column by default */
.section > * {
  grid-column: 2;
}

/* Make the actual section background transparent, and instead apply it to a separate sibling element to enable stacking with hero shadow  */
.shopify-section:not(.header-section) :is(.section, .cart-summary) {
  background: transparent;
}

.shopify-section:not(.header-section):has(.section) {
  position: relative;
}

.shopify-section:not(.header-section) .section-background {
  content: '';
  position: absolute;
  inset: 0;
  z-index: var(--layer-section-background);
  background-color: var(--color-background);
}

/* For page-width sections, all content goes in the center column */
.section--page-width > * {
  grid-column: 2;
}

/* For full-width sections, content spans all columns */
.section--full-width > * {
  grid-column: 1 / -1;
}

@media screen and (max-width: 749px) {
  .section--mobile-full-width > * {
    grid-column: 1 / -1;
  }
}

/* Some page-width sections should still extend all the way to the right edge of the page, e.g. collection carousel */
.section--page-width.section--full-width-right > * {
  grid-column: 2 / 4;
}

/* For full-width sections with margin, content still spans full width but with space on the sides */
.section--full-width.section--full-width-margin > * {
  grid-column: 1 / -1;

  @media screen and (min-width: 750px) {
    padding-left: var(--page-margin);
    padding-right: var(--page-margin);
  }
}

/* Some section content break out to full width of the page */
.section > .force-full-width {
  grid-column: 1 / -1;
}

.section--height-small {
  --section-min-height: var(--section-height-small);
}

.section--height-medium {
  --section-min-height: var(--section-height-medium);
}

.section--height-large {
  --section-min-height: var(--section-height-large);
}

.section--height-full-screen {
  --section-min-height: 100svh;
}

.section-content-wrapper.section-content-wrapper {
  min-height: calc(var(--section-min-height, 'auto') - var(--section-height-offset, 0px));
  position: relative;
  width: 100%;
  height: 100%;
}

/* Utility */

.hidden {
  /* stylelint-disable-next-line declaration-no-important */
  display: none !important;
}

@media screen and (max-width: 749px) {
  .hidden--mobile,
  .mobile\:hidden {
    /* stylelint-disable-next-line declaration-no-important */
    display: none !important;
  }
}

@media screen and (min-width: 750px) {
  .hidden--desktop,
  .desktop\:hidden {
    /* stylelint-disable-next-line declaration-no-important */
    display: none !important;
  }
}

.hide-when-empty:empty {
  /* stylelint-disable-next-line declaration-no-important */
  display: none !important;
}

.visually-hidden:not(:focus, :active) {
  /* stylelint-disable-next-line declaration-no-important */
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  /* stylelint-disable-next-line declaration-no-important */
  word-wrap: normal !important;
}

.contents {
  display: contents;
}

.flex {
  display: flex;
  gap: var(--gap-md);
}

.grid {
  --centered-column-number: 12;
  --full-width-column-number: 14;
  --centered: column-1 / span var(--centered-column-number);
  --full-width: column-0 / span var(--full-width-column-number);

  display: flex;
  flex-direction: column;
}

@media screen and (min-width: 750px) {
  .grid {
    display: grid;
    gap: 0;
    grid-template-columns: var(--margin-4xl) repeat(var(--centered-column-number), minmax(0, 1fr)) var(--margin-4xl);
    grid-template-areas: 'column-0 column-1 column-2 column-3 column-4 column-5 column-6 column-7 column-8 column-9 column-10 column-11 column-12 column-13';
  }
}

@media screen and (min-width: 1400px) {
  .grid {
    grid-template-columns:
      1fr repeat(
        var(--centered-column-number),
        minmax(0, calc((var(--page-width) - var(--page-margin) * 2) / var(--centered-column-number)))
      )
      1fr;
  }
}

.flex {
  display: flex;
  gap: var(--gap-md);
}

.flip-x {
  scale: -1 1;
}

.flip-y {
  scale: 1 -1;
}

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

.text-left {
  --text-align: left;

  text-align: left;
}

.text-center {
  --text-align: center;

  text-align: center;
}

.text-right {
  --text-align: right;

  text-align: right;
}

.text-inherit {
  color: inherit;
}

.user-select-text {
  user-select: text;
}

.justify-left {
  justify-content: left;
}

.justify-center {
  justify-content: center;
}

.justify-right {
  justify-content: right;
}

.title--aligned-center {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.svg-wrapper {
  color: currentcolor;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  pointer-events: none;
}

.svg-wrapper--smaller {
  width: var(--icon-size-2xs);
  height: var(--icon-size-2xs);
}

.svg-wrapper--small {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

.svg-wrapper > svg {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.relative {
  position: relative;
}

/* Icons */
.icon-success,
.icon-error {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  flex-shrink: 0;
}

.icon-success {
  color: var(--color-success);
}

.icon-error {
  fill: var(--color-error);
}

.icon-default {
  fill: currentColor;
}

[data-placeholder='true'] * {
  cursor: default;
}

/* Base text and heading styles */
body,
.paragraph:not(.button),
.paragraph > *,
.text-block.paragraph :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-weight: var(--font-paragraph--weight);
  font-size: var(--font-paragraph--size);
  line-height: var(--font-paragraph--line-height);
  text-transform: var(--font-paragraph--case);
  -webkit-font-smoothing: antialiased;
  color: var(--color, var(--color-foreground));
}

/* Ensure inputs with type presets maintain minimum 16px on mobile to prevent iOS zoom */
@media screen and (max-width: 1200px) {
  input.paragraph.paragraph,
  input.paragraph.paragraph:not([type]),
  textarea.paragraph.paragraph,
  select.paragraph.paragraph {
    font-size: max(1rem, var(--font-paragraph--size));
  }
}

.paragraph > small {
  font-size: smaller;
}

/* Typography presets */

h1,
.h1.h1,
.text-block.h1 > *,
.text-block.h1 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h1--family);
  font-style: var(--font-h1--style);
  font-weight: var(--font-h1--weight);
  font-size: var(--font-h1--size);
  line-height: var(--font-h1--line-height);
  letter-spacing: var(--font-h1--letter-spacing);
  text-transform: var(--font-h1--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h1.h1,
  textarea.h1.h1,
  select.h1.h1 {
    font-size: max(1rem, var(--font-h1--size));
  }
}

h2,
.h2.h2,
.text-block.h2 > *,
.text-block.h2 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h2--family);
  font-style: var(--font-h2--style);
  font-weight: var(--font-h2--weight);
  font-size: var(--font-h2--size);
  line-height: var(--font-h2--line-height);
  letter-spacing: var(--font-h2--letter-spacing);
  text-transform: var(--font-h2--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h2.h2,
  textarea.h2.h2,
  select.h2.h2 {
    font-size: max(1rem, var(--font-h2--size));
  }
}

h3,
.h3,
.h3.h3,
.text-block.h3 > *,
.text-block.h3 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h3--family);
  font-style: var(--font-h3--style);
  font-weight: var(--font-h3--weight);
  font-size: var(--font-h3--size);
  line-height: var(--font-h3--line-height);
  letter-spacing: var(--font-h3--letter-spacing);
  text-transform: var(--font-h3--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h3,
  textarea.h3,
  select.h3 {
    font-size: max(1rem, var(--font-h3--size));
  }
}

h4,
.h4.h4,
.text-block.h4 > *,
.text-block.h4 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h4--family);
  font-style: var(--font-h4--style);
  font-weight: var(--font-h4--weight);
  font-size: var(--font-h4--size);
  line-height: var(--font-h4--line-height);
  letter-spacing: var(--font-h4--letter-spacing);
  text-transform: var(--font-h4--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h4.h4,
  textarea.h4.h4,
  select.h4.h4 {
    font-size: max(1rem, var(--font-h4--size));
  }
}

h5,
.h5.h5,
.text-block.h5 > *,
.text-block.h5 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h5--family);
  font-style: var(--font-h5--style);
  font-weight: var(--font-h5--weight);
  font-size: var(--font-h5--size);
  line-height: var(--font-h5--line-height);
  letter-spacing: var(--font-h5--letter-spacing);
  text-transform: var(--font-h5--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h5.h5,
  textarea.h5.h5,
  select.h5.h5 {
    font-size: max(1rem, var(--font-h5--size));
  }
}

h6,
.h6.h6,
.text-block.h6 > *,
.text-block.h6 :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-h6--family);
  font-style: var(--font-h6--style);
  font-weight: var(--font-h6--weight);
  font-size: var(--font-h6--size);
  line-height: var(--font-h6--line-height);
  letter-spacing: var(--font-h6--letter-spacing);
  text-transform: var(--font-h6--case);
  color: var(--color);
}

@media screen and (max-width: 1200px) {
  input.h6.h6,
  textarea.h6.h6,
  select.h6.h6 {
    font-size: max(1rem, var(--font-h6--size));
  }
}

:first-child:is(.h1, .h2, .h3, .h4, .h5, .h6) {
  margin-block-start: 0;
}

:last-child:is(.h1, .h2, .h3, .h4, .h5, .h6) {
  margin-block-end: 0;
}

/* Links */
a {
  color: currentcolor;
  text-decoration-color: transparent;
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.125em;
  transition: text-decoration-color var(--animation-speed) var(--animation-easing),
    color var(--animation-speed) var(--animation-easing);
}

:is(h1, h2, h3, h4, h5, h6, p) > a:hover {
  color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / 0.7);
}

/* Add underline to text using our paragraph styles only. */
p:not(.h1, .h2, .h3, .h4, .h5, .h6) a:where(:not(.button, .button-secondary)),
.rte :is(p, ul, ol, table):not(.h1, .h2, .h3, .h4, .h5, .h6) a:where(:not(.button, .button-secondary)) {
  text-decoration-color: currentcolor;

  &:hover {
    text-decoration-color: currentcolor;
    color: rgb(var(--color-rgb, var(--color-foreground-rgb)) / 0.7);
  }
}

.container-background-image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/* iOS fix: hide the default arrow on the summary */
summary::-webkit-details-marker {
  display: none;
}

/* Buttons */
.button,
.button-secondary,
.button-custom,
button.shopify-payment-button__button--unbranded {
  --text-align: center;

  display: grid;
  align-content: center;
  text-decoration: none;
  text-align: var(--text-align);
  color: var(--button-color);
  appearance: none;
  background-color: var(--button-background-color);
  border: none;
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-weight: var(--font-paragraph--weight);
  font-size: var(--font-paragraph--size);
  line-height: var(--font-paragraph--line-height);
  margin-block: 0;
  transition: color var(--animation-speed) var(--animation-easing),
    box-shadow var(--animation-speed) var(--animation-easing),
    background-color var(--animation-speed) var(--animation-easing);
  cursor: pointer;
  width: fit-content;
  box-shadow: inset 0 0 0 var(--button-border-width) var(--button-border-color);
  padding-block: var(--button-padding-block);
  padding-inline: var(--button-padding-inline);
}

.button {
  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
  border-radius: var(--style-border-radius-buttons-primary);
}

.button:not(.button-secondary, .button-unstyled) {
  outline-color: var(--button-focus-outline-color, var(--button-background-color));
}

.button-secondary {
  font-family: var(--button-font-family-secondary);
  text-transform: var(--button-text-case-secondary);
  border-radius: var(--style-border-radius-buttons-secondary);
}

button.shopify-payment-button__button--unbranded {
  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
}

textarea,
input:not([type='checkbox'], [type='radio']) {
  background-color: var(--color-input-background);
  border-color: var(--color-input-border);
}

textarea::placeholder,
input::placeholder {
  color: rgb(var(--color-input-text-rgb) / var(--opacity-muted-text));
}

textarea:not(:placeholder-shown)::placeholder,
input:not(:placeholder-shown)::placeholder {
  opacity: 0;
}

/* The declaration above is messing with buttons that have an attribute of hidden as it overwrites the display value */
.button[hidden] {
  display: none;
}

.button[aria-disabled='true'],
.button-secondary[aria-disabled='true'],
.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.button,
button.shopify-payment-button__button--unbranded {
  --button-color: var(--color-primary-button-text);
  --button-background-color: var(--color-primary-button-background);
  --button-border-color: var(--color-primary-button-border);
  --button-border-width: var(--style-border-width-primary);
  --button-focus-outline-color: var(--color-primary-button-focus-outline);
}

.button:hover,
button.shopify-payment-button__button--unbranded:hover:not([disabled]) {
  --button-color: var(--color-primary-button-hover-text);
  --button-background-color: var(--color-primary-button-hover-background);
  --button-border-color: var(--color-primary-button-hover-border);
}

.button-secondary {
  --button-color: var(--color-secondary-button-text);
  --button-background-color: var(--color-secondary-button-background);
  --button-border-color: var(--color-secondary-button-border);
  --button-border-width: var(--style-border-width-secondary);
}

.button-secondary:hover {
  --button-color: var(--color-secondary-button-hover-text);
  --button-background-color: var(--color-secondary-button-hover-background);
  --button-border-color: var(--color-secondary-button-hover-border);
}

.button-custom {
  --button-color: var(--color-primary-button-text);
  --button-background-color: var(--color-primary-button-background);
  --button-border-color: var(--color-primary-button-border);
  --button-border-width: var(--style-border-width-secondary);
  --button-focus-outline-color: var(--color-primary-button-focus-outline);

  font-family: var(--button-font-family-primary);
  text-transform: var(--button-text-case-primary);
  border-radius: var(--style-border-radius-buttons-primary);
  outline-color: var(--button-focus-outline-color, var(--button-background-color));
}

.button-custom:hover {
  --button-color: var(--color-primary-button-hover-text);
  --button-background-color: var(--color-primary-button-hover-background);
  --button-border-color: var(--color-primary-button-hover-border);
}

/* Needed to override the default Shopify styles */
button.shopify-payment-button__button--unbranded:hover:not([disabled]) {
  background-color: var(--button-background-color);
}

.button-unstyled {
  display: block;
  padding: 0;
  background-color: inherit;
  color: var(--color-foreground);
  border: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  font-family: var(--font-paragraph--family);
  font-style: var(--font-paragraph--style);
  font-size: var(--font-paragraph--size);
}

.button-unstyled:hover {
  background-color: inherit;
}

/* Default hover dim for link-style buttons, scoped via :where() so component-specific
   hover rules (.facets__clear-all-link, .header-actions__action, etc.) still win. */
:where(.button-unstyled):hover {
  --hover-color-rgb: var(--color-foreground-rgb);

  color: rgb(var(--hover-color-rgb) / var(--opacity-70));
}

.button-unstyled--with-icon {
  color: var(--color-foreground);
  display: flex;
  gap: var(--gap-2xs);
  align-items: center;
}

.button-unstyled--transparent {
  background-color: transparent;
  box-shadow: none;
}

/* Caret icon transition */
.icon-caret svg {
  transition: transform var(--animation-speed) var(--animation-easing);
}

summary {
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
  padding-block: var(--padding-sm);
}

summary:hover {
  color: rgb(var(--color-foreground-rgb) / var(--opacity-80));
}

/* Animate the UI elements in only after the view transition is complete */
.close-button {
  position: fixed;
  top: var(--margin-lg);
  right: var(--margin-lg);
  width: var(--minimum-touch-target);
  height: var(--minimum-touch-target);
  z-index: var(--layer-flat);
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;

  /* For the outline radius */
  border-radius: 50%;
}

/* This triggers iOS < 16.4. The outline bug is not recognized as a lack of @supports */

@supports not (background-color: rgb(from red 150 g b / alpha)) {
  /**
    There is a bug in safari < 16.4 that causes the outline to not follow the elements border radius. This is a workaround.
    Using element selector to increase specificity.
  **/

  .close-button:focus-visible {
    outline: none;
    overflow: visible;
  }

  .close-button:focus-visible::after {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--focus-outline-offset));
    border: var(--focus-outline-width) solid currentColor;
    border-radius: 50%;
    display: inherit;
  }
}

.dialog--closed .close-button {
  animation: elementSlideOutBottom calc(var(--animation-speed) * 0.5) var(--animation-easing) forwards;
}

.close-button:hover {
  background-color: transparent;
  opacity: 0.8;
}

.close-button svg {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

/* Product media */
.product-media {
  display: flex;
  flex: 1;
}

.sticky-content {
  position: sticky;
  top: var(--sticky-header-offset, 0);
  z-index: var(--layer-flat);
}

@media screen and (min-width: 750px) {
  .sticky-content--desktop,
  .sticky-content--desktop.full-height--desktop > .group-block {
    position: sticky;
    top: var(--sticky-header-offset, 0);
    z-index: var(--layer-flat);
  }
}

/* Spacing style */
.spacing-style {
  --spacing-scale: var(--spacing-scale-md);

  @media screen and (min-width: 990px) {
    --spacing-scale: var(--spacing-scale-default);
  }

  /* Must disable this, when you use these with calc and another unit type, things break — see logo.liquid */
  /* stylelint-disable length-zero-no-unit */
  --padding-block: 0px;
  --padding-block-start: var(--padding-block, 0px);
  --padding-block-end: var(--padding-block, 0px);
  --padding-inline: 0px;
  --padding-inline-start: var(--padding-inline, 0px);
  --padding-inline-end: var(--padding-inline, 0px);
  --margin-block: 0px;
  --margin-block-start: var(--margin-block, 0px);
  --margin-block-end: var(--margin-block, 0px);
  --margin-inline: 0px;
  --margin-inline-start: var(--margin-inline, 0px);
  --margin-inline-end: var(--margin-inline, 0px);
}

.spacing-style,
.inherit-spacing {
  padding-block: calc(var(--padding-block-start) + var(--section-top-offset, 0px)) var(--padding-block-end);
  padding-inline: var(--padding-inline-start) var(--padding-inline-end);
  margin-block: var(--margin-block-start) var(--margin-block-end);
  margin-inline: var(--margin-inline-start) var(--margin-inline-end);
}

/* Size style */
.size-style {
  width: var(--size-style-width-mobile, var(--size-style-width));
  height: var(--size-style-height-mobile, var(--size-style-height));

  @media screen and (min-width: 750px) {
    width: var(--size-style-width);
    height: var(--size-style-height);
  }
}

/* Custom Typography style */
.custom-typography,
.custom-typography > * {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  text-transform: var(--text-transform);
  text-wrap: var(--text-wrap);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
}

.custom-typography {
  h1 {
    line-height: var(--line-height--display, var(--line-height));
  }

  h2,
  h3,
  h4 {
    line-height: var(--line-height--heading, var(--line-height));
  }

  p {
    line-height: var(--line-height--body, var(--line-height));
  }
}

.custom-font-size,
.custom-font-size > * {
  font-size: var(--font-size);
}

.custom-font-weight,
.custom-font-weight > * {
  font-weight: var(--font-weight);
}

/* Border override style */
.border-style {
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--border-color);
  border-radius: var(--border-radius);
}

/* Gap scaling style */
.gap-style,
.layout-panel-flex {
  --gap-scale: var(--spacing-scale-md);

  @media screen and (min-width: 990px) {
    --gap-scale: var(--spacing-scale-default);
  }
}

.layout-panel-flex {
  display: flex;
  gap: var(--gap);
  height: 100%;
}

.shopify-block:has(> [shopify-block-empty]) {
  display: none;
}

.layout-panel-flex--row {
  flex-flow: row var(--flex-wrap);
  justify-content: var(--horizontal-alignment);
  align-items: var(--vertical-alignment);
}

.layout-panel-flex--column {
  flex-flow: column var(--flex-wrap);
  align-items: var(--horizontal-alignment);
  justify-content: var(--vertical-alignment);
}

@media screen and (max-width: 749px) {
  .mobile-column {
    flex-flow: column nowrap;
    align-items: var(--horizontal-alignment);
    justify-content: var(--vertical-alignment-mobile);
  }

  .layout-panel-flex--row:not(.mobile-column) {
    flex-wrap: var(--flex-wrap-mobile);
    height: auto;

    > .menu {
      flex: 1 1 min-content;
    }

    > .text-block {
      flex: 1 1 var(--max-width--display-tight);
    }

    > .image-block {
      flex: 1 1 var(--size-style-width-mobile-min);
    }

    > .button {
      flex: 0 0 fit-content;
    }

    > .group-block--height-fill {
      height: calc(var(--section-min-height, auto) - var(--section-height-offset, 0px));
    }
  }
}

@media screen and (min-width: 750px) {
  .layout-panel-flex {
    flex-direction: var(--flex-direction);
  }
}

/* Form fields */
.field {
  position: relative;
  width: 100%;
  display: flex;
  transition: box-shadow var(--animation-speed) ease;
}

.field__input {
  flex-grow: 1;
  text-align: left;
  border-radius: var(--style-border-radius-inputs);
  transition: box-shadow var(--animation-speed) ease, background-color var(--animation-speed) ease;
  padding: var(--input-padding);
  box-shadow: var(--input-box-shadow);
  background-color: var(--color-input-background);
  color: var(--color-input-text);
  border: none;
  outline: none;
  font-size: var(--font-paragraph--size);

  &:autofill {
    background-color: var(--color-input-background);
    color: var(--color-input-text);
  }
}

.field__input:focus {
  box-shadow: var(--input-box-shadow-focus);
}

.field__input--button-radius {
  border-radius: var(--style-border-radius-buttons-primary);
}

.field__input--button-padding {
  padding-inline: var(--padding-3xl);
}

.field__label {
  color: rgb(var(--color-input-text-rgb) / var(--opacity-80));
  font-size: var(--font-paragraph--size);
  left: var(--input-padding-x);
  top: 50%;
  transform: translateY(-50%);
  margin-bottom: 0;
  pointer-events: none;
  position: absolute;
  transition: top var(--animation-speed) ease, font-size var(--animation-speed) ease;
}

/* RTE styles */
.rte,
.shopify-policy__title {
  :is(h1, h2, h3, h4, h5, h6) {
    margin-block: clamp(1.5rem, 1em * 3.3, 2.5rem) var(--font-heading--spacing);
  }

  :first-child:is(p, h1, h2, h3, h4, h5, h6),
  :first-child:empty + :is(p, h1, h2, h3, h4, h5, h6) {
    margin-block-start: 0;
  }

  ul,
  ol {
    margin-block-start: 0;
    padding-inline-start: 1.5em;
  }

  /* Only apply margin-block-end to the higher level list, not nested lists */
  :is(ul, ol):not(:is(ul, ol) :is(ul, ol)) {
    margin-block-end: 1em;
  }

  blockquote {
    margin-inline: 1.5em 2.3em;
    margin-block: 3.8em;
    padding-inline-start: 0.8em;
    border-inline-start: 1.5px solid rgb(var(--color-foreground-rgb) / var(--opacity-25));
    font-style: italic;
    font-weight: 500;
  }

  .rte-table-wrapper {
    overflow-x: auto;
  }

  table {
    /* stylelint-disable-next-line declaration-no-important */
    width: 100% !important;
    border-collapse: collapse;
  }

  tr:not(:has(td)),
  thead {
    background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
    font-weight: bold;
    text-transform: uppercase;
  }

  tr:has(td) {
    border-bottom: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10));
  }

  th,
  td {
    text-align: start;
    padding-inline: var(--padding-md);
    padding-block: var(--padding-sm);
  }
}

.shopify-policy__container {
  padding-block: var(--padding-xl);
}

/* Radio buttons and checkboxes - shared base styles */
:where(input[type='radio']),
:where(input[type='checkbox']) {
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  aspect-ratio: 1;
  margin: 0;
  margin-inline-end: var(--padding-3xs);
  padding: 0;
  border: var(--checkbox-border);
  appearance: none;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

/* Radio buttons */
input[type='radio'] {
  border-radius: var(--style-border-radius-50);
  background: transparent;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

:where(input[type='radio']):checked {
  border-color: var(--color-foreground);
  background: var(--color-background);
}

:where(input[type='radio']):checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--checkbox-size) / 2);
  height: calc(var(--checkbox-size) / 2);
  background: var(--color-foreground);
  border-radius: var(--style-border-radius-50);
  transition: background 0.2s ease;
}

:where(input[type='radio']):disabled {
  border-color: var(--input-disabled-border-color);
  background-color: var(--input-disabled-background-color);
  cursor: not-allowed;
}

:where(input[type='radio']):disabled:checked::after {
  background: var(--input-disabled-background-color);
}

:where(input[type='radio']):not(:disabled):hover {
  border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
}

:where(input[type='radio']):not(:disabled):hover:checked {
  border-color: var(--color-foreground);
  background-color: var(--color-background);
}

:where(input[type='radio']):not(:disabled):hover:checked::after {
  background: rgb(var(--color-foreground-rgb) / var(--opacity-85));
}

/* Checkboxes */
:where(input[type='checkbox']) {
  border-radius: var(--checkbox-border-radius);
  background-color: var(--color-background);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

:where(input[type='checkbox']):checked {
  background-color: var(--color-foreground);
  border-color: var(--color-foreground);
}

:where(input[type='checkbox']):checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  background-color: var(--color-background);
  mask-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.75439 10.7485L7.68601 14.5888C7.79288 14.7288 7.84632 14.7988 7.91174 14.8242C7.96907 14.8466 8.03262 14.8469 8.09022 14.8253C8.15596 14.8007 8.21026 14.7314 8.31886 14.5927L15.2475 5.74658' stroke='black' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

:where(input[type='checkbox']):not(:disabled):hover {
  border-color: rgb(var(--color-foreground-rgb) / var(--opacity-40-60));
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-5));
}

:where(input[type='checkbox']):not(:disabled):hover:checked {
  border-color: var(--color-foreground);
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-85));
}

:where(input[type='checkbox']):disabled {
  background-color: var(--input-disabled-background-color);
  border-color: var(--input-disabled-border-color);
  cursor: not-allowed;
}

:where(input[type='checkbox']):disabled:checked::after {
  background-color: var(--input-disabled-text-color);
}

/* Shared styles for radio buttons and checkboxes */
:where(input[type='radio']) + label,
:where(input[type='checkbox']) + label {
  display: inline;
  vertical-align: middle;
  cursor: pointer;
}

:where(input[type='radio']):disabled + label,
:where(input[type='checkbox']):disabled + label {
  color: var(--input-disabled-text-color);
  cursor: not-allowed;
}

/* Flexbox for labels wrapping radio buttons or checkboxes */
label:has(input[type='radio']),
label:has(input[type='checkbox']) {
  display: inline-flex;
  align-items: center;
  gap: var(--padding-2xs);
  cursor: pointer;
}

label:has(input[type='radio']:disabled),
label:has(input[type='checkbox']:disabled) {
  cursor: not-allowed;
}

/* ------------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------------ */

/* Animation declarations - to be kept at the bottom of the file for ease of find */
@keyframes grow {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes move-and-fade {
  from {
    transform: translate(var(--start-x, 0), var(--start-y, 0));
    opacity: var(--start-opacity, 0);
  }

  to {
    transform: translate(var(--end-x, 0), var(--end-y, 0));
    opacity: var(--end-opacity, 1);
  }
}

@keyframes slideInTopViewTransition {
  from {
    transform: translateY(100px);
  }
}

@keyframes elementSlideInTop {
  from {
    margin-top: var(--padding-sm);
    opacity: 0;
  }

  to {
    margin-top: 0;
    opacity: 1;
  }
}

@keyframes elementSlideOutTop {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }
}

@keyframes elementSlideOutBottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(calc(-1 * var(--padding-sm)));
    opacity: 0;
  }
}

@keyframes thumbnailsSlideInTop {
  from {
    transform: translateY(calc(-50% + var(--margin-lg)));
    opacity: 0;
  }

  to {
    transform: translateY(-50%);
    opacity: 1;
  }
}

@keyframes thumbnailsSlideOutTop {
  from {
    transform: translateY(-50%);
    opacity: 1;
  }

  to {
    transform: translateY(calc(-50% + var(--margin-lg)));
    opacity: 0;
  }
}

@keyframes thumbnailsSlideInBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes thumbnailsSlideOutBottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

@keyframes search-element-slide-in-bottom {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes search-element-slide-out-bottom {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(20px);
    opacity: 0;
  }
}

@keyframes backdropFilter {
  from {
    backdrop-filter: brightness(1);
  }

  to {
    backdrop-filter: brightness(0.75);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modalSlideInTop {
  from {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes modalSlideOutTop {
  from {
    transform: translateY(0);
    opacity: 1;
  }

  to {
    transform: translateY(var(--padding-sm));
    opacity: 0;
  }
}

/* Slideshow Arrow Hover Animation - must stay in base.css for proper CSS cascade */

:not(.media-gallery--carousel)
  > :is(slideshow-component:hover, slideshow-component:focus-within):not(:has(slideshow-controls:hover))
  > slideshow-container
  > slideshow-arrows
  .slideshow-control {
  animation: arrowsSlideIn var(--animation-speed) var(--animation-easing) forwards;
}

@keyframes arrowsSlideIn {
  from {
    transform: translate(var(--padding-sm), 0);
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.section-resource-list,
.section-carousel {
  row-gap: var(--gap);
}

.section-resource-list__content {
  display: flex;
  flex-direction: column;
  align-items: var(--horizontal-alignment);
  gap: var(--gap);
  width: 100%;
}

.section-resource-list__content:empty {
  display: none;
}

.section-resource-list__header:is(:empty, :has(.group-block-content:empty)),
.section-resource-list__content:empty {
  display: none;
}

:where(.section-resource-list.section--full-width) product-card[data-product-transition] > .group-block,
:where(.section-carousel.section--full-width) product-card[data-product-transition] > .group-block {
  @media screen and (max-width: 749px) {
    padding-inline: max(var(--padding-xs), var(--padding-inline-start))
      max(var(--padding-xs), var(--padding-inline-end));
  }
}

/* Base styles */
.group-block,
.group-block-content {
  position: relative;
}

.group-block:has(> video-background-component) {
  overflow: hidden;
}

.group-block-content {
  height: 100%;
  width: 100%;
}

/* Container styles */
.section-content-wrapper.section-content-wrapper:where(.layout-panel-flex) .group-block--fill {
  flex: 1;
}

/* Flex behavior for width variants */
.layout-panel-flex--row > .group-block--width-fit {
  flex: 0;
}

.layout-panel-flex--row > .group-block--width-fill {
  flex: 1;
}

.layout-panel-flex--row > .group-block--width-custom {
  flex-basis: var(--size-style-width);
}

/* Dimension utilities - Height */
.group-block--height-fit {
  height: auto;
}

.group-block--height-custom,
.group-block--height-fill {
  height: var(--size-style-height);
}

/* Flex behavior for height variants */
.layout-panel-flex--column > .group-block--height-fit {
  flex: 0 1 auto;
}

.layout-panel-flex--column > .group-block--height-fill {
  flex: 1;
}

.layout-panel-flex--column > .group-block--height-custom {
  flex-basis: var(--size-style-height);
}

/* Global scrollbar styles */

/* Webkit browsers */
::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-40));
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
  transition: background-color 0.2s;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgb(var(--color-foreground-rgb) / var(--opacity-60));
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Prevent iOS zoom on input focus by ensuring minimum 16px font size on mobile */
@media screen and (max-width: 1200px) {
  input,
  textarea,
  select,
  /* Higher specificity to override type preset classes like .paragraph, .h1, etc. */
  .paragraph.paragraph input,
  .paragraph.paragraph textarea,
  .paragraph.paragraph select,
  .h1.h1 input,
  .h1.h1 textarea,
  .h1.h1 select,
  .h2.h2 input,
  .h2.h2 textarea,
  .h2.h2 select,
  .h3.h3 input,
  .h3.h3 textarea,
  .h3.h3 select,
  .h4.h4 input,
  .h4.h4 textarea,
  .h4.h4 select,
  .h5.h5 input,
  .h5.h5 textarea,
  .h5.h5 select,
  .h6.h6 input,
  .h6.h6 textarea,
  .h6.h6 select {
    font-size: max(1rem, 100%);
  }
}

/* When the header is transparent, and when there is no header-section below it, offset the first main-section with
 * the height of the header
 */
main > .shopify-section:first-child .section:not(.disable-section-top-offset) {
  &.spacing-style,
  .spacing-style {
    --section-top-offset: calc(var(--header-height) * var(--transparent-header-offset-boolean));

    /* Any nested sections should not be offset */
    :is(.spacing-style, .inherit-spacing) {
      --section-top-offset: 0px;
    }
  }

  /* Make sticky content immediately stick to the top of the page */
  .sticky-content {
    margin-top: calc(var(--header-height) * var(--transparent-header-offset-boolean) * -1);
  }
}


/* Début du CSS personnalisé */
.author-expert-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #f9f9f9; /* Couleur de fond légère */
  padding: 20px;
  border-radius: 8px;
  margin: 20px 0;
  border: 1px solid #eee;
}

.author-img-wrapper {
  flex-shrink: 0;
}

.author-avatar {
  width: 120px; /* Taille fixe pour éviter l'effet géant */
  height: 120px;
  object-fit: cover;
  border-radius: 50%; /* Image ronde */
  border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.author-details {
  display: flex;
  flex-direction: column;
}

.author-badge {
  font-size: 0.75rem;
  font-weight: bold;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.author-full-name {
  margin: 5px 0;
  font-size: 1.25rem;
}

.author-job-title {
  font-style: italic;
  margin: 0;
  color: #555;
}

.author-quote {
  margin-top: 10px;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Version Mobile */
@media (max-width: 600px) {
  .author-expert-card {
    flex-direction: column;
    text-align: center;
  }
}

/* Masquage forcé du bouton d'évitement sur Bureau Cosy */
.skip-link, .skip-to-content, .skip-to-content-link {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* On le réaffiche uniquement quand l'utilisateur utilise la touche TAB */
.skip-link:focus, .skip-to-content:focus, .skip-to-content-link:focus {
    left: 0 !important;
    top: 0 !important;
    width: auto !important;
    height: auto !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    padding: 10px !important;
    z-index: 999999 !important;
}

/* --- Style Sommaire Blog Bureau Cosy --- */
.blog-toc {
  background-color: #fcfcfc;
  border-left: 4px solid #c5a059; 
  padding: 20px 25px;
  margin: 20px 0 30px 0;
  border-radius: 0 8px 8px 0;
}

.toc-title {
  font-weight: 800;
  font-size: 13px;
  color: #c5a059;
  letter-spacing: 1px;
  margin-bottom: 12px !important;
  text-transform: uppercase;
}

.blog-toc ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.blog-toc li {
  margin-bottom: 8px !important;
  font-size: 15px;
}

.blog-toc a {
  text-decoration: none;
  color: #333;
  transition: color 0.2s ease;
  display: block;
}

.blog-toc a:hover {
  color: #c5a059;
}

@media (max-width: 600px) {
  .blog-toc { padding: 15px; }
  .blog-toc li { font-size: 14px; }
}
  
h2[id], h3[id] {
  scroll-margin-top: 110px; 
}

/* Style pour PC (Pleine Largeur) */
.author-expert-card {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #e1e1e1;
  border-radius: 12px;
  padding: 30px;
  margin: 10px 0; /* Marge haut/bas uniquement */
  /* SUPPRESSION de max-width: 800px et margin: auto */
  gap: 30px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.author-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #c5a059;
  display: block;
  flex-shrink: 0; /* Empêche l'image de s'écraser */
}

.author-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  color: #c5a059;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.author-full-name {
  margin: 0;
  font-size: 22px;
  color: #1a1a1a;
  font-weight: 700;
}

.author-job-title {
  margin: 4px 0 12px 0;
  font-size: 15px;
  color: #777;
  font-weight: 500;
}

.author-quote {
  margin: 0;
  font-size: 16px;
  color: #444;
  line-height: 1.5;
  font-style: italic;
  border-left: 3px solid #f0f0f0;
  padding-left: 15px;
}

/* Version Mobile (inchangée, reste parfaite) */
@media (max-width: 650px) {
  .author-expert-card {
    flex-direction: column;
    text-align: center;
    padding: 25px;
    gap: 20px;
  }
  .author-quote {
    border-left: none;
    padding-left: 0;
  }
  .author-img-wrapper {
    margin-bottom: 0;
  }
}

/* BLOC UPSELL DANS LES COLLECTIONS*/
/* Conteneur principal : aligne les cartes proprement */
.bc-collection-grid {
    display: flex;
    gap: 20px;
    margin: 30px 0;
    flex-wrap: wrap;
    justify-content: center;
}

/* La carte produit : effet de survol et bordure discrète */
.bc-card {
    flex: 1;
    min-width: 300px;
    max-width: 48%;
    border: 1px solid #eeeeee;
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    transition: all 0.3s ease;
}

.bc-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* L'image : format harmonisé pour éviter les décalages */
.bc-image-container {
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.bc-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Zone de texte : centre le contenu et gère l'espacement */
.bc-content {
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.bc-content h3 {
    margin: 0 0 10px 0 !important;
    font-size: 1.2rem !important;
    color: #1a2b4c !important; /* Ton bleu signature */
    text-transform: uppercase;
    font-weight: bold;
}

.bc-content p {
    font-size: 0.9rem !important;
    color: #666666 !important;
    margin: 0 0 20px 0 !important;
}

/* Le bouton : bien visible et cliquable */
.bc-btn {
    display: inline-block !important;
    background-color: #1a2b4c !important;
    color: #ffffff !important;
    padding: 12px 25px !important;
    text-decoration: none !important;
    font-weight: bold !important;
    font-size: 0.9rem !important;
    border-radius: 2px;
    cursor: pointer;
    align-self: center;
}

/* Ajustements pour mobile (empilement vertical) */
@media (max-width: 768px) {
    .bc-card {
        min-width: 100%;
        max-width: 100%;
    }
    .bc-image-container {
        height: 220px;
    }
}

.bc-advantages-section { margin-bottom: 30px; font-family: sans-serif; }
.bc-advantage-row { display: flex; align-items: center; gap: 40px; margin-bottom: 50px; }
.bc-advantage-row:last-child { margin-bottom: 0; }
.bc-row-reverse { flex-direction: row-reverse; }
.bc-advantage-img { flex: 1; }
.bc-advantage-img img { width: 100%; border-radius: 12px; display: block; box-shadow: 0 4px 15px rgba(0,0,0,0.08); }
.bc-advantage-content { flex: 1; color: #000000; }

.bc-h3-reduced {
font-size: 1.3rem !important;
margin-bottom: 15px;
font-weight: 700;
color: #000000 !important;
}

.bc-advantage-content p { line-height: 1.6; margin-bottom: 20px; font-size: 1rem; color: #000000; }
.bc-benefits-list { list-style: none; padding: 0; }
.bc-benefits-list li { position: relative; padding-left: 28px; margin-bottom: 10px; font-weight: 600; color: #000000; }
.bc-benefits-list li::before {
content: "✓"; position: absolute; left: 0; color: #ffffff; background: #000000;
width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
border-radius: 50%; font-size: 0.7rem;
}
@media screen and (max-width: 767px) {
.bc-advantage-row { flex-direction: column !important; gap: 25px; margin-bottom: 50px; }
.bc-advantage-content h3, .bc-advantage-content p { text-align: center; }
}

<style>
  /* --- STYLE GÉNÉRIQUE BUREAU COSY --- */
  .bc-comparison-box {
    background-color: #ffffff;
    padding: 25px 20px;
    border-radius: 12px;
    margin: 20px 0;
    border: 1px solid #F2EFE9;
    font-family: inherit;
  }
  
  .bc-comparison-title {
    margin-top: 0;
    margin-bottom: 25px;
    text-align: center;
    color: #000000;
    font-size: 1.4rem;
    font-weight: 700;
  }

  .bc-table-container { overflow-x: auto; }

  .bc-responsive-table { 
    width: 100%; 
    border-collapse: collapse; 
  }

  .bc-responsive-table th { 
    background-color: #F2EFE9;
    color: #3A506B; 
    padding: 12px; 
    text-align: center; 
    border: 1px solid #ddd; 
    font-weight: 800;
    font-size: 0.9rem;
  }

  .bc-responsive-table td { 
    padding: 12px; 
    text-align: center; 
    border: 1px solid #ddd; 
    color: #3A506B; 
    font-size: 0.9rem;
  }

  .bc-responsive-table tr:nth-child(even) { background-color: #fafafa; }

  /* --- TRANSFORMATION MOBILE (MODERN CARDS) --- */
  @media screen and (max-width: 767px) {
    .bc-responsive-table thead { display: none; }
    
    .bc-responsive-table tr {
      display: block;
      margin-bottom: 20px;
      border: 2px solid #F2EFE9;
      border-radius: 10px;
      overflow: hidden;
      background: #fff !important;
    }

    .bc-responsive-table td {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 15px;
      border: none;
      border-bottom: 1px solid #eee;
      text-align: right;
    }

    .bc-responsive-table td::before {
      content: attr(data-label);
      font-weight: 700;
      color: #3A506B;
      font-size: 0.85rem;
      text-transform: uppercase;
      text-align: left;
      flex: 1;
    }
    
    .bc-responsive-table td:last-child { border-bottom: none; }
    
    .bc-responsive-table td:first-child {
      background-color: #F2EFE9;
      justify-content: center;
      font-size: 1.1rem;
      padding: 15px;
      font-weight: 800;
    }
    .bc-responsive-table td:first-child::before { display: none; }
  }

  /*Entête points forts dans la fiche produit*/
.features-container {
        background-color: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 20px;
        margin: 15px 0;
        font-family: sans-serif;
    }

    .features-title {
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1px;
        color: #1a2b4a;
        margin-bottom: 20px;
        text-align: center;
        text-transform: uppercase;
    }

    .features-grid {
        display: grid;
        /* 'auto auto' fait que les colonnes ne sont pas plus larges que le texte */
        grid-template-columns: auto auto; 
        /* 'justify-content: center' centre le groupe des deux colonnes au milieu du bloc */
        justify-content: center; 
        gap: 15px 25px; /* Espace par défaut pour mobile */
        margin: 0 auto;
    }

    .feature-item {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .feature-icon {
        font-size: 20px;
        flex-shrink: 0;
    }

    .feature-text {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
    }

    .feature-text strong {
        font-size: 11px;
        color: #1a2b4a;
        margin-bottom: 2px;
        white-space: nowrap; /* Empêche le titre de revenir à la ligne */
    }

    .feature-text span {
        font-size: 10px;
        color: #666;
        white-space: nowrap; /* Empêche le sous-texte de revenir à la ligne */
    }

    /* AJUSTEMENTS POUR PC (écrans > 768px) */
    @media (min-width: 768px) {
        .features-grid {
            /* Ici, on augmente l'espace au milieu. 
               Comme les colonnes sont en 'auto', elles vont s'écarter 
               équitablement depuis le centre. */
            column-gap: 90px; 
        }
        .feature-text strong {
            font-size: 12px;
        }
        .feature-text span {
            font-size: 11px;
        }
    }

  .usp-bureaucosy {
    display: grid;
    gap: 12px; /* Un peu plus d'espace pour respirer */
    margin: 20px 0;
    font-size: 14px;
    color: #333;
  }

  /* Version MOBILE (par défaut) : 1 seule colonne pour que le texte soit lisible */
  @media (max-width: 767px) {
    .usp-bureaucosy {
      grid-template-columns: 1fr;
    }
  }

  /* Version PC : 2 colonnes (2x2) pour gagner de la place en hauteur */
  @media (min-width: 768px) {
    .usp-bureaucosy {
      grid-template-columns: 1fr 1fr;
      gap: 12px 20px;
    }
  }

  /* évite le recalcul du héros, attention faut probablement ajuster si modif du thème */
  .hero-wrapper:first-child .hero {
  --hero-height-offset: 98px;
}

/* Force le changement de couleur de fond de l'en-tête, peu importe la méthode du thème */
.rte table thead,
.rte table thead tr,
.rte table th {
  background: #F9F7F4 !important;
  background-color: #F9F7F4 !important;
}

/* ==========================================================================
   CHARTE DESCRIPTIONS PRODUITS - BUREAU COSY
   ========================================================================== */

/* --- 1. CONFIGURATIONS ET TITRES DES SECTIONS --- */
.bureaucosy-benefits-section,
.bureaucosy-table-wrapper,
.bureaucosy-specs-wrapper,
.bureaucosy-section-wrapper {
  font-family: inherit;
  padding: 0 5px;
  box-sizing: border-box;
}

/* Titres globaux harmonisés et resserrés */
.bureaucosy-benefits-section h2,
.cosy-table-title,
.cosy-section-title,
.bureaucosy-specs-wrapper h2 {
  font-size: 20px;
  font-weight: 700;
  color: #1c1b1b;
  text-align: center;
  margin-top: 5px !important;
  margin-bottom: 15px !important;
  line-height: 1.3;
}

/* --- 2. SECTION BÉNÉFICES CLÉS (LISTE STYLE BULLET POINTS) --- */
.bureaucosy-benefits-section {
  margin: 15px 0 25px 0 !important;
  width: 100% !important;
}

.cosy-benefits-intro {
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  color: #4a4a4a !important;
  margin-bottom: 20px !important;
  padding: 0 !important;
}

/* Force l'affichage en 1 seule colonne verticale (annule la grille 2x2) */
.bureaucosy-benefits-section .cosy-benefits-list {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important; /* Annule tout CSS Grid du thème */
  gap: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Un élément = une simple ligne de liste */
.bureaucosy-benefits-section .cosy-benefit-item {
  display: flex !important;
  align-items: flex-start !important; /* Puce alignée en haut */
  gap: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important; /* Suppression totale des bordures */
  background: transparent !important; /* Suppression des fonds blancs/cadres */
  box-shadow: none !important;
  width: 100% !important;
}

/* Transforme l'icône en puce minimaliste */
.bureaucosy-benefits-section .cosy-benefit-icon {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 20px !important;
  padding: 0 !important;
  margin-top: 2px !important; /* Alignement parfait avec le titre */
  box-shadow: none !important;
}

.bureaucosy-benefits-section .cosy-benefit-icon svg {
  width: 18px !important;
  height: 18px !important;
  color: #8c8273 !important;
}

/* Bloc texte */
.bureaucosy-benefits-section .cosy-benefit-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.bureaucosy-benefits-section .cosy-benefit-text h3 {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #1c1b1b !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

.bureaucosy-benefits-section .cosy-benefit-text p {
  font-size: 13.5px !important;
  color: #555555 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* --- 3. TABLEAU COMPARATIF & SPÉCIFICATIONS --- */
.bureaucosy-table-wrapper,
.bureaucosy-specs-wrapper {
  margin: 15px 0 20px 0 !important;
}
.cosy-comparison-table,
.cosy-specs-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #ffffff;
  border: 1px solid #e8e6e1;
  border-radius: 10px;
  overflow: hidden;
  font-size: 13px;
}
.cosy-comparison-table th,
.cosy-comparison-table td,
.cosy-specs-table th,
.cosy-specs-table td {
  width: 50% !important;
  max-width: 50% !important;
  padding: 12px 14px;
  text-align: left;
  vertical-align: middle;
  box-sizing: border-box;
}
.cosy-comparison-table th,
.cosy-specs-table thead tr td {
  background-color: #fcfbf9;
  border-bottom: 1px solid #e8e6e1;
  color: #1c1b1b;
  font-size: 13.5px;
  font-weight: 600;
}
.cosy-comparison-table th:first-child,
.cosy-comparison-table td:first-child,
.cosy-specs-table tbody tr td:first-child {
  border-right: 1px solid #f3f1ec;
}
.cosy-comparison-table td:first-child {
  color: #666666;
}
.cosy-comparison-table tbody tr,
.cosy-specs-table tbody tr {
  border-bottom: 1px solid #f3f1ec;
}
.cosy-comparison-table tbody tr:last-child,
.cosy-specs-table tbody tr:last-child {
  border-bottom: none;
}
.cosy-header-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cosy-table-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.cosy-table-icon svg {
  width: 16px;
  height: 16px;
}
.cosy-cross-color { color: #c96a60; }
.cosy-check-color { color: #7ca682; }
.cosy-comparison-table td:last-child { color: #1c1b1b; }
.cosy-specs-table tbody tr td b { font-weight: 600; color: #1c1b1b; }

/* --- 4. CARTES / ENVIRONNEMENT DE TRAVAIL --- */
.bureaucosy-section-wrapper {
  margin: 15px 0 20px 0 !important;
}
.bureaucosy-section-wrapper h2 {
  text-align: center;
  padding-bottom: 0; /* On supprime l'espace interne */
  margin-bottom: 15px !important; /* On force une petite marge externe (vous pouvez baisser à 10px ou 5px si c'est encore trop grand) */
}
.cosy-grid-compact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.cosy-card-mini {
  background-color: #fcfbf9;
  border: 1px solid #e8e6e1;
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 74px;
  box-sizing: border-box;
}
.cosy-icon-container {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cosy-icon-container svg {
  width: 20px;
  height: 20px;
  color: #8c8273;
}
.cosy-card-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cosy-card-mini h3 {
  font-size: 14px;
  color: #1c1b1b;
  margin: 0 0 2px 0;
  font-weight: 600;
  line-height: 1.2;
}
.cosy-card-mini h4 {
  font-size: 14px;
  color: #1c1b1b;
  margin: 0 0 2px 0;
  font-weight: 600;
  line-height: 1.2;
}
.cosy-card-mini p {
  font-size: 13px;
  color: #555555;
  margin: 0;
  line-height: 1.4;
}

/* --- 5. ACCORDÉON CONCEPTION & ERGONOMIE --- */
.cosy-accordion {
  background-color: #fcfbf9;
  border: 1px solid #e8e6e1;
  border-radius: 10px;
  margin: 10px 0 35px 0;
  overflow: hidden;
  transition: all 0.3s ease;
}
.cosy-accordion-summary {
  padding: 16px;
  font-size: 14px;
  font-weight: 600;
  color: #1c1b1b;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cosy-accordion-summary::-webkit-details-marker {
  display: none;
}
.cosy-accordion-summary .txt-ouvrir,
.cosy-accordion-summary .txt-fermer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.cosy-accordion .txt-fermer { display: none; }
.cosy-accordion .txt-ouvrir { display: inline-flex; color: #1c1b1b; }
.cosy-accordion[open] {
  border-color: #cbd5e1;
  background-color: #ffffff;
}
.cosy-accordion[open] .txt-ouvrir { display: none; }
.cosy-accordion[open] .txt-fermer { 
  display: inline-flex; 
  color: #8c8273; 
  font-weight: 500; 
}
.cosy-acc-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.cosy-acc-svg svg {
  width: 16px;
  height: 16px;
  color: #8c8273;
}
.cosy-accordion-content {
  padding: 16px;
  border-top: 1px solid #edf2f7;
  background-color: #ffffff;
}
.cosy-accordion-content p {
  font-size: 13.5px;
  color: #555555;
  line-height: 1.5;
  margin: 0 0 14px 0;
}
.cosy-accordion-content p:last-child {
  margin-bottom: 0;
}

/* --- 6. OPTIMISATION TABLETTE & ORDINATEUR (DÉPLIAGE EN GRILLE) --- */
@media (min-width: 768px) {
  .cosy-benefits-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .cosy-benefit-item {
    border-bottom: none;
    background-color: #fcfbf9;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #e8e6e1;
  }
  .cosy-grid-compact {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

/* ==========================================================================
   AIDE A LA DECISION
   ========================================================================== */

/* Conteneur principal - Ambiance Bureau Cosy */
.bc-guide-container {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	color: #02254F; /* Bleu Profond */
	max-width: 700px;
	margin: auto;
	padding: 25px;
	background-color: #ffffff;
	border: 1px solid #eee;
	border-radius: 12px;
}

.bc-header {
	text-align: center;
	border-bottom: 2px solid #C5A059; /* Liseré Doré */
	margin-bottom: 30px;
	padding-bottom: 15px;
}

.bc-title {
	color: #02254F;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin: 0;
	font-size: 1.8em;
	font-weight: 800;
}

.bc-subtitle {
	color: #C5A059;
	margin-top: 5px;
	font-size: 1em;
	font-weight: 400;
}

.bc-section-title {
	color: #02254F;
	border-left: 4px solid #C5A059; /* Accents Dorés */
	padding-left: 12px;
	margin: 35px 0 15px 0;
	font-size: 1.3em;
	font-weight: 700;
}

/* Style du tableau aux couleurs de la marque */
.bc-table {
	width: 100%;
	border-collapse: collapse;
	background: white;
	font-size: 0.95em;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 15px rgba(2, 37, 79, 0.08);
}

.bc-table th {
	background-color: #02254F; /* Fond Bleu */
	color: #ffffff;
	padding: 15px;
	text-align: left;
	text-transform: uppercase;
	font-size: 0.85em;
	letter-spacing: 1px;
}

.bc-table td {
	padding: 14px;
	border-bottom: 1px solid #f0f0f0;
}

.bc-table tr:nth-child(even) {
	background-color: #f8f9fa;
}

/* Cartes d'épaisseur */
.bc-thickness-flex {
	display: flex;
	justify-content: space-between;
	gap: 15px;
	margin-top: 15px;
	flex-wrap: wrap;
}

.bc-thickness-card {
	flex: 1;
	min-width: 140px;
	padding: 20px 10px;
	text-align: center;
	border: 1px solid #e0e0e0;
	background: white;
	border-radius: 8px;
	transition: all 0.3s ease;
}

.bc-thickness-card:hover {
	border-color: #C5A059;
	box-shadow: 0 5px 15px rgba(197, 160, 89, 0.2);
	transform: translateY(-3px);
}

.bc-thick-val {
	display: block;
	font-size: 1.6em;
	font-weight: 800;
	color: #C5A059; /* Valeur en Doré */
	margin-bottom: 5px;
}

.bc-thick-name {
	font-weight: 700;
	display: block;
	margin-bottom: 8px;
	color: #02254F;
	text-transform: uppercase;
	font-size: 0.9em;
}

.bc-thick-desc {
	font-size: 0.85em;
	color: #444;
	line-height: 1.4;
}

/* Footer & Highlights */
.bc-footer {
	margin-top: 40px;
	padding: 20px;
	background-color: #02254F;
	color: #ffffff;
	border-radius: 8px;
	font-size: 0.95em;
	text-align: center;
}

.highlight {
	color: #C5A059;
	font-weight: bold;
}

.gold-btn {
	display: inline-block;
	margin-top: 10px;
	padding: 5px 10px;
	border: 1px solid #C5A059;
	color: #C5A059;
	border-radius: 4px;
	font-size: 0.8em;
	text-transform: uppercase;
}

/* 1. Force le fond bleu et le texte blanc sur l'en-tête dans l'éditeur Shopify */
.rte .rte-table-wrapper table.table-comparatif thead th,
.rte table.table-comparatif th {
    background-color: #02254f !important;
    color: #ffffff !important;
    text-align: left !important;
    font-weight: 600 !important;
}

/* 2. Force le style global du tableau (ombre et marges) */
.rte .rte-table-wrapper table.table-comparatif,
table.table-comparatif {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 25px 0 !important;
    font-family: sans-serif !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

/* 3. Force l'espacement interne des cellules */
.rte table.table-comparatif th, 
.rte table.table-comparatif td {
    padding: 12px 15px !important;
}

/* 4. Lignes de séparation et effet zébré */
.rte table.table-comparatif tbody tr {
    border-bottom: 1px solid #dddddd !important;
}
.rte table.table-comparatif tbody tr:nth-of-type(even) {
    background-color: #f8f9fa !important;
}


/* FIL D'ARIANE */
.breadcrumb { 
  padding: 0 0 5px 0; 
  font-size: 14px; 
  color: #666; 
  line-height: 1.4;
}

.breadcrumb a { color: #333; text-decoration: none; }
.breadcrumb a:hover { color: #000; text-decoration: underline; }
.breadcrumb__delimiter { margin: 0 8px; color: #ccc; }
  
/* Le dernier élément devient un lien stylisé en gras et foncé */
a.breadcrumb__current { 
  font-weight: 600; 
  color: #111; 
  text-decoration: none;
}

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

@media screen and (max-width: 749px) {
  .breadcrumb { 
    padding: 6px 0 2px 0; 
    font-size: 12px;       
    line-height: 1.3;
  }

  .breadcrumb__delimiter { margin: 0 4px; } 
}

/* EXPLORER LA COLLECTION DEPUIS LA FICHE PRODUIT */
.product-bottom-cta {
  margin: 30px 0;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 4px;
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
}

.product-bottom-cta a {
  color: #111;
  font-weight: 600;
  text-decoration: underline;
  transition: color 0.2s;
  display: inline-block;
  margin-top: 8px;
}

.product-bottom-cta a:hover {
  color: #000;
}

/* RASSURANCE PAGE COLLECTION ET HOME PAGE */ 
  .trust-bar-cosy {
    background-color: #ffffff; /* Fond blanc pur pour plus de clarté */
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    overflow: hidden;
    padding: 15px 0;
    margin: 10px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02); /* Ombre très subtile */
  }

  .trust-container {
    display: flex;
    align-items: center;
  }

  .trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  /* --- STYLE DES ICÔNES SVG --- */
  .trust-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #002349; /* Ton bleu marine Bureau Cosy pour les icônes */
  }
  
  .trust-icon svg {
    width: 24px;
    height: 24px;
  }

  .trust-text-group {
    display: flex;
    flex-direction: column;
    text-align: left;
  }

  .trust-title {
    font-weight: 700;
    font-size: 13px;
    margin: 0;
    color: #002349; 
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .trust-desc {
    font-size: 11px;
    color: #888;
    margin: 0;
    line-height: 1.2;
  }

  /* --- STYLE DESKTOP --- */
  @media (min-width: 768px) {
    .trust-container {
      justify-content: space-around;
      max-width: 1200px;
      margin: 0 auto;
      width: 100% !important;
      animation: none !important;
      transform: none !important;
    }
    .trust-item-duplicate { display: none !important; }
    .trust-item { flex: 1; border-right: 1px solid #f5f5f5; }
    .trust-item:last-child { border-right: none; }
  }

  /* --- STYLE MOBILE --- */
  @media (max-width: 767px) {
    .trust-bar-cosy { padding: 10px 0; }
    .trust-container {
      width: max-content;
      animation: marquee 25s linear infinite;
    }
    .trust-item { padding: 0 35px; }
    .trust-desc { display: none; } /* On garde l'essentiel sur mobile */
    .trust-title { font-size: 12px; }
  }

  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }