/* ===============================================================
   LMCF theme styles — global
   =============================================================== */

:root,
[data-theme="light"] {
  --color-primary: #0E1B2C;
  --color-primary-700: #142540;
  --color-primary-600: #1B3155;
  --color-primary-100: #E6E9EE;

  /* Adaptive foreground: same as primary in light mode, flips light in dark.
     Use for text/emphasis on the page background; keep --color-primary for
     brand SURFACES (footer, dark cards/buttons) and text on colored chips. */
  --color-ink: #0E1B2C;

  --color-accent: #CCA20E;
  --color-accent-600: #CCA20E;
  --color-accent-100: #F4ECD7;

  --color-bg: #FFFFFF;
  --color-bg-alt: #F5F3EE;
  --color-bg-deep: #0A1422;
  /* Elevated section surface + sticky-header background (were hardcoded). */
  --color-surface: #FBFAF7;
  /* RGB channels of the section surface, for rgba() fades (e.g. quote photo). */
  --color-surface-rgb: 251, 250, 247;
  --color-header-bg: rgba(245, 243, 238, 0.94);
  --color-nav-link: #141B64;

  --color-text: #1A1F2A;
  --color-text-muted: #6B7280;
  --color-text-inverse: #F5F3EE;

  --color-success: #2F7D5B;
  --color-border: #E2E0DA;
  --color-border-strong: #C9C5BA;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.75rem;
  --fs-4xl: 3.5rem;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.55;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(14, 27, 44, 0.06);
  --shadow-md: 0 8px 24px rgba(14, 27, 44, 0.08);
  --shadow-lg: 0 24px 60px rgba(14, 27, 44, 0.16);
  --shadow-accent: 0 10px 30px rgba(200, 164, 93, 0.25);

  /* Fill out large screens instead of staying narrowly centered.
     - up to ~1320px viewport : behaves like before (floor 1240px, so the
       container's width:100% wins → full width minus padding, incl. mobile)
     - ~1320px → ~1872px       : tracks 94vw (fluid, grows with the screen)
     - beyond ~1872px          : caps at 1760px and centers */
  --container-max: min(max(1240px, 94vw), 1760px);
  --header-h: 96px;

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;
}

/* ---------------------------------------------------------------
   Dark theme — toggled by data-theme="dark" on ANY element.
   Admin-selectable PER AREA in the back office (lmcftheme module):
   the navbar, each home section and the footer carry their own
   data-theme, so a page can mix light and dark scopes. Because CSS
   custom properties inherit, setting the tokens on a wrapper re-themes
   its whole subtree (the light block above re-asserts them so a light
   area inside a dark page resets cleanly).
   Strategy: --color-ink is the adaptive foreground (flips light),
   while --color-primary stays a dark brand SURFACE (footer, dark
   cards/buttons) and --color-accent (gold) is kept as-is.
--------------------------------------------------------------- */
[data-theme="dark"] {
  /* Surfaces */
  --color-bg: #0B1524;
  --color-bg-alt: #0F1C30;
  --color-surface: #12203A;
  --color-surface-rgb: 18, 32, 58;
  --color-bg-deep: #060D18;
  --color-header-bg: rgba(9, 17, 30, 0.86);

  /* Brand navy kept as an elevated dark surface, lifted for separation */
  --color-primary: #16294A;
  --color-primary-700: #1D3459;
  --color-primary-600: #244067;
  --color-primary-100: #1B2A44;

  /* Adaptive foreground + text flip light */
  --color-ink: #F2F0E9;
  --color-nav-link: rgba(242, 240, 233, 0.82);
  --color-text: #E6E9EF;
  --color-text-muted: #9BA6B8;

  /* Borders + state */
  --color-border: #23324C;
  --color-border-strong: #35486A;
  --color-success: #46B37F;

  /* Deeper shadows read better on a dark page */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.65);
}

/* Chips on gold/white backgrounds don't flip with the scope — keep dark text. */
[data-theme="dark"] .lmcf-btn--primary,
[data-theme="dark"] .lmcf-btn--primary:hover,
[data-theme="dark"] .lmcf-btn--light,
[data-theme="dark"] .lmcf-btn--light:hover,
[data-theme="dark"] .lmcf-check,
[data-theme="dark"] .product-flag.discount,
[data-theme="dark"] .product-flag.on-sale {
  color: #0E1B2C;
}
/* ...except the checks that are TRANSPARENT with a coloured glyph+ring (no gold
   fill): keep their own colour so the tick stays visible on a dark scope.
   The hero carries data-theme on itself, so element-scope it (`.hero[...]`) to
   beat the broad rule above; reassurance sits inside its section, so the
   descendant form matches its dark ancestor. */
.hero[data-theme="dark"] .lmcf-check {
  color: var(--color-accent);
}
[data-theme="dark"] .reassurance .lmcf-check {
  color: var(--color-success);
}

/* The site logo (transparent PNG) is dark-inked — invert it to white when the
   HEADER itself is dark. Element-scoped so a dark FOOTER (whose logo is already
   inverted in both schemes) is not double-inverted. */
.site-header[data-theme="dark"] .brand__logo {
  filter: brightness(0) invert(1);
}

/* Partner logos are greyscaled dark marks; in a dark partners scope make them white. */
[data-theme="dark"] .partners__logo,
[data-theme="dark"] .partners__logo:hover,
[data-theme="dark"] .partners__logo:focus-visible {
  filter: brightness(0) invert(1);
}
[data-theme="dark"] .partners__logo:hover,
[data-theme="dark"] .partners__logo:focus-visible {
  opacity: 1;
}

/* ---------------------------------------------------------------
   Global base — applies on top of Hummingbird theme.css
--------------------------------------------------------------- */
body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Neutralize Hummingbird chrome — we provide our own header/footer */
#header.header {
  position: static;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
#footer.footer {
  background: transparent;
  padding: 0;
  margin: 0;
}

/* HOME PAGE + full-bleed landings (Entreprises): override Bootstrap container constraints */
body#index #wrapper.wrapper,
body#index .center-column.page,
body#index .columns-container.container,
body#index #content.page-content,
body#index .page-content--home,
body#module-lmcfentreprises-page #wrapper.wrapper,
body#module-lmcfentreprises-page .center-column.page,
body#module-lmcfentreprises-page .columns-container.container,
body#module-lmcfentreprises-page .container,
body#module-lmcfentreprises-page #content.page-content,
body#module-lmcfpro-page #wrapper.wrapper,
body#module-lmcfpro-page .center-column.page,
body#module-lmcfpro-page .columns-container.container,
body#module-lmcfpro-page .container,
body#module-lmcfpro-page #content.page-content,
body#module-lmcfparticuliers-page #wrapper.wrapper,
body#module-lmcfparticuliers-page .center-column.page,
body#module-lmcfparticuliers-page .columns-container.container,
body#module-lmcfparticuliers-page .container,
body#module-lmcfparticuliers-page #content.page-content {
  padding: 0;
  margin: 0;
  max-width: none;
  width: 100%;
}

/* OTHER PAGES: constrain content + give breathing room (not the full-bleed landings).
   Aucun padding EN HAUT : le contenu démarre au ras de la barre de navigation sur
   toutes les pages, pour qu'un bandeau pleine largeur (hero, pages légales,
   rétractation) ne flotte jamais sur une bande blanche. Seul le bas respire. */
body:not(#index):not([id^="module-lmcf"]) #wrapper.wrapper {
  padding-block: 0 var(--space-12);
}
body:not(#index):not([id^="module-lmcf"]) .columns-container.container {
  max-width: var(--container-max);
  padding-inline: var(--space-6);
}

/* ---------------------------------------------------------------
   Layout helpers
--------------------------------------------------------------- */
.lmcf-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
  box-sizing: border-box;
}

/* Taille et couleur réglables en back-office (module lmcftheme, qui pose
   --lmcf-eyebrow-* dans le <head> quand elles s'écartent du défaut). Les replis
   ci-dessous sont les valeurs d'origine : sans réglage, rien ne change. */
.lmcf-eyebrow {
  font-size: var(--lmcf-eyebrow-size, var(--fs-xs));
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--lmcf-eyebrow-color, var(--color-accent-600));
}

/* ---------------------------------------------------------------
   Buttons (.lmcf-btn — independent from Bootstrap .btn)
--------------------------------------------------------------- */
.lmcf-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  padding: 0.875rem 1.375rem;
  border-radius: var(--radius-md);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
  white-space: nowrap;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}
.lmcf-btn:hover { transform: translateY(-1px); }
.lmcf-btn:active { transform: translateY(0); }

.lmcf-btn--primary {
  background: var(--color-accent);
  color: var(--color-ink);
  box-shadow: var(--shadow-accent);
}
.lmcf-btn--primary:hover {
  background: var(--color-accent-600);
  color: var(--color-ink);
  box-shadow: 0 14px 36px rgba(200, 164, 93, 0.35);
}
.lmcf-btn--dark {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.lmcf-btn--dark:hover { background: var(--color-primary-700); color: var(--color-text-inverse); }

.lmcf-btn--light {
  background: #FFFFFF;
  color: var(--color-ink);
}
.lmcf-btn--light:hover { background: #F1EFE9; color: var(--color-ink); }

.lmcf-btn--outline {
  background: transparent;
  color: var(--color-ink);
  box-shadow: inset 0 0 0 1.5px var(--color-border-strong);
}
.lmcf-btn--outline:hover {
  box-shadow: inset 0 0 0 1.5px var(--color-primary);
  color: var(--color-ink);
}

.lmcf-btn--lg { padding: 1rem 1.75rem; font-size: var(--fs-md); }
.lmcf-btn--block { width: 100%; justify-content: center; }

.lmcf-btn .arrow { transition: transform var(--dur-base) var(--ease-out); }
.lmcf-btn:hover .arrow { transform: translateX(3px); }

/* ---------------------------------------------------------------
   Check pictogram
--------------------------------------------------------------- */
.lmcf-check {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-ink);
  display: grid; place-items: center;
}

/* ---------------------------------------------------------------
   Site header
--------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-header-bg);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-ink);
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}
.brand:focus,
.brand:focus-visible {
  outline: 0;
  box-shadow: none;
}
.brand__logo {
  display: block;
  max-height: 65px;
  width: auto;
  height: auto;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}
.site-footer .brand__logo {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.lmcf-nav { justify-self: center; }
.lmcf-nav__list { display: flex; gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.lmcf-nav__link {
  position: relative;
  display: inline-block;
  font-size: 0.9375rem;
  font-weight: var(--fw-medium);
  color: var(--color-nav-link);
  padding: var(--space-2) 0;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.lmcf-nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.lmcf-nav__link:hover { color: var(--color-ink); }
.lmcf-nav__link:hover::after { transform: scaleX(1); }

.header-cta {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
/* Header buttons are the theme's own, just compact enough for two of them to
   sit in the bar. Which variant each one wears is decided in the template:
   the account link stays outlined, the cart turns gold once it is not empty. */
.header-cta .lmcf-btn {
  font-size: 0.85rem;
  padding: 0.55rem 0.95rem;
  gap: 0.4rem;
}
.header-action { position: relative; }
.header-action svg { flex: none; }

/* Item count sits on a gold button, so it inverts to stay readable */
.header-action__count {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* On desktop the wrapper dissolves so nav + CTA keep their grid columns */
.header-collapse { display: contents; }

.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  color: var(--color-ink);
  background: transparent;
  border: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------------------------------------
   Hero
--------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: var(--space-20) var(--space-24);
  display: flex;
  align-items: center;
  background-color: #0D0D0C;
  color: var(--color-text-inverse);
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 0 48.33%;
  background: var(--lmcf-hero-image, url("../img-dist/lmcf-bg.png")) center 60% / cover no-repeat;
  z-index: -2;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      #0D0D0C 0%,
      #0D0D0C 49%,
      rgba(13, 13, 12, 0.6) 55%,
      rgba(13, 13, 12, 0) 60%);
  z-index: -1;
  pointer-events: none;
}
.hero__inner { position: relative; width: 100%; }
.hero__content { max-width: 620px; }
.hero__title {
  font-size: clamp(2.25rem, 3.9vw, 3.5rem);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: -0.02em;
  color: var(--color-text-inverse);
  margin: var(--space-4) 0 var(--space-5);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.hero__title em,
.about__title em,
.services__title em,
.product-band__title em,
.timeline__title em,
.reviews__title em,
.quote-section__title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--color-accent-600), var(--color-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__subtitle {
  font-size: var(--fs-lg);
  color: rgba(245, 243, 238, 0.82);
  margin: 0 0 var(--space-8);
  max-width: 550px;
}
.hero__benefits { display: grid; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.hero__benefits li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: var(--fw-medium);
  color: var(--color-text-inverse);
}
.hero .lmcf-check {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}
.hero__actions {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  max-width: none;
  gap: var(--space-3);
  margin-top: var(--space-10);
}
.hero .lmcf-btn--outline {
  color: var(--color-text-inverse);
  box-shadow: inset 0 0 0 1.5px rgba(245, 243, 238, 0.35);
  backdrop-filter: blur(4px);
}
.hero__actions .lmcf-btn {
  font-size: 0.9rem;
  padding: 0.7rem 1.25rem;
}
.hero .lmcf-btn--dark {
  box-shadow: inset 0 0 0 1.5px rgba(245, 243, 238, 0.18);
}
.hero .lmcf-btn--dark:hover {
  box-shadow: inset 0 0 0 1.5px rgba(245, 243, 238, 0.35);
}
.hero .lmcf-btn--outline:hover {
  box-shadow: inset 0 0 0 1.5px var(--color-text-inverse);
  background: rgba(245, 243, 238, 0.06);
  color: var(--color-text-inverse);
}

/* ---------------------------------------------------------------
   Bande « À propos » (accueil)

   L'accroche qui a remplacé la frise sur l'accueil : une photo pleine
   largeur, le texte posé sur la moitié droite, un bouton vers la page
   Notre histoire. Même famille que le hero — photo de fond + voile —
   mais miroir : le hero garde sa photo à droite et son texte à gauche,
   celle-ci fait l'inverse pour ne pas répéter la même composition deux
   fois sur la même page.

   Toujours sombre, quel que soit le schéma choisi ailleurs : le texte
   se pose sur une photographie, un fond clair le rendrait illisible.
--------------------------------------------------------------- */
.about {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3rem, 6vw, var(--space-20));
  background-color: #0D0D0C;
  color: var(--color-text-inverse);
}
.about::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--lmcf-about-image, url("../img-dist/lmcf-bg.png")) center / cover no-repeat;
}
/* Deux voiles : l'un fond vers la droite pour asseoir le texte, l'autre
   assombrit le haut — sur une photo d'extérieur le ciel est presque blanc
   et le titre y disparaît. */
.about::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(13, 13, 12, 0) 16%,
      rgba(13, 13, 12, 0.45) 40%,
      rgba(13, 13, 12, 0.8) 60%),
    linear-gradient(180deg,
      rgba(13, 13, 12, 0.35) 0%,
      rgba(13, 13, 12, 0) 40%);
}
.about__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(0, 46%);
  align-items: center;
  min-height: clamp(24rem, 42vw, 38rem);
}
.about__content {
  grid-column: 2;
  max-width: 34rem;
}
.about__title {
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  font-weight: var(--fw-bold);
  color: var(--color-text-inverse);
  margin: var(--space-3) 0 var(--space-5);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.about__text {
  display: grid;
  gap: var(--space-4);
}
.about__text p {
  margin: 0;
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: rgba(245, 243, 238, 0.85);
}
/* La ligne dorée du modèle : pas de filet, l'or et la graisse suffisent à la
   détacher du paragraphe. */
.about__highlight {
  margin: var(--space-6) 0 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-accent);
}
.about__actions {
  margin-top: var(--space-8);
}

@media (max-width: 991px) {
  /* Une seule colonne : le voile latéral n'a plus de sens, on assombrit
     toute la photo pour garder le texte lisible par-dessus. */
  .about::after {
    background: linear-gradient(180deg,
      rgba(13, 13, 12, 0.55) 0%,
      rgba(13, 13, 12, 0.86) 100%);
  }
  .about__inner {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .about__content {
    grid-column: 1;
    max-width: 40rem;
  }
}

/* ---------------------------------------------------------------
   Quote section
--------------------------------------------------------------- */
.quote-section {
  position: relative;
  padding: clamp(2.5rem, 5vw, var(--space-24)) 0;
  background-color: var(--color-surface);
  overflow: hidden;
}
.quote-section__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-16);
  align-items: center;
  padding-block: var(--space-10);
}
/* Photo spans the whole section, screen edge to screen edge — it sits outside
   the container in the markup for exactly that reason. */
.quote-section__bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.quote-section__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Wide, soft fade over the left part of the image — the section surface
     stays solid on the text side, then dissolves gradually into the photo.
     Uses the surface colour so it follows light/dark automatically. The stops
     are viewport-relative now that the photo starts at the left edge. */
  background: linear-gradient(90deg,
    rgba(var(--color-surface-rgb), 1) 26%,
    rgba(var(--color-surface-rgb), 0) 42%);
}
.quote-section__intro { position: relative; z-index: 1; }
.quote-section__title {
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: var(--space-3) 0 var(--space-4);
  font-weight: var(--fw-bold);
}
.quote-section__lead {
  font-size: var(--fs-sm);
  color: var(--color-text);
  margin: 0 0 var(--space-8);
  max-width: 280px;
}
/* Restreint au <ul> : `reassurance` est aussi le nom de classe du module
   blockreassurance (page produit, panier). Sans le sélecteur d'élément, cette
   règle transformait chacun de ses blocs en grille avec marge haute et
   dispersait la colonne de droite de la fiche produit. */
ul.reassurance {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.reassurance li { display: flex; align-items: center; gap: var(--space-2); }
.reassurance .lmcf-check {
  width: 18px; height: 18px;
  background: transparent;
  color: var(--color-success);
}
.reassurance--lg { gap: var(--space-3); margin-top: 0; font-size: var(--fs-sm); color: var(--color-text); }
.reassurance--lg .lmcf-check {
  width: 22px; height: 22px;
  background: var(--color-accent);
  color: var(--color-ink);
}
.quote-card {
  width: 100%;
  max-width: 380px;
  justify-self: end;
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-10) var(--space-8);
  border: 1px solid var(--color-border);
}
.quote-card form { margin: var(--space-8) 0; }
.quote-card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  margin: 0 0 var(--space-1);
  letter-spacing: -0.01em;
}
.quote-card__intro {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
}
.lmcf-field { position: relative; margin-bottom: var(--space-3); }
.lmcf-field input {
  width: 100%;
  padding: 0.875rem 1rem 0.875rem 2.75rem;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--color-text);
  background: var(--color-bg-alt);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.lmcf-field input::placeholder { color: var(--color-text-muted); }
.lmcf-field input:focus {
  outline: none;
  background: var(--color-bg);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(200, 164, 93, 0.18);
}
.lmcf-field__icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}

/* "ou" divider + phone CTA inside the quote card */
.quote-card__divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.quote-card__divider::before,
.quote-card__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}
.quote-card__phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  text-decoration: none;
}
.quote-card__phone-icon {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-accent-100);
  color: var(--color-accent-600);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.quote-card__phone-text { display: flex; flex-direction: column; line-height: 1.25; }
.quote-card__phone-label { font-size: var(--fs-xs); color: var(--color-text-muted); }
.quote-card__phone-number {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}
.quote-card__phone:hover .quote-card__phone-icon {
  background: var(--color-accent);
  color: var(--color-ink);
}

/* ---------------------------------------------------------------
   Partners band
--------------------------------------------------------------- */
.partners {
  padding: var(--space-10) 0;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}
/* Kill the inter-section gap from Hummingbird's .page-content--home grid */
body#index .page-content--home { gap: 0; }
.partners__intro {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  margin: 0;
}
/* Carousel: --partners-visible logos shown at once, arrows scroll the rest */
.partners__carousel {
  --partners-visible: 6;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.partners__viewport {
  flex: 1 1 auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge */
}
.partners__viewport::-webkit-scrollbar { display: none; }
.partners__track {
  display: flex;
  margin: 0;
  align-items: center;
}
.partners__nav {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  opacity: 0.7;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
}
.partners__nav:hover { background: var(--color-bg-alt); color: var(--color-ink); opacity: 1; }
.partners__nav:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
.partners__nav[hidden] { display: none; }
.partners__logo {
  flex: 0 0 calc(100% / var(--partners-visible, 6));
  scroll-snap-align: start;
  display: grid;
  place-items: center;
  height: 56px;
  padding: 0 var(--space-4);
  color: var(--color-text-muted);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.65;
  filter: grayscale(1);
  transition: opacity var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              filter var(--dur-base) var(--ease-out);
}
.partners__logo:hover,
.partners__logo:focus-visible { opacity: 1; filter: grayscale(0); color: var(--color-ink); }
.partners__img {
  /* Uniform optical height for every logo, regardless of source ratio.
     Adjust --partners-logo-h to scale all logos at once. */
  height: var(--partners-logo-h, 38px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* ---------------------------------------------------------------
   Services
--------------------------------------------------------------- */
.services {
  padding: var(--space-24) 0;
  background: var(--color-bg);
}
.services__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-16);
}
.services__title {
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: var(--space-3) 0 var(--space-4);
  font-weight: var(--fw-bold);
}
.services__lead { color: var(--color-text-muted); font-size: var(--fs-md); margin: 0; }

.lmcf-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.lmcf-card {
  background: var(--color-bg);
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.lmcf-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.lmcf-card__icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  display: grid; place-items: center;
  margin-bottom: var(--space-6);
}
.lmcf-card__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
  letter-spacing: -0.01em;
}
.lmcf-card__list {
  display: grid;
  gap: var(--space-3);
  color: var(--color-text);
  margin: 0 0 var(--space-8);
  padding: 0;
  list-style: none;
}
.lmcf-card__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-sm);
}
.lmcf-card__list .lmcf-check { width: 22px; height: 22px; margin-top: 1px; }
.lmcf-card .lmcf-btn { margin-top: auto; align-self: flex-start; }

/* Service card CTA: gold button, blue label (overrides outline + bg variant) */
.services .lmcf-card .lmcf-btn {
  background: var(--color-accent);
  color: var(--color-ink);
  box-shadow: none;
}
.services .lmcf-card .lmcf-btn:hover {
  background: var(--color-accent-600);
  color: var(--color-ink);
  box-shadow: none;
}

/* Card with a back-office background image */
.lmcf-card--bg {
  position: relative;
  overflow: hidden;
  border-color: transparent;
  background-color: var(--color-primary);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-text-inverse);
}
.lmcf-card--bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.3) 0%, rgba(15, 23, 42, 0.75) 100%);
}
.lmcf-card--bg > * { position: relative; z-index: 1; }
.lmcf-card--bg .lmcf-card__title,
.lmcf-card--bg .lmcf-card__list { color: var(--color-text-inverse); }
.lmcf-card--bg .lmcf-card__icon {
  background: var(--color-primary);
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.lmcf-card--bg .lmcf-btn--outline {
  border-color: rgba(245, 243, 238, 0.7);
  color: var(--color-text-inverse);
}
.lmcf-card--bg .lmcf-btn--outline:hover {
  background: var(--color-text-inverse);
  color: var(--color-ink);
}

/* ---------------------------------------------------------------
   Site footer
--------------------------------------------------------------- */
.site-footer {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--space-16) 0 var(--space-8);
}
.site-footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--space-16);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid rgba(245, 243, 238, 0.12);
}
.site-footer h4 {
  font-size: var(--fs-md);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  margin: 0 0 var(--space-6);
  font-weight: var(--fw-bold);
}
.site-footer ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.site-footer a {
  color: rgba(245, 243, 238, 0.75);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-footer a:hover { color: var(--color-text-inverse); }
.site-footer p { color: rgba(245, 243, 238, 0.65); font-size: var(--fs-sm); margin: var(--space-4) 0 0; max-width: 32ch; }
.site-footer .brand { color: var(--color-text-inverse); }
.site-footer .brand__name { color: var(--color-text-inverse); }
.site-footer .brand__tag { color: rgba(245, 243, 238, 0.55); }

/* Coordinates list: icon + text rows */
.footer-coords { display: grid; gap: var(--space-5); }
.footer-coords li {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: rgba(245, 243, 238, 0.85);
  font-size: var(--fs-base);
}
.footer-coords__icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: rgba(245, 243, 238, 0.55);
}
.footer-coords a { font-size: inherit; color: rgba(245, 243, 238, 0.85); }
.footer-coords a:hover { color: var(--color-text-inverse); }

/* Social circles */
.footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-6); }
.footer-social__link {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(245, 243, 238, 0.3);
  color: rgba(245, 243, 238, 0.85);
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.footer-social__link:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-ink);
}

.site-footer__bottom {
  padding-top: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: rgba(245, 243, 238, 0.6);
  gap: var(--space-6);
  flex-wrap: wrap;
}
.site-footer__legal { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.site-footer__legal a { color: rgba(245, 243, 238, 0.75); }
.site-footer__legal a:hover { color: var(--color-text-inverse); }

/* ---------------------------------------------------------------
   Scroll-in animations
--------------------------------------------------------------- */
.lmcf-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.lmcf-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .lmcf-reveal, .lmcf-reveal.is-visible { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------------
   Responsive
--------------------------------------------------------------- */
@media (max-width: 1080px) {
  .partners__carousel { --partners-visible: 4; }
  .quote-section__inner { gap: var(--space-12); }
}

@media (max-width: 860px) {
  .partners__carousel { --partners-visible: 3; }
  .site-header { position: relative; }
  .header-collapse { display: none; }
  .menu-toggle { display: inline-flex; }
  .site-header__inner { grid-template-columns: 1fr auto; }

  /* Mobile dropdown menu (opened via the hamburger) */
  .site-header.is-menu-open .header-collapse {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    padding: var(--space-4) var(--space-6) var(--space-6);
    z-index: 60;
  }
  .site-header.is-menu-open .lmcf-nav { justify-self: stretch; }
  .site-header.is-menu-open .lmcf-nav__list { flex-direction: column; gap: 0; }
  .site-header.is-menu-open .lmcf-nav__link {
    display: block;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 1rem;
  }
  .site-header.is-menu-open .lmcf-nav__link::after { display: none; }
  .site-header.is-menu-open .header-cta { justify-self: stretch; }
  .site-header.is-menu-open .header-cta .lmcf-btn { width: 100%; justify-content: center; }
  /* Open menu: the two entries share the row instead of hugging the right edge */
  .site-header.is-menu-open .header-cta { padding-top: var(--space-3); }
  .site-header.is-menu-open .header-action { flex: 1; justify-content: center; }
  .menu-toggle[aria-expanded="true"] { color: var(--color-accent); }

  .hero { padding-top: var(--space-12); padding-bottom: var(--space-20); }
  /* Stack on mobile: photo as full background with dark overlay */
  .hero::before { inset: 0; }
  .hero::after {
    background:
      linear-gradient(90deg,
        rgba(13, 13, 12, 0.92) 0%,
        rgba(13, 13, 12, 0.78) 45%,
        rgba(13, 13, 12, 0.55) 100%);
  }
  .hero__content { max-width: none; }
  .hero__actions { flex-wrap: wrap; width: auto; }

  .quote-section { padding: var(--space-16) 0; }
  .quote-section__inner { grid-template-columns: 1fr; gap: var(--space-10); }
  .quote-card { justify-self: stretch; max-width: none; padding: var(--space-6); }
  .quote-section__title { font-size: var(--fs-2xl); }
  /* Stacked content needs a uniform wash rather than a left-to-right fade */
  .quote-section__bg::after {
    background: linear-gradient(180deg, rgba(var(--color-surface-rgb), 0.92) 0%, rgba(var(--color-surface-rgb), 0.78) 100%);
  }

  .lmcf-cards { grid-template-columns: repeat(2, 1fr); }
  .services { padding: var(--space-16) 0; }
  .services__title { font-size: var(--fs-2xl); }

  .site-footer__top { grid-template-columns: 1fr 1fr; gap: var(--space-10); }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .partners__carousel { --partners-visible: 2; }
  .lmcf-cards { grid-template-columns: 1fr; }
  .site-footer__top { grid-template-columns: 1fr; }
  .site-footer__brand { grid-column: auto; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .lmcf-btn { justify-content: center; }
}

/* ===============================================================
   CATALOG — category, listing, product miniatures
   =============================================================== */

/* Category header */
.category__header {
  margin-bottom: var(--space-10);
}
.page-title-section {
  font-size: clamp(1.875rem, 3.4vw, 2.75rem);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
  font-weight: var(--fw-bold);
}
.category__description {
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
  max-width: 720px;
  margin: 0 0 var(--space-6);
}
.category__cover {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-8);
}
.category__cover-image {
  display: block;
  width: 100%;
  height: auto;
}

/* Subcategories grid */
.subcategory {
  margin: var(--space-6) 0 var(--space-10);
}
.subcategory__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4);
}
.subcategory__list--with-images {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.subcategory__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-ink);
  font-weight: var(--fw-semibold);
  text-align: center;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.subcategory__link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-accent);
  color: var(--color-ink);
}
.subcategory__thumbnail {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
}
.subcategory__name {
  font-size: var(--fs-sm);
}

/* Products grid */
.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Product miniature card */
.product-miniature {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.product-miniature:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}
.product-miniature__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.product-miniature__top {
  position: relative;
  background: var(--color-bg-alt);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.product-miniature__top img,
.product-miniature__top picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.product-miniature:hover .product-miniature__top img {
  transform: scale(1.04);
}
.product-miniature__bottom {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}
.product-miniature__infos { display: flex; flex-direction: column; gap: var(--space-2); }
.product-miniature__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  line-height: var(--lh-snug);
  text-decoration: none;
  letter-spacing: -0.005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-miniature__title:hover { color: var(--color-accent-600); }

.product-miniature__prices {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.product-miniature__price {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}
.product-miniature__discount-price { display: inline-flex; }
.product-miniature__regular-price {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  text-decoration: line-through;
}
.product-miniature__actions {
  margin-top: auto;
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}
.product-miniature__form {
  display: flex;
  gap: var(--space-2);
  width: 100%;
  align-items: stretch;
}

/* Buttons inside catalog — override Bootstrap btn */
.product-miniature .btn,
#products .btn,
.products__pagination .btn {
  font-family: var(--font-sans);
  border-radius: var(--radius-pill);
  font-weight: var(--fw-semibold);
  padding: 0.625rem 1rem;
  font-size: var(--fs-sm);
  border: 0;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.product-miniature .btn-primary,
.product-miniature__add {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.product-miniature .btn-primary:hover,
.product-miniature__add:hover {
  background: var(--color-primary-700);
  color: var(--color-text-inverse);
  transform: translateY(-1px);
}
.product-miniature .btn-outline-primary,
.product-miniature__details {
  background: transparent;
  color: var(--color-ink);
  box-shadow: inset 0 0 0 1.5px var(--color-border-strong);
  width: 100%;
  text-align: center;
}
.product-miniature .btn-outline-primary:hover,
.product-miniature__details:hover {
  box-shadow: inset 0 0 0 1.5px var(--color-primary);
  background: transparent;
}

.product-miniature__add.btn-square-icon {
  padding: 0.625rem 0.875rem;
}
.product-miniature__add-text { display: none; }

/* Quantity input next to add button */
.product-miniature .quantity-button,
.product-miniature .js-quantity-button {
  display: flex;
}

/* Product flags (sale, new, etc) */
.product-flags {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.product-flag {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.product-flag.discount, .product-flag.on-sale { background: var(--color-accent); color: var(--color-ink); }
.product-flag.new { background: var(--color-success); }

/* Pagination */
.products__pagination {
  margin-top: var(--space-10);
  display: flex;
  justify-content: center;
}
.pagination .page-list {
  display: flex;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}
.pagination .page-list a,
.pagination .page-list span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.pagination .page-list a:hover {
  border-color: var(--color-accent);
  color: var(--color-ink);
}
.pagination .page-list .current a,
.pagination .page-list .active a,
.pagination .page-list .current span {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}

/* Sidebar (facets / filters) */
#left-column {
  padding-right: var(--space-6);
}
#left-column .block,
#left-column .block-categories,
#left-column .ps-facet,
#left-column #search_filters {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
#left-column h2,
#left-column .block__title,
#left-column .h6 {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
  font-weight: var(--fw-semibold);
}

/* Products top toolbar (sort, count, etc) */
#products .products-top,
.products-selection,
.products-sort-order {
  margin-bottom: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.total-products,
.showing,
.products-selection__count {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* Center column padding inside catalog layouts */
body:not(#index) #content.page-content {
  padding: 0;
}

/* Responsive */
@media (max-width: 991px) {
  #left-column { padding-right: 0; margin-bottom: var(--space-6); }
}
@media (max-width: 720px) {
  .products { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .product-miniature__bottom { padding: var(--space-4); }
  .product-miniature__price { font-size: var(--fs-base); }
}
@media (max-width: 480px) {
  .products { grid-template-columns: 1fr; }
}

/* ===============================================================
   Team / Experience section
   =============================================================== */
.team {
  padding: var(--space-24) 0;
  background: var(--color-bg-alt);
}
.team__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}
.team__content { max-width: 560px; }
.team__title {
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: var(--space-3) 0 var(--space-4);
  font-weight: var(--fw-bold);
}
.team__title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--color-accent-600), var(--color-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.team__lead {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-8);
}
.team__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.team__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.team__feature .lmcf-check {
  width: 22px;
  height: 22px;
  margin-top: 4px;
}
.team__feature-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin: 0 0 2px;
  letter-spacing: -0.01em;
  line-height: var(--lh-tight);
}
.team__feature-desc {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--lh-normal);
}

/* Photo placeholder */
.team__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}
.team__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0 14px,
      rgba(14, 27, 44, 0.025) 14px 16px
    ),
    var(--color-bg-alt);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
}
.team__placeholder svg { opacity: 0.55; }

/* ---------------------------------------------------------------
   Timeline / Notre histoire
--------------------------------------------------------------- */
.timeline {
  padding: var(--space-24) 0;
  background: var(--color-surface);
}
.timeline__header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto var(--space-16);
}
.timeline__title {
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  margin: var(--space-3) 0;
}
.timeline__subtitle {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  margin: 0;
}
.timeline__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}
.timeline__item {
  padding: 0 var(--space-3);
  text-align: center;
}
.timeline__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  background: var(--color-bg-alt);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.timeline__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow, 0.5s) var(--ease-out);
}
.timeline__item:hover .timeline__media {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg, 0 18px 40px rgba(14, 27, 44, 0.18));
  border-color: var(--color-accent);
}
.timeline__item:hover .timeline__img { transform: scale(1.06); }
.timeline__img--placeholder {
  display: grid;
  place-items: center;
  color: var(--color-text-muted);
  opacity: 0.6;
}
/* Rail: each node is a full-width segment; adjacent segments form one line */
.timeline__node {
  position: relative;
  height: 2px;
  background: var(--color-primary);
  /* Negative side margins so adjacent segments touch into one continuous rail */
  margin: var(--space-6) calc(-1 * var(--space-3)) var(--space-5);
}
.timeline__node::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--color-accent);
  transition: transform var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.timeline__item:last-child .timeline__node::before {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 8px solid var(--color-primary);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.timeline__year {
  display: inline-block;
  position: relative;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-2);
  cursor: default;
  transition: transform var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.timeline__year::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--color-accent);
  transform: translateX(-50%);
  transition: width var(--dur-base) var(--ease-out);
}
/* Hovering anywhere on the item (photo included) animates the year + node */
.timeline__item:hover .timeline__year {
  transform: translateY(-3px) scale(1.12);
  color: var(--color-accent-600);
}
.timeline__item:hover .timeline__year::after { width: 80%; }
.timeline__item:hover .timeline__node::after {
  transform: translate(-50%, -50%) scale(1.55);
  background: var(--color-accent);
  box-shadow: 0 0 0 5px rgba(204, 162, 14, 0.22);
}
.timeline__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
  transition: transform var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.timeline__text {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-normal);
  margin: 0;
  transition: transform var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.timeline__item:hover .timeline__label {
  transform: translateY(20px);
  color: var(--color-accent-600);
}
.timeline__item:hover .timeline__text {
  transform: translateY(20px);
  color: var(--color-text);
}
@media (max-width: 860px) {
  .timeline { padding: var(--space-16) 0; }
  .timeline__list {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    gap: var(--space-10);
    max-width: 460px;
    margin: 0 auto;
  }
  .timeline__node { display: none; }
  .timeline__media { max-width: 320px; margin: 0 auto var(--space-4); }
}

/* Responsive */
@media (max-width: 991px) {
  .team__inner { grid-template-columns: 1fr; gap: var(--space-10); }
  .team__media { aspect-ratio: 16 / 10; max-width: 600px; }
}
@media (max-width: 560px) {
  .team { padding: var(--space-16) 0; }
}

/* ===============================================================
   Avis clients (témoignages services)
   =============================================================== */
.reviews {
  padding: var(--space-20) 0 var(--space-24);
  background: var(--color-bg);
  /* Clip the bleeding visual at the viewport edge (x only; card shadows
     still overflow vertically since overflow-y stays visible). */
  overflow-x: clip;
}
/* Banner intro: text + rating on the left, large photo bleeding to the
   top + right edges, fading into the background on its left. */
.reviews__top {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(260px, 22vw, 340px);
  margin-bottom: var(--space-16);
}
.reviews__intro {
  position: relative;
  z-index: 2;
  width: 50%;
  max-width: 640px;
  text-align: left;
}
.reviews__title {
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: var(--space-3) 0 var(--space-5);
  font-weight: var(--fw-bold);
}
.reviews__summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
/* Une seule rangée d'étoiles, partagée par la note globale et les cartes. */
.lmcf-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--color-accent);
  line-height: 0;
}
.reviews__summary-text {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin: 0;
}
.reviews__summary-text strong { color: var(--color-ink); font-size: var(--fs-md); }
.reviews__summary-source { display: inline-flex; line-height: 0; }

/* Chiffres clés — trois colonnes séparées par un filet, sous la note. Le
   pictogramme et l'initiale des cartes partagent la même pastille beige : le
   beige ne bascule pas en sombre, d'où le bleu de marque en avant-plan, foncé
   dans les deux thèmes là où --color-ink s'éclaircirait. */
.reviews__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}
.reviews__stat { padding-inline: var(--space-6); }
.reviews__stat:first-child { padding-left: 0; }
.reviews__stat + .reviews__stat { border-left: 1px solid var(--color-border); }
.reviews__stat-ic {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-accent-100);
  color: var(--color-primary);
}
.reviews__stat-ic svg { width: 24px; height: 24px; }
.reviews__stat-value {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-ink);
}
.reviews__stat-label {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-ink);
}
.reviews__stat-text {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.reviews__visual {
  /* Stays within the site container (right edge aligns with the content
     box). It bleeds to the section top (top:0, no section top padding) and
     fades left into the background. */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 0;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.reviews__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--color-bg) 0%, rgba(245, 243, 238, 0) 35%);
  pointer-events: none;
}
.reviews__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.reviews__img--placeholder {
  display: grid;
  place-items: center;
  color: var(--color-text-muted);
  opacity: 0.55;
}

/* Carousel of testimonials */
.reviews__carousel {
  --reviews-visible: 3;
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
}
.reviews__viewport {
  flex: 1 1 auto;
  overflow-x: auto;
  /* overflow-x:auto forces overflow-y to auto, which would clip the card
     shadows. Pad on all sides to give them room, then pull back with equal
     negative margins so card alignment is unchanged; the section's
     overflow-x:clip keeps the extra width from causing a page scroll. */
  padding: 40px 28px;
  margin: -40px -28px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.reviews__viewport::-webkit-scrollbar { display: none; }
.reviews__track {
  display: flex;
  gap: var(--space-6);
  margin: 0;
  align-items: stretch;
}
.reviews__nav {
  flex: 0 0 auto;
  align-self: center;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-ink);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.reviews__nav:hover { background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); }
.reviews__nav:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.reviews__nav[hidden] { display: none; }

.review-card {
  flex: 0 0 calc((100% - (var(--reviews-visible) - 1) * var(--space-6)) / var(--reviews-visible));
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(14, 27, 44, 0.10);
}
.review-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.review-card__quote {
  color: var(--color-accent);
  line-height: 0;
}
.review-card__stars { display: inline-flex; align-items: center; }
.review-card__text {
  flex: 1;
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-text);
}
.review-card__divider {
  width: 40px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-accent);
}
.review-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.review-card__avatar {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-accent-100);
  color: var(--color-primary);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: 1;
}
.review-card__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.review-card__identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.review-card__name {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}
.review-card__meta {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
/* Provenance de l'avis : la ligne se détache du témoignage par un filet, elle
   documente la carte plutôt qu'elle ne la prolonge. */
.review-card__source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.review-card__source-name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Responsive */
@media (max-width: 991px) {
  .reviews__carousel { --reviews-visible: 2; }
}
@media (max-width: 860px) {
  .reviews { padding: var(--space-16) 0; }
  .reviews__title { font-size: var(--fs-2xl); }
  .reviews__top {
    display: block;
    min-height: 0;
    margin-bottom: var(--space-8);
  }
  .reviews__intro { width: 100%; max-width: none; margin-bottom: var(--space-8); }
  .reviews__visual {
    position: static;
    inset: auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
  }
  .reviews__visual::after { display: none; }
  .reviews__carousel { padding-top: 0; }
  /* En colonne, le filet vertical n'a plus de sens : il passe au-dessus. */
  .reviews__stats { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .reviews__stat { padding-inline: 0; }
  .reviews__stat + .reviews__stat {
    border-left: 0;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-6);
  }
}
@media (max-width: 560px) {
  .reviews__carousel { --reviews-visible: 1; }
}

/* ---------------------------------------------------------------
   Products carousel (lmcfproducts)
--------------------------------------------------------------- */
.product-band {
  padding: var(--space-24) 0;
  background: var(--color-surface);
}
.product-band__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-12);
}
.product-band__title {
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: var(--space-3) 0 0;
  font-weight: var(--fw-bold);
}
/* Carousel: --products-visible cards shown at once, arrows scroll the rest */
.product-band__carousel {
  --products-visible: 6;
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
}
.product-band__viewport {
  flex: 1 1 auto;
  overflow-x: auto;
  /* Vertical padding so the hover lift (-4px) and shadow aren't clipped:
     overflow-x:auto forces overflow-y to compute to auto, which would clip it. */
  padding: 10px 0;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.product-band__viewport::-webkit-scrollbar { display: none; }
.product-band__track {
  display: flex;
  gap: var(--space-5);
  margin: 0;
  align-items: stretch;
}
.product-band__nav {
  flex: 0 0 auto;
  align-self: center;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.product-band__nav:hover { background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); }
.product-band__nav:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
.product-band__nav[hidden] { display: none; }

.product-card {
  flex: 0 0 calc((100% - (var(--products-visible) - 1) * var(--space-5)) / var(--products-visible));
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}
.product-card__media {
  display: grid;
  place-items: center;
  background: var(--color-bg);
  padding: var(--space-2);
}
.product-card__img {
  max-width: 100%;
  max-height: 130px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.product-card__img--placeholder { color: var(--color-border-strong); }
.product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  flex: 1 1 auto;
}
.product-card__name {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--color-ink);
}
.product-card__name a { color: inherit; text-decoration: none; }
.product-card__name a:hover { color: var(--color-accent); }
.product-card__specs {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}
.product-card__specs li { margin: 0; }
.product-card__price {
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}
.product-card__regular {
  margin-left: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
  text-decoration: line-through;
}
.product-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  text-decoration: none;
}
.product-card__link .arrow { transition: transform var(--dur-base) var(--ease-out); }
.product-card__link:hover .arrow { transform: translateX(3px); }

@media (max-width: 1100px) { .product-band__carousel { --products-visible: 4; } }
@media (max-width: 860px) {
  .product-band { padding: var(--space-16) 0; }
  .product-band__title { font-size: var(--fs-2xl); }
  .product-band__carousel { --products-visible: 3; }
}
@media (max-width: 640px) { .product-band__carousel { --products-visible: 2; } }
@media (max-width: 420px) { .product-band__carousel { --products-visible: 1; } }

/* ---------------------------------------------------------------
   Fiche produit
   Le gabarit vient de Hummingbird : il est stylé par theme.css, qui suit les
   variables Bootstrap et ignore les jetons LMCF — d'où les boutons et liens
   bleus. On repose ici la palette de la boutique, la même que les vignettes de
   listing (navy plein pour l'action principale, or pour les liens).
--------------------------------------------------------------- */

/* ---- Média : la colonne faisait 55% du conteneur, soit ~715px sur grand
   écran. Une serrure de 12 cm y était affichée en pleine page. ---- */
.product__container {
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: start;
}
.product__images .carousel-item img,
.product__carousel img {
  max-height: 420px;
  width: 100%;
  object-fit: contain;
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
}
.product__thumbnails-list { gap: var(--space-2); }
.product__thumbnail-image { border-radius: var(--radius-md); }

/* ---- Titre, prix ---- */
body#product .product__name {
  color: var(--color-ink);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}
body#product .product__price {
  color: var(--color-ink);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
}
body#product .product__tax-infos,
body#product .product__tax-label { color: var(--color-text-muted); font-size: var(--fs-sm); }

/* ---- Liens : bleu Bootstrap -> or de la marque ---- */
body#product .product__description-short a,
body#product .product__bottom a {
  color: var(--color-accent-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body#product .product__description-short a:hover,
body#product .product__bottom a:hover { color: var(--color-accent); }

/* ---- Action principale : même traitement que le bouton des vignettes ---- */
body#product .product__add-to-cart-button.btn-primary {
  background: var(--color-primary);
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-text-inverse);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  padding: 0.875rem 1.5rem;
  transition: background-color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
body#product .product__add-to-cart-button.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-700);
  color: var(--color-text-inverse);
  transform: translateY(-1px);
}
body#product .ps-emailalerts .btn-primary {
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  box-shadow: inset 0 0 0 1.5px var(--color-border-strong);
}
body#product .ps-emailalerts .btn-primary:hover {
  box-shadow: inset 0 0 0 1.5px var(--color-primary);
  color: var(--color-ink);
}
body#product .quantity-button .btn,
body#product .product__zoom {
  color: var(--color-ink);
  border-color: var(--color-border-strong);
}

/* ---- Accordéon : on repique les variables Bootstrap plutôt que de lutter
   contre chacune de ses règles. ---- */
body#product .product__accordion {
  --bs-accordion-btn-color: var(--color-ink);
  --bs-accordion-active-color: var(--color-ink);
  --bs-accordion-active-bg: transparent;
  --bs-accordion-border-color: var(--color-border);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-focus-border-color: var(--color-border-strong);
}
body#product .product__accordion .accordion-button { font-weight: var(--fw-semibold); }
body#product .product-features th,
body#product .product-features td,
body#product .product__details th,
body#product .product__details td { border-color: var(--color-border); }

/* ---- Bloc réassurance (module blockreassurance) ---- */
.blockreassurance {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.blockreassurance .reassurance {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin: 0;
}
.blockreassurance .reassurance__image {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
}
/* Les icônes ne se chargent pas (chemin `//modules/...` en base, interprété
   comme un nom d'hôte). Tant que ce n'est pas corrigé, l'image reste en
   `invisible` mais occupe sa boîte : on la retire du flux pour ne pas laisser
   de grands trous blancs entre les lignes. */
.blockreassurance .reassurance__image img.invisible { display: none; }
.blockreassurance .reassurance__image:empty { display: none; }
.blockreassurance .reassurance__title {
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  font-size: var(--fs-sm);
}
.blockreassurance .reassurance__desc { color: var(--color-text-muted); font-size: var(--fs-xs); }

@media (max-width: 991px) {
  .product__container { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .product__images .carousel-item img,
  .product__carousel img { max-height: 320px; }
}



/* Vignette sélectionnée : le liseré restait au bleu Bootstrap. */
body#product .product__thumbnail.active .product__thumbnail-image,
body#product .product__thumbnail-image.js-thumb-selected {
  outline-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* ---------------------------------------------------------------
   Fil d'Ariane — fond neutre, aligné sur la page (`--bs-tertiary-bg`
   posait une bande grise). Le jeton suit le schéma clair/sombre :
   blanc en clair, fond sombre en sombre.
--------------------------------------------------------------- */
.breadcrumb__wrapper { background-color: var(--color-bg); }
/* « Accueil » masqué : le logo remplit déjà ce rôle. En CSS et non dans le
   gabarit, pour que l'entrée reste dans le BreadcrumbList JSON-LD
   (_partials/microdata/head-jsonld.tpl) que lisent les moteurs. Le séparateur
   du second élément doit tomber avec lui, sinon le fil commence par un « / ». */
.breadcrumb-item:first-child { display: none; }
.breadcrumb-item:first-child + .breadcrumb-item::before { content: none; }
.breadcrumb-link { color: var(--color-accent-600); }
.breadcrumb-link:hover { color: var(--color-accent); }
.breadcrumb-item > span { color: var(--color-text-muted); }

/* ---------------------------------------------------------------
   Indisponibilité — or de la marque au lieu du bleu Bootstrap
   (pastille) et du rouge (libellé).
--------------------------------------------------------------- */

/* Pastille sur l'image : voir le bloc @layer en fin de fichier — les couleurs
   doivent y être posées, pas ici. */
.product-flags .badge:not(.discount),
.product-flag.out_of_stock { font-weight: var(--fw-semibold); }

/* Libellé « Rupture de stock » : de l'or sur blanc tombe à ~2,5:1 de
   contraste, illisible en petit corps. On garde donc le jaune en surface
   (puce teintée) et on écrit en encre — visuellement jaune, et lisible. */
body#product .product__availability-status,
body#product .product__availability-status.text-danger {
  display: inline-flex;
  align-self: start;
  width: fit-content;
  align-items: center;
  gap: var(--space-2);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-100);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
body#product .product__availability-status svg,
body#product .product__availability-status .material-icons { color: var(--color-accent-600); }

/* ---------------------------------------------------------------
   Surcharges de couleur qui doivent battre un `!important` du thème.

   theme.css déclare ses styles dans des couches de cascade :
   `@layer vendors, bs-base, …, utilities`. Or pour les déclarations
   `!important`, l'ordre des couches est INVERSÉ — la couche déclarée en
   PREMIER l'emporte, et une règle hors couche est la plus faible de toutes.
   Un `!important` écrit normalement dans ce fichier perd donc contre
   `.text-danger{…!important}` (couche `utilities`) et contre
   `.product-flags .badge:not(.discount){…!important}`.

   On rouvre donc la première couche, `vendors`, uniquement pour ces
   couleurs. Le reste du fichier doit rester HORS couche : pour les
   déclarations normales la règle s'inverse à nouveau, et le hors-couche
   l'emporte sur tout le reste.
--------------------------------------------------------------- */
@layer vendors {
  /* Pastilles produit : plus aucune ne reste au bleu Bootstrap. */
  .product-flags .badge:not(.discount) {
    background-color: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    border-color: var(--color-primary) !important;
  }
  .product-flags .badge.out_of_stock,
  .product-flag.out_of_stock {
    background-color: var(--color-accent) !important;
    color: var(--color-ink) !important;
    border-color: var(--color-accent) !important;
  }

  /* Libellé d'indisponibilité : `.text-danger` le peint en rouge. */
  body#product .product__availability-status.text-danger { color: var(--color-ink) !important; }
}

/* ---------------------------------------------------------------
   Bandeau CTA « Nous contacter » — composant partagé
   (_partials/cta-band.tpl). Déplacé ici depuis lmcf-pro.css : la feuille du
   module Professionnels n'est chargée que sur sa page, alors que le bandeau
   sert aussi sur Entreprises et Particuliers.
--------------------------------------------------------------- */
.lmcf-cta-section {
  padding-block: 0 var(--space-20, 5rem);
  background: var(--color-bg, #fff);
}

.lmcf-cta {
  display: flex;
  align-items: center;
  gap: var(--space-6, 1.5rem);
  padding: var(--space-7, 1.75rem) var(--space-8, 2rem);
  border-radius: var(--radius-lg, 16px);
  background: var(--color-bg-deep, #0A1422);
  color: var(--color-text-inverse, #F2F0E9);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(14, 27, 44, .12));
}

.lmcf-cta__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  color: var(--color-accent, #E0A63C);
  border: 1.5px solid color-mix(in srgb, var(--color-accent, #E0A63C) 55%, transparent);
  background: color-mix(in srgb, var(--color-accent, #E0A63C) 12%, transparent);
}

.lmcf-cta__body { flex: 1 1 auto; display: grid; gap: 4px; }
.lmcf-cta__title {
  margin: 0;
  font-size: var(--fs-xl, 1.5rem);
  font-weight: var(--fw-bold, 700);
  line-height: 1.2;
  color: var(--color-text-inverse, #F2F0E9);
}
.lmcf-cta__text {
  margin: 0;
  font-size: var(--fs-md, 1rem);
  color: color-mix(in srgb, var(--color-text-inverse, #F2F0E9) 78%, transparent);
  line-height: 1.5;
}
.lmcf-cta__btn { flex: 0 0 auto; gap: .5rem; }

@media (max-width: 767px) {
  .lmcf-cta { flex-direction: column; text-align: center; }
  .lmcf-cta__body { justify-items: center; }
}