/** Shopify CDN: Minification failed

Line 731:15 Unterminated string token
Line 744:18 Unterminated string token

**/
/* =========================================================
   LUMINIAIRE FRANCE — CSS GLOBAL
   VERSION CORRIGÉE
   ========================================================= */

* {
  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-lift-amount: 4px;
  --hover-scale-amount: 1.03;
  --hover-subtle-zoom-amount: 1.015;
  --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
   ========================================================= */

html {
  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
   ========================================================= */

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

/* =========================================================
   IMAGES / MEDIA
   ========================================================= */

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

/*
   IMPORTANT :
   Ne pas imposer width:100% globalement aux images.
   Shopify utilise cette largeur pour plusieurs composants,
   notamment la galerie produit.
*/

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

/* =========================================================
   FORMULAIRES
   ========================================================= */

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

select {
  background-color: var(--color-background);
  color: currentcolor;
}

/* =========================================================
   PRODUCT / COLLECTION CARDS
   ========================================================= */

.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;
  cursor: pointer;
}

/* =========================================================
   CARD HOVER
   ========================================================= */

@media (any-pointer: fine)
  and (prefers-reduced-motion: no-preference) {

  .card-hover-effect-lift
  .product-card:hover,

  .card-hover-effect-lift
  .collection-card:hover,

  .card-hover-effect-lift
  .predictive-search-results__card:hover {
    transform:
      translateY(calc(-1 * var(--hover-lift-amount)));
  }

  .card-hover-effect-scale
  .product-card:hover,

  .card-hover-effect-scale
  .collection-card:hover,

  .card-hover-effect-scale
  .predictive-search-results__card:hover {
    transform:
      scale(var(--hover-scale-amount));
  }

  .card-hover-effect-subtle-zoom
  .card-gallery,

  .card-hover-effect-subtle-zoom
  .collection-card__image,

  .card-hover-effect-subtle-zoom
  .product-card__image {
    overflow: hidden;
    transition:
      transform var(--hover-transition-duration)
      var(--hover-transition-timing);
  }

  .card-hover-effect-subtle-zoom
  .product-card:hover
  .card-gallery,

  .card-hover-effect-subtle-zoom
  .collection-card:hover
  .collection-card__image,

  .card-hover-effect-subtle-zoom
  .product-card:hover
  .product-card__image,

  .card-hover-effect-subtle-zoom
  .predictive-search-results__card:hover {
    transform:
      scale(var(--hover-subtle-zoom-amount));
  }
}

/* =========================================================
   DIALOG
   ========================================================= */

dialog {
  --backdrop-color-rgb: var(--color-shadow-rgb);

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

/* =========================================================
   TEXT WRAPPING
   ========================================================= */

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

/* =========================================================
   MARGINS TITRES / PARAGRAPHES
   ========================================================= */

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

: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
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {

  :root {
    view-transition-name: none;
  }

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

/* =========================================================
   CONTENT
   ========================================================= */

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

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

/* =========================================================
   PAGE WIDTH
   ========================================================= */

.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 {
  --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 {
  --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
   ========================================================= */

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

  --util-page-margin-offset:
    max(
      var(--page-margin),
      calc(
        (
          100% -
          min(
            var(--page-content-width),
            100% - var(--page-margin) * 2
          )
        ) / 2
      )
    );

  --full-page-margin-inline-offset:
    calc(
      (
        (
          100vw -
          var(--full-page-grid-central-column-width)
        ) / 2
      ) * -1
    );

  width: 100%;
  position: relative;
  display: grid;
  grid-template-columns:
    var(--full-page-grid-with-margins);

  min-height:
    var(--section-min-height, auto);
}

.section > * {
  grid-column: 2;
}

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

.section--page-width > * {
  grid-column: 2;
}

.section--full-width > * {
  grid-column: 1 / -1;
}

@media screen and (max-width: 749px) {

  .section--mobile-full-width > * {
    grid-column: 1 / -1;
  }
}

.section--page-width.section--full-width-right > * {
  grid-column: 2 / 4;
}

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

.section > .force-full-width {
  grid-column: 1 / -1;
}

/* =========================================================
   SECTION HEIGHTS
   ========================================================= */

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

/* =========================================================
   UTILITAIRES
   ========================================================= */

.hidden {
  display: none !important;
}

@media screen and (max-width: 749px) {

  .hidden--mobile,
  .mobile\:hidden {
    display: none !important;
  }
}

@media screen and (min-width: 750px) {

  .hidden--desktop,
  .desktop\:hidden {
    display: none !important;
  }
}

.hide-when-empty:empty {
  display: none !important;
}

.visually-hidden:not(:focus, :active) {
  position: absolute !important;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  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;
  }
}

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

/* =========================================================
   BACKGROUND IMAGE
   ========================================================= */

.background-image-container {
  overflow: hidden;
  position: absolute;
  inset: 0;
  opacity: var(--image-opacity);
}

.background-image-container img,
.background-image-container svg {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.background-image-fit img,
.background-image-fit svg {
  object-fit: contain;
}

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

/* =========================================================
   PLACEHOLDER
   ========================================================= */

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

/* =========================================================
   TYPOGRAPHIE
   ========================================================= */

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

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

/* =========================================================
   H1
   ========================================================= */

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

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

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

/* =========================================================
   CONTAINERS
   ========================================================= */

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

details[open] .summary-closed {
  display: none;
}

details:not([open]) .summary-open {
  display: none;
}

details[open] > summary
.icon-animated > svg {
  transform: rotate(180deg);
}

summary::-webkit-details-marker {
  display: none;
}

/* =========================================================
   HEADER TRANSPARENT
   ========================================================= */

body:has(.header[transparent])
.content-for-layout
> .shopify-section:first-child {
  margin-top:
    calc(var(--header-group-height) * -1);
}

body:has(.header[transparent])
#header-group
> .header-section {
  z-index: var(--layer-menu-drawer);
}

body:has(.header[transparent])
#header-group
> *:not(.header-section) {
  z-index:
    calc(var(--layer-menu-drawer) - 1);
}

/* =========================================================
   TEXT BLOCK
   ========================================================= */

.text-block {
  width: 100%;
}

.text-block > *:first-child,
.text-block > *:first-child:empty + * {
  margin-block-start: 0;
}

.text-block > *:last-child,
.text-block > *:has(+ *:last-child:empty) {
  margin-block-end: 0;
}

.text-block > style + * {
  margin-block-start: 0;
}

/* =========================================================
   DIALOG
   ========================================================= */

.dialog-modal {
  border: none;
  box-shadow: var(--shadow-popover);
}

@media screen and (min-width: 750px) {

  .dialog-modal {
    border-radius:
      var(--style-border-radius-popover);

    max-width:
      var(--normal-content-width);
  }
}

@media screen and (max-width: 749px) {

  .dialog-modal {
    max-width: 100%;
    max-height: 100%;
    height: 100dvh;
    width: 100%;
    padding: var(--padding-md);
  }
}

.dialog-modal::backdrop {
  transition:
    backdrop-filter var(--animation-speed)
      var(--animation-easing);

  backdrop-filter: brightness(1);

  background:
    rgb(
      var(--backdrop-color-rgb)
      /
      var(--backdrop-opacity)
    );
}

.dialog-modal[open] {
  animation:
    elementSlideInTop
    var(--animation-speed)
    var(--animation-easing)
    forwards;

  &::backdrop {
    animation:
      backdropFilter
      var(--animation-speed)
      var(--animation-easing)
      forwards;

    transition:
      opacity
      var(--animation-speed)
      var(--animation-easing);
  }
}

.dialog-modal.dialog-closing {
  animation:
    elementSlideOutTop
    var(--animation-speed)
    var(--animation-easing)
    forwards;

  &::backdrop {
    opacity: 0;
  }
}

/* =========================================================
   DRAWER
   ========================================================= */

.dialog-drawer {
  --dialog-drawer-opening-animation: move-and-fade;
  --dialog-drawer-closing-animation: move-and-fade;
}

.dialog-drawer--right {
  --dialog-drawer-opening-animation: move-and-fade;
  --dialog-drawer-closing-animation: move-and-fade;
}

.dialog-drawer[open] {
  --start-x:
    var(--custom-transform-from, 100%);

  --end-x:
    var(--custom-transform-to, 0px);

  --start-opacity: 1;

  animation:
    var(--dialog-drawer-opening-animation)
    var(--animation-speed)
    var(--animation-easing)
    forwards;
}

.dialog-drawer[open].dialog-closing {
  --start-x: 0px;
  --end-x: 100%;
  --start-opacity: 1;
  --end-opacity: 1;

  animation:
    var(--dialog-drawer-closing-animation)
    var(--animation-speed)
    var(--animation-easing);
}

.dialog-drawer--right[open] {
  --start-x: -100%;
  --start-opacity: 1;
}

.dialog-drawer--right[open].dialog-closing {
  --start-x: 0px;
  --end-x: -100%;
  --start-opacity: 1;
  --end-opacity: 1;

  animation:
    var(--dialog-drawer-closing-animation)
    var(--animation-speed)
    var(--animation-easing);
}

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

/* =========================================================
   INPUTS
   ========================================================= */

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

/* =========================================================
   BUTTON STATES
   ========================================================= */

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

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

/* =========================================================
   UNSTYLED BUTTON
   ========================================================= */

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

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

/* =========================================================
   SUMMARY
   ========================================================= */

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

.icon-caret--forward svg {
  transform: rotate(-90deg);
}

.icon-caret--backward svg {
  transform: rotate(90deg);
}

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

summary .svg-wrapper {
  margin-inline-start: auto;
  height: var(--icon-size-xs);
  width: var(--icon-size-xs);

  transition:
    transform
    var(--animation-speed)
    var(--animation-easing);
}

summary .icon-plus
:is(.horizontal, .vertical) {
  transition:
    transform
    var(--animation-speed)
    var(--animation-easing);

  transform: rotate(0deg);
  transform-origin: 50% 50%;
  opacity: 1;
}

details[open] > summary
.icon-plus .horizontal {
  transform: rotate(90deg);
}

details[open] > summary
.icon-plus .vertical {
  transform: rotate(90deg);
  opacity: 0;
}

/* =========================================================
   CLOSE BUTTON
   ========================================================= */

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

  border-radius: 50%;
}

/* =========================================================
   LUMINIAIRE FRANCE — PREMIUM
   ========================================================= */

.lf-premium {
  margin: 32px 0;
  padding: 24px 16px;

  background: #faf8f2;

  border:
    1px solid
    rgba(212, 175, 55, .25);

  border-radius: 28px;

  color: #222;

  overflow: hidden;
  position: relative;

  box-shadow:
    0 12px 35px
    rgba(0, 0, 0, .06);
}

/* =========================================================
   PETIT CORRECTIF MOBILE GÉNÉRAL
   ========================================================= */

@media (max-width: 767px) {

  .product-container-selector {
    max-width: 100% !important;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .text-element-selector {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}


/* =========================================================
   GALERIE PRODUIT SHOPIFY — CORRECTIF
   =========================================================
   IMPORTANT :
   - aucun display:flex forcé
   - aucune hauteur imposée
   - aucun width:100% forcé sur les images
   - aucun overflow:hidden sur les éléments internes
   ========================================================= */

@media screen and (max-width: 749px) {

  /* Conteneur principal */

  .product__media-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* Web component Shopify */

  media-gallery {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Liste :
     Shopify garde lui-même son système de slider */

  .product__media-list {
    max-width: 100%;
    min-width: 0;
  }

  /* Élément individuel */

  .product__media-item {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Media */

  .product__media,
  .product-media-container {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Images */

  media-gallery img,
  .product__media img,
  .product-media-container img,
  .product__modal-opener img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }

  /*
     On laisse Shopify calculer les dimensions
     pendant l'initialisation JS.
  */

  .product__media-wrapper,
  media-gallery,
  .product__media-list {
    height: auto;
  }

  /*
     Empêche une éventuelle règle personnalisée
     de cacher la galerie.
  */

  .product__media-item,
  .product__media,
  .product-media-container {
    visibility: visible;
  }
}


/* =========================================================
   PETITS ÉCRANS
   ========================================================= */

@media screen and (max-width: 480px) {

  .product__media-wrapper,
  media-gallery,
  .product__media-list,
  .product__media-item,
  .product__media,
  .product-media-container {
    max-width: 100%;
    min-width: 0;
  }

  .product__media img,
  .product-media-container img {
    max-width: 100%;
    height: auto;
  }
}


/* =========================================================
   DESCRIPTION PRODUIT PREMIUM
   ========================================================= */

.product__description,
.product-description,
.product__description.rte,
.product__info-container .product__description {
  color: #29251f;

  font-size: 17px;
  line-height: 1.8;
  letter-spacing: 0.01em;

  max-width: 900px;

  margin: 28px auto 35px;
  padding: 28px 30px;

  background: #faf7f0;

  border:
    1px solid
    rgba(183, 145, 70, 0.18);

  border-radius: 14px;

  box-sizing: border-box;
}

/* =========================================================
   DESCRIPTION — PARAGRAPHES
   ========================================================= */

.product__description p,
.product-description p,
.product__info-container
.product__description p {
  margin: 0 0 18px;
}

.product__description p:last-child,
.product-description p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   DESCRIPTION — H2
   ========================================================= */

.product__description h2,
.product-description h2,
.product__info-container
.product__description h2 {
  margin: 30px 0 15px;

  color: #211d18;

  font-size: 25px;
  line-height: 1.3;
  font-weight: 800;

  letter-spacing: -0.01em;

  padding-bottom: 9px;

  border-bottom:
    1px solid
    rgba(183, 145, 70, 0.35);
}

.product__description h2:first-child,
.product-description h2:first-child {
  margin-top: 0;
}

/* =========================================================
   DESCRIPTION — H3
   ========================================================= */

.product__description h3,
.product-description h3 {
  margin: 24px 0 10px;

  color: #8b6a2b;

  font-size: 20px;
  line-height: 1.4;
  font-weight: 800;
}

/* =========================================================
   DESCRIPTION — H4
   ========================================================= */

.product__description h4,
.product-description h4 {
  margin: 20px 0 8px;

  color: #29251f;

  font-size: 18px;
  font-weight: 700;
}

/* =========================================================
   DESCRIPTION — GRAS
   ========================================================= */

.product__description strong,
.product__description b,
.product-description strong,
.product-description b {
  color: #171411;
  font-weight: 800;
}

/* =========================================================
   DESCRIPTION — LISTES
   ========================================================= */

.product__description ul,
.product__description ol,
.product-description ul,
.product-description ol {
  margin: 18px 0 22px;
  padding-left: 24px;
}

.product__description li,
.product-description li {
  margin-bottom: 9px;
  padding-left: 4px;
}

.product__description li::marker,
.product-description li::marker {
  color: #b79246;
  font-weight: 700;
}

/* =========================================================
   DESCRIPTION — LIENS
   ========================================================= */

.product__description a,
.product-description a {
  color: #8b6a2b;
  font-weight: 700;

  text-decoration: underline;

  text-decoration-color:
    rgba(183, 145, 70, 0.45);

  text-underline-offset: 3px;

  transition:
    color 0.2s ease,
    text-decoration-color 0.2s ease;
}

.product__description a:hover,
.product-description a:hover {
  color: #5f461b;
  text-decoration-color: #b79246;
}

/* =========================================================
   DESCRIPTION — CITATION
   ========================================================= */

.product__description blockquote,
.product-description blockquote {
  margin: 25px 0;

  padding: 18px 22px;

  border-left:
    4px solid #b79246;

  background: #fffdf8;

  color: #51483b;

  font-size: 18px;
  font-style: italic;
  line-height: 1.7;

  border-radius:
    0 10px 10px 0;
}

/* =========================================================
   DESCRIPTION — TABLEAUX
   ========================================================= */

.product__description table,
.product-description table {
  width: 100%;

  margin: 25px 0;

  border-collapse: collapse;

  background: #fffdf9;

  border:
    1px solid
    rgba(183, 145, 70, 0.2);

  border-radius: 10px;

  overflow: hidden;
}

.product__description th,
.product-description th {
  padding: 13px 15px;

  text-align: left;

  background: #eee7d9;

  color: #29251f;

  font-weight: 800;
}

.product__description td,
.product-description td {
  padding: 12px 15px;

  border-top:
    1px solid
    rgba(183, 145, 70, 0.15);
}

/* =========================================================
   DESCRIPTION — IMAGES
   ========================================================= */

.product__description img,
.product-description img {
  display: block;

  max-width: 100%;
  height: auto;

  margin: 25px auto;

  border-radius: 12px;
}

/* =========================================================
   DESCRIPTION — MOBILE
   ========================================================= */

@media screen and (max-width: 749px) {

  .product__description,
  .product-description,
  .product__description.rte,
  .product__info-container
  .product__description {

    width: 100%;
    max-width: 100%;

    margin: 20px 0 28px;

    padding: 21px 18px;

    font-size: 16px;
    line-height: 1.72;

    border-radius: 12px;
  }

  .product__description h2,
  .product-description h2 {
    margin-top: 25px;
    margin-bottom: 13px;

    font-size: 22px;
    line-height: 1.35;
  }

  .product__description h3,
  .product-description h3 {
    margin-top: 21px;
    font-size: 19px;
  }

  .product__description h4,
  .product-description h4 {
    font-size: 17px;
  }

  .product__description p,
  .product-description p {
    margin-bottom: 16px;
  }

  .product__description ul,
  .product__description ol,
  .product-description ul,
  .product-description ol {
    padding-left: 21px;
  }

  .product__description blockquote,
  .product-description blockquote {
    margin: 20px 0;
    padding: 15px 17px;
    font-size: 17px;
  }

  .product__description table,
  .product-description table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    font-size: 14px;
  }
}

/* =========================================================
   DESCRIPTION — TRÈS PETITS ÉCRANS
   ========================================================= */

@media screen and (max-width: 480px) {

  .product__description,
  .product-description,
  .product__info-container
  .product__description {

    padding: 18px 15px;

    font-size: 15.5px;
    line-height: 1.7;
  }

  .product__description h2,
  .product-description h2 {
    font-size: 20px;
  }

  .product__description h3,
  .product-description h3 {
    font-size: 18px;
  }
}


/* =========================================================
   BLOG — ARTICLE PREMIUM
   ========================================================= */

.template-article .article-content {
  max-width: 900px;

  margin: 0 auto;

  padding: 30px 20px 60px;

  color: #40382e;

  font-size: 17px;
  line-height: 1.8;
}

/* =========================================================
   BLOG — H1
   ========================================================= */

.template-article .article-content h1 {
  margin: 0 0 25px;

  color: #29231c;

  font-size:
    clamp(30px, 4vw, 46px);

  line-height: 1.15;

  font-weight: 800;

  letter-spacing: -0.5px;
}

.template-article .article-content h1::after {
  content: "";

  display: block;

  width: 65px;
  height: 3px;

  margin-top: 18px;

  background: #c19a42;

  border-radius: 10px;
}

/* =========================================================
   BLOG — H2
   ========================================================= */

.template-article .article-content h2 {
  margin: 42px 0 17px;

  padding-left: 14px;

  border-left:
    4px solid #c19a42;

  color: #2d261e;

  font-size: 28px;

  line-height: 1.3;

  font-weight: 750;
}

/* =========================================================
   BLOG — H3
   ========================================================= */

.template-article .article-content h3 {
  margin: 32px 0 13px;

  color: #8f6c24;

  font-size: 22px;

  line-height: 1.4;

  font-weight: 700;
}

/* =========================================================
   BLOG — PARAGRAPHES
   ========================================================= */

.template-article .article-content p {
  margin: 0 0 20px;

  color: #4e463b;

  font-size: 17px;

  line-height: 1.8;
}

/* =========================================================
   BLOG — GRAS
   ========================================================= */

.template-article .article-content strong,
.template-article .article-content b {
  color: #29231c;
  font-weight: 750;
}

/* =========================================================
   BLOG — LIENS
   ========================================================= */

.template-article .article-content a {
  color: #9a7428;

  font-weight: 650;

  text-decoration: underline;

  text-decoration-color: #d1ae5b;

  text-decoration-thickness: 1px;

  text-underline-offset: 3px;

  transition: color .2s ease;
}

.template-article .article-content a:hover {
  color: #c0963d;
}

/* =========================================================
   BLOG — LISTES
   ========================================================= */

.template-article .article-content ul,
.template-article .article-content ol {
  margin: 20px 0 25px;
  padding-left: 28px;
}

.template-article .article-content li {
  margin-bottom: 9px;
  padding-left: 4px;

  color: #4e463b;

  line-height: 1.7;
}

.template-article .article-content li::marker {
  color: #bd963d;
  font-weight: 700;
}

/* =========================================================
   BLOG — CITATION
   ========================================================= */

.template-article .article-content blockquote {
  margin: 30px 0;

  padding: 22px 25px;

  background:
    linear-gradient(
      135deg,
      #fffdf8,
      #f7f0e3
    );

  border-left:
    4px solid #c19a42;

  border-radius:
    0 12px 12px 0;

  color: #51483c;

  font-size: 18px;

  line-height: 1.7;

  box-shadow:
    0 5px 18px
    rgba(60,45,20,.06);
}

/* =========================================================
   BLOG — IMAGES
   ========================================================= */

.template-article .article-content img {
  display: block;

  max-width: 100%;
  height: auto;

  margin: 28px auto;

  border-radius: 14px;

  box-shadow:
    0 8px 25px
    rgba(60,45,20,.10);
}

/* =========================================================
   BLOG — TABLEAUX
   ========================================================= */

.template-article .article-content table {
  width: 100%;

  margin: 30px 0;

  border-collapse: collapse;

  overflow: hidden;

  background: #fffdf8;

  border:
    1px solid #dfc98f;

  border-radius: 10px;
}

.template-article .article-content th {
  padding: 13px;

  background: #f5ecda;

  color: #493a23;

  font-weight: 700;

  text-align: left;

  border:
    1px solid #dfc98f;
}

.template-article .article-content td {
  padding: 12px;

  border:
    1px solid #e5d9c1;

  color: #51483c;
}

/* =========================================================
   BLOG — HR
   ========================================================= */

.template-article .article-content hr {
  height: 1px;

  margin: 40px 0;

  border: 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      #d2b46a,
      transparent
    );
}

/* =========================================================
   BLOG — PREMIER PARAGRAPHE
   ========================================================= */

.template-article
.article-content
> p:first-of-type {
  font-size: 18px;
  color: #40372b;
}

/* =========================================================
   BLOG — MOBILE
   ========================================================= */

@media screen and (max-width: 749px) {

  .template-article .article-content {
    max-width: 100%;

    padding:
      20px 17px 45px;

    font-size: 16px;
    line-height: 1.75;
  }

  .template-article .article-content h1 {
    margin-bottom: 21px;

    font-size: 30px;

    line-height: 1.18;
  }

  .template-article .article-content h1::after {
    width: 50px;
    height: 3px;

    margin-top: 14px;
  }

  .template-article .article-content h2 {
    margin-top: 34px;
    margin-bottom: 14px;

    padding-left: 11px;

    font-size: 23px;

    line-height: 1.3;
  }

  .template-article .article-content h3 {
    margin-top: 27px;
    font-size: 19px;
  }

  .template-article .article-content p {
    margin-bottom: 17px;

    font-size: 16px;

    line-height: 1.75;
  }

  .template-article
  .article-content
  > p:first-of-type {
    font-size: 16px;
  }

  .template-article .article-content ul,
  .template-article .article-content ol {
    padding-left: 23px;
  }

  .template-article .article-content blockquote {
    margin: 25px 0;

    padding: 17px 18px;

    font-size: 16px;
  }

  .template-article .article-content img {
    margin: 22px auto;
    border-radius: 11px;
  }

  .template-article .article-content table {
    display: block;

    overflow-x: auto;

    white-space: nowrap;

    font-size: 14px;
  }
}


/* =========================================================
   LUMINAIREFRANCE — BLOG PREMIUM
   ========================================================= */

.lf-blog-premium {
  max-width: 1050px;

  margin: 55px auto;

  padding: 0 22px;

  color: #222;

  box-sizing: border-box;
}

.lf-blog-premium *,
.lf-blog-premium *::before,
.lf-blog-premium *::after {
  box-sizing: border-box;
}

/* =========================================================
   BLOG INTRO
   ========================================================= */

.lf-blog-intro {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 18px;

  margin-bottom: 25px;
}

.lf-blog-subtitle {
  max-width: 800px;

  margin: 0;

  text-align: center;

  font-size: 20px;

  line-height: 1.55;

  font-weight: 600;

  letter-spacing: .2px;
}

.lf-blog-gold-line {
  width: 55px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #c9a24a,
      transparent
    );
}

/* =========================================================
   BLOG EMOTION
   ========================================================= */

.lf-blog-emotion {
  max-width: 850px;

  margin: 0 auto 45px;

  padding: 20px 25px;

  text-align: center;

  border-top:
    1px solid
    rgba(201,162,74,.35);

  border-bottom:
    1px solid
    rgba(201,162,74,.35);
}

.lf-blog-emotion p {
  margin: 0;

  font-size: 18px;

  line-height: 1.6;

  font-style: italic;

  font-weight: 500;
}

.lf-blog-emotion-icon {
  display: block;

  margin-bottom: 7px;

  color: #c9a24a;

  font-size: 25px;
}

/* =========================================================
   BLOG EXPERT
   ========================================================= */

.lf-blog-expert {
  margin: 0 auto 50px;

  padding: 28px 32px;

  border:
    1px solid
    rgba(201,162,74,.35);

  border-radius: 16px;

  background:
    linear-gradient(
      135deg,
      #fffdf8,
      #faf7ef
    );

  box-shadow:
    0 10px 30px
    rgba(0,0,0,.05);
}

.lf-blog-expert-title {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 14px;

  color: #9b7726;

  font-size: 16px;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: .8px;
}

.lf-blog-icon {
  color: #c9a24a;
}

.lf-blog-expert-content {
  font-size: 16px;

  line-height: 1.75;
}

/* =========================================================
   BLOG SECTIONS
   ========================================================= */

.lf-blog-section {
  margin: 55px 0;
}

.lf-blog-section-heading {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 25px;
}

.lf-blog-section-heading h2 {
  margin: 0;

  font-size: 25px;

  line-height: 1.25;

  font-weight: 800;
}

.lf-blog-section-icon {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;

  flex: 0 0 32px;

  border:
    1px solid #c9a24a;

  border-radius: 50%;

  color: #b58b2e;

  font-size: 15px;
}

/* =========================================================
   COLLECTIONS
   ========================================================= */

.lf-blog-collections {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 14px;
}

.lf-blog-card {
  display: grid;

  grid-template-columns:
    30px 1fr 25px;

  align-items: center;

  gap: 10px;

  min-height: 64px;

  padding: 15px 18px;

  color: #222;

  text-decoration: none;

  border:
    1px solid
    rgba(201,162,74,.3);

  border-radius: 12px;

  background: #fff;

  transition: all .25s ease;
}

.lf-blog-card:hover {
  transform: translateY(-3px);

  border-color: #c9a24a;

  box-shadow:
    0 8px 22px
    rgba(0,0,0,.08);
}

.lf-blog-card-icon {
  color: #c9a24a;
  font-size: 19px;
}

.lf-blog-card span:nth-child(2) {
  font-weight: 700;
  line-height: 1.35;
}

.lf-blog-arrow {
  color: #c9a24a;

  font-size: 20px;

  font-weight: 700;

  text-align: right;
}

/* =========================================================
   BLOG PRODUCT
   ========================================================= */

.lf-blog-product {
  display: grid;

  grid-template-columns:
    minmax(280px, 42%) 1fr;

  overflow: hidden;

  border:
    1px solid
    rgba(201,162,74,.35);

  border-radius: 18px;

  background: #fff;

  box-shadow:
    0 12px 35px
    rgba(0,0,0,.07);
}

.lf-blog-product-image {
  display: block;
  background: #fafafa;
}

.lf-blog-product-image img {
  display: block;

  width: 100%;
  height: 100%;

  min-height: 300px;

  object-fit: cover;
}

.lf-blog-product-content {
  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: 35px;
}

.lf-blog-product-label {
  margin-bottom: 10px;

  color: #b58b2e;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 1.2px;
}

.lf-blog-product-content h3 {
  margin: 0 0 12px;

  font-size: 24px;

  line-height: 1.3;
}

.lf-blog-product-content p {
  margin: 0 0 25px;

  font-size: 15px;

  line-height: 1.65;
}

.lf-blog-product-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 12px;

  width: fit-content;

  padding: 13px 22px;

  color: #fff;

  background: #171717;

  border-radius: 8px;

  text-decoration: none;

  font-size: 14px;

  font-weight: 800;

  transition: all .25s ease;
}

.lf-blog-product-button:hover {
  background: #c9a24a;
  color: #fff;
}

/* =========================================================
   BLOG GUIDES
   ========================================================= */

.lf-blog-guides {
  display: grid;
  gap: 12px;
}

.lf-blog-guide {
  display: grid;

  grid-template-columns:
    42px 1fr 30px;

  align-items: center;

  gap: 15px;

  padding: 18px 20px;

  color: #222;

  text-decoration: none;

  border:
    1px solid
    rgba(201,162,74,.3);

  border-radius: 12px;

  background: #fff;

  transition: .25s ease;
}

.lf-blog-guide:hover {
  border-color: #c9a24a;

  transform: translateX(4px);
}

.lf-blog-guide-icon {
  color: #c9a24a;

  font-size: 22px;

  text-align: center;
}

.lf-blog-guide-content {
  display: flex;

  flex-direction: column;

  gap: 4px;
}

.lf-blog-guide-content strong {
  font-size: 16px;
  line-height: 1.35;
}

.lf-blog-guide-content small {
  color: #9b7726;

  font-size: 13px;

  font-weight: 600;
}

/* =========================================================
   ARTICLES LIÉS
   ========================================================= */

.lf-blog-related {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0,1fr));

  gap: 14px;
}

.lf-blog-related-card {
  display: flex;

  gap: 13px;

  align-items: flex-start;

  min-height: 120px;

  padding: 18px;

  color: #222;

  text-decoration: none;

  border:
    1px solid
    rgba(201,162,74,.28);

  border-radius: 12px;

  background: #fff;

  transition: .25s ease;
}

.lf-blog-related-card:hover {
  transform: translateY(-3px);

  border-color: #c9a24a;

  box-shadow:
    0 8px 20px
    rgba(0,0,0,.06);
}

.lf-blog-related-icon {
  color: #c9a24a;

  font-size: 13px;

  font-weight: 800;
}

.lf-blog-related-card
span:last-child {
  display: flex;

  flex-direction: column;

  gap: 10px;
}

.lf-blog-related-card strong {
  font-size: 14px;
  line-height: 1.4;
}

.lf-blog-related-card small {
  color: #9b7726;
  font-weight: 700;
}

/* =========================================================
   BLOG CTA
   ========================================================= */

.lf-blog-cta {
  position: relative;

  display: flex;

  align-items: center;
  justify-content: center;

  margin: 60px 0;

  padding: 38px 30px;

  overflow: hidden;

  border-radius: 18px;

  background:
    linear-gradient(
      135deg,
      #181818,
      #292929
    );

  text-align: center;
}

.lf-blog-cta-decoration {
  position: absolute;

  right: 30px;
  top: 20px;

  color:
    rgba(201,162,74,.25);

  font-size: 70px;
}

.lf-blog-cta-content {
  position: relative;
  z-index: 1;
}

.lf-blog-cta-label {
  display: block;

  margin-bottom: 15px;

  color: #c9a24a;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 2px;
}

.lf-blog-cta-button {
  display: inline-flex;

  align-items: center;

  gap: 12px;

  padding: 14px 26px;

  color: #fff;

  border:
    1px solid #c9a24a;

  border-radius: 8px;

  text-decoration: none;

  font-size: 15px;

  font-weight: 800;

  transition: .25s ease;
}

.lf-blog-cta-button:hover {
  color: #171717;

  background: #c9a24a;
}

/* =========================================================
   FAQ
   ========================================================= */

.lf-blog-faq {
  margin: 60px 0 20px;
}

.lf-blog-faq-list {
  display: grid;
  gap: 10px;
}

.lf-blog-faq details {
  overflow: hidden;

  border:
    1px solid
    rgba(201,162,74,.3);

  border-radius: 10px;

  background: #fff;
}

.lf-blog-faq summary {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 19px 20px;

  cursor: pointer;

  list-style: none;

  font-size: 16px;

  font-weight: 700;
}

.lf-blog-faq summary::-webkit-details-marker {
  display: none;
}

.lf-blog-faq summary b {
  color: #c9a24a;

  font-size: 22px;

  transition:
    transform .2s ease;
}

.lf-blog-faq details[open]
summary b {
  transform: rotate(45deg);
}

.lf-blog-faq-answer {
  padding: 0 20px 20px;

  color: #555;

  font-size: 15px;

  line-height: 1.7;
}

/* =========================================================
   BLOG PREMIUM — MOBILE
   ========================================================= */

@media screen and (max-width: 749px) {

  .lf-blog-premium {
    margin: 35px auto;
    padding: 0 14px;
  }

  .lf-blog-intro {
    gap: 9px;
  }

  .lf-blog-gold-line {
    width: 25px;
  }

  .lf-blog-subtitle {
    font-size: 17px;
  }

  .lf-blog-emotion {
    margin-bottom: 32px;

    padding: 17px 12px;
  }

  .lf-blog-emotion p {
    font-size: 16px;
  }

  .lf-blog-expert {
    margin-bottom: 35px;

    padding: 21px 18px;

    border-radius: 13px;
  }

  .lf-blog-expert-content {
    font-size: 15px;
    line-height: 1.65;
  }

  .lf-blog-section {
    margin: 40px 0;
  }

  .lf-blog-section-heading {
    gap: 9px;
    margin-bottom: 18px;
  }

  .lf-blog-section-heading h2 {
    font-size: 21px;
  }

  .lf-blog-section-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }

  .lf-blog-collections {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .lf-blog-card {
    min-height: 58px;
    padding: 13px 14px;
  }

  .lf-blog-product {
    grid-template-columns: 1fr;
  }

  .lf-blog-product-image img {
    min-height: 240px;
    max-height: 320px;
  }

  .lf-blog-product-content {
    padding: 23px 19px;
  }

  .lf-blog-product-content h3 {
    font-size: 21px;
  }

  .lf-blog-product-button {
    width: 100%;
  }

  .lf-blog-related {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .lf-blog-related-card {
    min-height: auto;
  }

  .lf-blog-guide {
    grid-template-columns:
      35px 1fr 25px;

    gap: 10px;

    padding: 15px;
  }

  .lf-blog-guide-content strong {
    font-size: 14px;
  }

  .lf-blog-cta {
    margin: 40px 0;
    padding: 30px 18px;
  }

  .lf-blog-cta-button {
    width: 100%;

    justify-content: center;

    font-size: 14px;
  }

  .lf-blog-faq {
    margin-top: 40px;
  }

  .lf-blog-faq summary {
    padding: 16px;
    font-size: 14px;
  }

  .lf-blog-faq-answer {
    padding: 0 16px 17px;

    font-size: 14px;
  }
}

/* =========================================================
   ACCESSIBILITÉ
   ========================================================= */

.lf-blog-premium a:focus-visible,
.lf-blog-premium summary:focus-visible {
  outline:
    2px solid #c9a24a;

  outline-offset: 3px;
}


/* =========================================================
   PAGE TEMPLATE
   ========================================================= */

.template-page .page-width,
.template-page .container,
.template-page [class*="page-width"] {
  max-width: 100% !important;

  padding-left: 0 !important;
  padding-right: 0 !important;
}

.lf-product-add{
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 999 !important;
  border-radius: 0 !important;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.15) !important;
}
/* Masquer le logo lorsque le header est sticky */
#header-component[data-sticky-state='active'] .header__heading-logo,
#header-component[data-sticky-state='active'] .header__heading img {
  display: none;
}

  
@media screen and (max-width: 749px) {
  .lf-product-premium {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  
  .lf-product-premium__content {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}