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

/* Même traitement pour les logos de nos clients, quand la bande « Avis »
   passe en sombre. */
[data-theme="dark"] .reviews__client {
  filter: brightness(0) invert(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 + pages LMCF pleine largeur : neutralise les contraintes Bootstrap.

   Le préfixe plutôt que la liste des identifiants : toute page servie par un
   module LMCF est pleine largeur, et la règle suivante les traite déjà toutes
   ainsi (`:not([id^="module-lmcf"])`). Énumérées une à une, trois d'entre elles
   manquaient à l'appel — Catalogues, Nos services, Notre histoire — et
   gardaient le `padding-bottom: 2rem` que Hummingbird pose sur `.page` : une
   bande claire de 32 px entre la dernière section et le pied de page, visible
   dès que cette section est teintée. La page contact (bandeau + section
   crème, templates/contact.tpl) suit la même règle. */
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[id^="module-lmcf"] #wrapper.wrapper,
body[id^="module-lmcf"] .center-column.page,
body[id^="module-lmcf"] .columns-container.container,
body[id^="module-lmcf"] .container,
body[id^="module-lmcf"] #content.page-content,
body#contact #wrapper.wrapper,
body#contact .center-column.page,
body#contact #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"]):not(#contact) #wrapper.wrapper {
  padding-block: 0 var(--space-12);
}
body:not(#index):not([id^="module-lmcf"]):not(#contact) .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); }
/* Troisième cran de l'échelle, pour les contrôles de service : réinitialiser
   un filtre, déplier une liste. Sans lui, la colonne de filtres se fabriquait
   ses propres boutons en marge du design system. */
.lmcf-btn--sm { padding: 0.5rem 0.875rem; font-size: var(--fs-xs); gap: 6px; }
.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;
}
/* Le footer sert sa propre variante du logo (img-dist/logo-footer.png) : encre
   blanche, « du coffre-fort » et coffre central dorés. Pas de filtre ici, il
   écraserait le doré. */
.site-footer .brand__logo {
  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);
}

/* Troisième bouton du héros, en deux exemplaires : « Appeler maintenant » et son
   lien tel: sur mobile, où un clic lance l'appel ; « Nous contacter » et la page
   contact à partir du bureau, où composer un numéro à la main n'a rien
   d'immédiat. Un seul est affiché à la fois. */
.hero__cta-contact { display: none; }
@media (min-width: 861px) {
  .hero__cta-call { display: none; }
  .hero__cta-contact { display: inline-flex; }
}

/* ---------------------------------------------------------------
   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, 50%);
  align-items: center;
  min-height: clamp(24rem, 42vw, 38rem);
}
.about__content {
  grid-column: 2;
  /* 34rem tassait le titre en trois lignes ; la photo reste majoritaire. */
  max-width: 38rem;
}
.about__title {
  /* Même taille que les titres des autres bandes (services, avis, devis…) :
     la bande « À propos » n'a pas de raison de crier plus fort. */
  font-size: var(--fs-3xl);
  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);
}
/* Le second bloc reprend le premier ; seul son écart à la ligne dorée change. */
.about__text--after {
  margin-top: var(--space-5);
}
.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. `cover` la portait à
   951px de haut sur une bande de 600, où le coffre écrasait tout : elle garde
   la hauteur du bloc — --quote-bg-scale reste au-dessus de 100% — mais d'un
   cran plus petite. Un seul chiffre à bouger pour la redimensionner. */
.quote-section__bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-size: auto var(--quote-bg-scale, 135%);
  background-repeat: no-repeat;
  background-position: center;
}
.quote-section__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Wide, soft fade on both sides of the image — the section surface stays
     solid on the text side, dissolves into the photo, puis revient avant le
     bord droit. La photo étant réduite, elle ne touche plus les bords : sans
     ce second fondu, son propre fond beige y dessinerait une arête franche.
     Les arrêts sont larges à dessein — la largeur de la photo suit la hauteur
     de la bande, son bord se déplace donc avec la taille de l'écran, et un
     voile qui commence trop tôt se voit bien moins qu'une arête.
     Uses the surface colour so it follows light/dark automatically. */
  background: linear-gradient(90deg,
    rgba(var(--color-surface-rgb), 1) 22%,
    rgba(var(--color-surface-rgb), 0) 44%,
    rgba(var(--color-surface-rgb), 0) 58%,
    rgba(var(--color-surface-rgb), 1) 80%);
}
.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__cta { margin: var(--space-6) 0 var(--space-2); }
.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);
}
/* "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;
  /* Même laisse que l'en-tête de la frise : à 640px le titre se cassait en
     trois lignes serrées. */
  max-width: 760px;
  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);
}
/* Icône et titre sur la même ligne, la phrase d'accroche juste dessous */
.lmcf-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.lmcf-card__icon {
  width: 56px; height: 56px;
  flex: 0 0 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;
}
.lmcf-card__title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  margin: 0;
  letter-spacing: -0.01em;
}
.lmcf-card__lead {
  /* La police est redite ici : Hummingbird pose la sienne sur <p>, et une règle
     d'élément l'emporterait sur l'héritage de body. */
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-text);
  margin: 0 0 var(--space-6);
}
.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%);
}
/* Les photos « Entreprises » et « Professionnels » sont nettement plus claires
   que celle des particuliers : le voile descend d'un cran sous elles pour que
   la typo reste lisible. Le modificateur suit l'icône, seul repère d'audience
   que la carte porte — changer l'icône en back-office change donc le voile. */
.lmcf-card--bg.lmcf-card--briefcase::before,
.lmcf-card--bg.lmcf-card--key::before {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.45) 0%, rgba(15, 23, 42, 0.85) 100%);
}
.lmcf-card--bg > * { position: relative; z-index: 1; }
.lmcf-card--bg .lmcf-card__title,
.lmcf-card--bg .lmcf-card__lead,
.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);
}

/* ---------------------------------------------------------------
   Tuiles de service (.lmcf-tile)

   Petite carte centrée : icône dorée, titre, filet doré, description. Née sur
   la page « Nos services », elle sert aussi les pages Particuliers, Entreprises
   et Professionnels — d'où sa place ici plutôt que dans la feuille d'un module,
   comme le bandeau .lmcf-cta avant elle.
--------------------------------------------------------------- */
.lmcf-tiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
}
/* Cinq tuiles par rangée par défaut ; la variante suit le nombre de tuiles de
   la section, qui tiennent toutes sur une seule ligne. */
.lmcf-tiles--6 { grid-template-columns: repeat(6, 1fr); }
.lmcf-tiles--4 { grid-template-columns: repeat(4, 1fr); }
.lmcf-tiles--3 { grid-template-columns: repeat(3, 1fr); }

.lmcf-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-6) var(--space-4);
  /* Jeton plutôt que #fff : la tuile suit le schéma clair ou sombre de sa
     section, ce que la valeur en dur imposait de contourner. */
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}
.lmcf-tile:hover {
  transform: translateY(-4px);
  border-color: var(--color-accent-600);
  box-shadow: var(--shadow-lg);
}
/* Une tuile entière peut être un lien (Entreprises, Professionnels) : elle ne
   doit ni se souligner ni virer au bleu, et son focus clavier doit se voir
   puisque plus rien d'autre ne le signale. */
a.lmcf-tile {
  text-decoration: none;
  color: inherit;
}
.lmcf-tile:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.lmcf-tile__icon {
  display: inline-flex;
  color: var(--color-accent-600);
}
/* Les icônes arrivent en 30, 34 px ou sans dimension selon la page : la tuile
   impose la sienne. */
.lmcf-tile__icon svg {
  width: 40px;
  height: 40px;
}
.lmcf-tile__title {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--color-ink);
}
.lmcf-tile__sep {
  width: 34px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  margin: var(--space-3) 0;
}
.lmcf-tile__desc {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-normal);
  max-width: 24ch;
}

@media (max-width: 1100px) {
  .lmcf-tiles,
  .lmcf-tiles--6,
  .lmcf-tiles--4,
  .lmcf-tiles--3 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px) {
  .lmcf-tiles,
  .lmcf-tiles--6,
  .lmcf-tiles--4,
  .lmcf-tiles--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .lmcf-tiles,
  .lmcf-tiles--6,
  .lmcf-tiles--4,
  .lmcf-tiles--3 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   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); }
  /* En colonne, la photo redevient un fond plein : réduite, elle flotterait
     derrière le texte empilé. */
  .quote-section__bg {
    background-size: cover;
    background-position: center;
  }
  /* 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); }
  .about__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 {
  /* Clip the bleeding visual at the viewport edge (x only; card shadows
     still overflow vertically since overflow-y stays visible). */
  overflow-x: clip;
}
/* Deux bandes sous une même section : les références en haut, les avis en
   dessous, sur le MÊME fond de page. Les avis avaient un fond plus sourd, qui
   traçait une ligne là où la photo des références s'arrêtait ; le souffle
   suffit à séparer les deux, et la photo n'a plus l'air posée sur une marche.
   Ce blanc sous la bande est ce qui la sépare de la photo : celle-ci tient
   toute la hauteur des références (son calage vertical vit dans la colonne de
   texte) et butait donc sur la bande suivante. Plus de souffle au-dessus, pour
   qu'elle ne colle pas non plus à la section précédente. */
.reviews__refs {
  background: var(--color-bg);
  padding: var(--space-20) 0 var(--space-12);
}
.reviews__voices {
  padding: var(--space-20) 0 var(--space-24);
  background: var(--color-bg);
}
/* Références : texte à gauche, grande photo à droite qui tient toute la
   hauteur de la bande et se fond dans le fond sur son bord gauche. Le calage
   vertical vit dans la colonne de texte, pour que la photo puisse déborder
   au-dessus et en dessous d'elle. */
.reviews__top {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(360px, 30vw, 480px);
}
.reviews__intro {
  position: relative;
  z-index: 2;
  width: 57%;
  padding: var(--space-16) var(--space-8) var(--space-16) 0;
  text-align: left;
}
.reviews__lead {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
  max-width: 46ch;
}
.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);
}
/* Avis : la note et sa provenance en colonne de gauche, les témoignages à
   droite. */
.reviews__bottom {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
}
.reviews__aside {
  flex: 0 0 26%;
  max-width: 320px;
}
.reviews__summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.reviews__summary-note {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-ink);
}
.reviews__summary .lmcf-stars svg { width: 22px; height: 22px; }
.reviews__source {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}
/* Le bouton reprend le doré du filet plutôt que le gris de --btn--outline. */
.reviews__cta {
  margin-top: var(--space-6);
  color: var(--color-accent-600);
  box-shadow: inset 0 0 0 1.5px var(--color-accent);
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.reviews__cta:hover {
  box-shadow: inset 0 0 0 1.5px var(--color-accent-600);
  color: var(--color-accent-600);
}
/* Une seule rangée d'étoiles, partagée par la note globale et les cartes. Le
   vert est celui de Trustpilot, d'où ces avis viennent — la même couleur que
   l'étoile de la marque, en dur pour tenir dans les deux thèmes. */
.lmcf-stars {
  display: inline-flex;
  gap: 2px;
  color: #00B67A;
  line-height: 0;
}
.reviews__summary-text {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin: var(--space-2) 0 0;
}

.reviews__visual {
  /* Spans the whole references band — the vertical padding sits on the text
     column, not on the band — and bleeds past the container to the right edge
     of the screen, where `overflow-x: clip` on the section stops it. On a
     narrow screen the container already is the screen and the offset is nil. */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 57%;
  right: calc((100% - 100vw) / 2);
  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;
  flex: 1 1 auto;
  min-width: 0;
  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);
}

/* Nos références — les logos de clients dans une carte blanche que le lecteur
   fait défiler : flèches au-dehors, pastilles en dessous, les unes comme les
   autres masquées quand tout tient à l'écran. */
.reviews__clients {
  --clients-visible: 5;
  margin-top: var(--space-10);
}
/* Une ligne : flèche, carte, flèche — puis les pastilles en dessous. La carte
   part d'une base nulle (`1 1 0`), sinon la largeur de sa piste de logos la
   pousserait à occuper la ligne entière et renverrait les flèches à la ligne. */
.reviews__clients-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.reviews__clients-card {
  flex: 1 1 0;
  min-width: 0;
  padding: var(--space-2) 0;
}
.reviews__clients-viewport {
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.reviews__clients-viewport::-webkit-scrollbar { display: none; }
.reviews__clients-track {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.reviews__clients-nav {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-text-muted);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.reviews__clients-nav:hover { color: var(--color-ink); box-shadow: var(--shadow-md); }
.reviews__clients-nav:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.reviews__clients-nav[hidden] { display: none; }
.reviews__client {
  flex: 0 0 calc(100% / var(--clients-visible, 5));
  scroll-snap-align: start;
  display: grid;
  place-items: center;
  min-height: 72px;
  line-height: 1.2;
  padding: 0 var(--space-4);
  color: var(--color-text-muted);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}
.reviews__client-img {
  /* Même hauteur optique pour tous les logos, quel que soit leur format. */
  height: var(--clients-logo-h, 54px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  /* En gris au repos, en couleur au survol — comme la bande des partenaires. */
  opacity: 0.65;
  filter: grayscale(1);
  transition: opacity var(--dur-base) var(--ease-out),
              filter var(--dur-base) var(--ease-out);
}
.reviews__client:hover .reviews__client-img {
  opacity: 1;
  filter: grayscale(0);
}
/* Les pastilles, centrées sous la carte. */
.reviews__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.reviews__dots[hidden] { display: none; }
.lmcf-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-border-strong);
  opacity: 0.5;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
}
.lmcf-dot:hover { opacity: 0.8; }
.lmcf-dot.is-active { background: var(--color-accent); opacity: 1; }

/* Responsive */
@media (max-width: 1200px) {
  .reviews__clients { --clients-visible: 4; }
}
@media (max-width: 991px) {
  .reviews__bottom { display: block; }
  .reviews__aside { max-width: none; margin-bottom: var(--space-10); }
  .reviews__carousel { --reviews-visible: 2; }
  /* La photo passe sous le texte : l'intro porte déjà l'espace du haut. */
  .reviews__refs { padding-top: 0; }
  .reviews__top {
    display: block;
    min-height: 0;
  }
  .reviews__intro {
    width: 100%;
    padding: var(--space-16) 0 var(--space-8);
  }
  .reviews__visual {
    position: static;
    inset: auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    /* La bande porte l'espace sous la photo (padding-bottom) : une marge ici
       ferait doublon. */
    margin-bottom: 0;
  }
  .reviews__visual::after { display: none; }
  .reviews__clients { --clients-visible: 4; }
}
@media (max-width: 860px) {
  .reviews__voices { padding: var(--space-16) 0; }
  .reviews__title { font-size: var(--fs-2xl); }
  .reviews__carousel { padding-top: 0; }
  .reviews__clients { --clients-visible: 3; }
}
@media (max-width: 560px) {
  .reviews__carousel { --reviews-visible: 1; }
  .reviews__clients { --clients-visible: 2; }
}

/* ---------------------------------------------------------------
   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. On repose ici la palette et
   la mise en page de la boutique :
   - en haut, la galerie dans une carte à gauche, l'achat à droite ;
   - en bas, une carte « En savoir plus | Caractéristiques techniques » à côté
     du bloc de réassurance ;
   - puis les produits de la même catégorie.
--------------------------------------------------------------- */

body#product .product__container {
  display: grid;
  grid-template-columns: minmax(0, 580px) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: start;
  margin-block: 0 var(--space-8);
}

/* ---- Galerie : une carte blanche qui tient l'image et les vignettes ---- */
body#product .product__images {
  margin: 0;
  padding: var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
body#product .product__carousel {
  position: relative;
  border-radius: var(--radius-md);
}
body#product .product__carousel img {
  width: 100%;
  max-height: 400px;
  object-fit: contain;
  background: var(--color-bg);
}
body#product .product__carousel .product-flags {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  margin: 0;
}

/* Flèches : pastilles blanches rondes au lieu des bandes pleine hauteur. */
body#product .product__carousel .carousel-control-prev,
body#product .product__carousel .carousel-control-next {
  top: 50%;
  bottom: auto;
  width: 36px;
  height: 36px;
  margin-inline: var(--space-3);
  transform: translateY(-50%);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  opacity: 1;
  transition: box-shadow var(--dur-base) var(--ease-out);
}
body#product .product__carousel .carousel-control-prev:hover,
body#product .product__carousel .carousel-control-next:hover { box-shadow: var(--shadow-md); }
body#product .product__carousel .carousel-control-prev-icon,
body#product .product__carousel .carousel-control-next-icon {
  width: auto;
  height: auto;
  background: transparent;
}
body#product .product__carousel .carousel-control-prev-icon::before,
body#product .product__carousel .carousel-control-next-icon::before { color: var(--color-ink); }

body#product .product__zoom {
  right: var(--space-3);
  bottom: var(--space-3);
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-ink);
}

/* ---- Colonne d'achat ---- */
body#product .product__right { padding-block-start: var(--space-2); }
body#product .product__name {
  margin-block-end: var(--space-3);
  color: var(--color-ink);
  font-size: clamp(1.5rem, 2.2vw, 1.875rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}
body#product .product__prices { margin-block-end: var(--space-5); }
body#product .product__prices-block { gap: var(--space-1); }
body#product .product__price {
  color: var(--color-ink);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: 1.2;
}
body#product .product__tax-infos,
body#product .product__tax-label { color: var(--color-text-muted); font-size: var(--fs-xs); }

/* Description courte : chaque paragraphe (ou puce) devient un argument coché
   or. Le paragraphe qui ne contient qu'un lien reste un simple lien. */
body#product .product__description-short {
  margin-block-end: var(--space-5);
  color: var(--color-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
body#product .product__description-short ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
body#product .product__description-short p,
body#product .product__description-short li {
  position: relative;
  margin: 0 0 var(--space-3);
  padding-inline-start: 1.75rem;
}
body#product .product__description-short p::before,
body#product .product__description-short li::before {
  content: "";
  position: absolute;
  top: 0.2em;
  left: 0;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E1B2C' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 62% no-repeat;
}
body#product .product__description-short strong,
body#product .product__description-short b {
  display: block;
  color: var(--color-ink);
  font-weight: var(--fw-semibold);
}
body#product .product__description-short p:has(> a:only-child),
body#product .product__description-short p:empty { padding-inline-start: 0; }
body#product .product__description-short p:has(> a:only-child)::before,
body#product .product__description-short p:empty::before { content: none; }
body#product .product__description-short p:last-child { margin-block-end: 0; }

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

/* ---- Quantité + panier ---- */
body#product .product__actions { margin-block-end: 0; }
body#product .product__add-to-cart-container { margin-block-end: var(--space-3); }
body#product .product__availability { margin-block-end: var(--space-4); }
body#product .product__actions-qty-add { gap: var(--space-8); flex-wrap: wrap; }
body#product .product__quantity { width: auto; }
body#product .quantity-button .input-group {
  flex-wrap: nowrap;
  width: 142px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
body#product .quantity-button .btn,
body#product .quantity-button .form-control {
  height: 40px;
  border: 0;
  border-radius: 0;
  color: var(--color-ink);
  background: var(--color-bg);
}
body#product .quantity-button .form-control {
  border-inline: 1px solid var(--color-border);
  text-align: center;
  font-weight: var(--fw-medium);
}
body#product .product__add-to-cart { flex: 0 1 320px; }
body#product .product__add-to-cart-button.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 40px;
  padding: 0.5rem 1.5rem;
  background: var(--color-primary);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-text-inverse);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  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 .material-icons { font-size: 20px; }
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);
}
/* Indisponible : le bouton garde la couleur de la marque, simplement éteint. */
body#product .product__add-to-cart-button.btn-primary:disabled {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  opacity: 0.85;
  cursor: not-allowed;
}

/* Infos ajoutées par les modules (partage, alerte de disponibilité…) */
body#product .product__additional-info { gap: var(--space-4); }
body#product .ps-sharebuttons {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
body#product .ps-sharebuttons__label {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
}
body#product .ps-sharebuttons__list {
  display: flex;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
body#product .ps-sharebuttons__link {
  display: grid;
  place-items: center;
  color: var(--color-ink);
  transition: transform var(--dur-fast) var(--ease-out);
}
body#product .ps-sharebuttons__link:hover { transform: translateY(-1px); }
body#product .ps-sharebuttons .facebook .ps-sharebuttons__link { color: #1877F2; }
body#product .ps-sharebuttons .pinterest .ps-sharebuttons__link { color: #E60023; }
body#product .ps-emailalerts .btn-primary {
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  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);
}

/* ---- Bas de fiche : infos produit + réassurance ---- */
body#product .product__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-8);
  align-items: start;
  margin-block: 0 var(--space-10);
  scroll-margin-top: 110px;
}
body#product .product__bottom:focus { outline: 0; }
body#product .product__bottom--full { grid-template-columns: minmax(0, 1fr); }
body#product .product__bottom-left,
body#product .product__bottom-right { margin: 0; }

/* « En savoir plus » puis « Caractéristiques techniques », l'un sous l'autre,
   chacun sur toute la largeur. */
.product-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  padding: var(--space-5) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.product-info__col { padding-inline: var(--space-4); min-width: 0; }
.product-info__col + .product-info__col {
  border-block-start: 1px solid var(--color-border);
  padding-block-start: var(--space-5);
}
.product-info__title {
  margin: 0 0 var(--space-4);
  color: var(--color-ink);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}
.product-info__subtitle {
  margin: var(--space-5) 0 var(--space-2);
  color: var(--color-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.product-about__body {
  color: var(--color-text);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.product-about__body > :last-child { margin-block-end: 0; }
.product-about__body p { margin-block-end: var(--space-2); }
/* Les descriptions collées depuis d'autres sites gardent leurs styles en ligne
   (police, taille, fond) : on les ramène à ceux de la fiche. */
.product-about__body [style],
body#product .product__description-short [style] {
  font-family: inherit !important;
  font-size: inherit !important;
  background-color: transparent !important;
}
.product-about .attachment { margin-block-end: var(--space-2); font-size: var(--fs-sm); }
.product-about .attachment__description { margin: 0; color: var(--color-text-muted); font-size: var(--fs-xs); }

.product-specs__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.product-specs__table th,
.product-specs__table td {
  padding: 0.3rem var(--space-3);
  vertical-align: top;
  line-height: var(--lh-snug);
}
.product-specs__table th {
  width: 48%;
  color: var(--color-ink);
  font-weight: var(--fw-semibold);
  border-inline-end: 1px solid var(--color-border-strong);
}
.product-specs__table td { color: var(--color-text); }
.product-specs__table tr:nth-child(even) { background: var(--color-bg-alt); }

/* ---- Produits de la même catégorie (ps_categoryproducts) ---- */
body#product .ps-categoryproducts { margin-block-end: var(--space-12); }
/* Vignettes compactes : la maquette en aligne quatre sur un tiers de moins
   que la grille de listing. */
body#product .ps-categoryproducts .products {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--space-5);
}
body#product .ps-categoryproducts .section-title {
  margin-block-end: var(--space-4);
  color: var(--color-ink);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}

/* ---- Fil d'Ariane de la fiche : aligné sur le contenu (son `.container`
   gardait la largeur Bootstrap), et la maison ouvre le fil ---- */
body#product .breadcrumb__wrapper .container {
  max-width: var(--container-max);
  padding-inline: var(--space-6);
}
body#product .breadcrumb-item:first-child { display: list-item; }
body#product .breadcrumb-item:first-child .breadcrumb-link {
  display: inline-grid;
  place-items: center;
  color: var(--color-ink);
}
body#product .breadcrumb-item:first-child + .breadcrumb-item::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin: 0 0.6rem 0 0.35rem;
  padding: 0;
  float: none;
  display: inline-block;
  vertical-align: 0.1em;
  border-top: 1.5px solid var(--color-text-muted);
  border-right: 1.5px solid var(--color-text-muted);
  transform: rotate(45deg);
}
body#product .breadcrumb-item:nth-child(2) .breadcrumb-link { color: var(--color-text-muted); }
body#product .breadcrumb-item:nth-child(2) .breadcrumb-link:hover { color: var(--color-accent-600); }

@media (max-width: 1199px) {
  body#product .product__bottom { grid-template-columns: minmax(0, 1fr); }
  body#product .product__container { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: var(--space-8); }
}
@media (max-width: 991px) {
  body#product .product__container { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  body#product .product__carousel img { max-height: 320px; }
}
@media (max-width: 575px) {
  body#product .product__add-to-cart { flex-basis: 100%; }
  body#product .product__actions-qty-add { gap: var(--space-4); }
  .product-specs__table th { width: 45%; }
}

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

/* Pastille de disponibilité : fond neutre, l'icône porte le sens (vert en
   stock, or sur commande, rouge en rupture) et le texte reste à l'encre —
   un libellé coloré en petit corps tomberait sous le contraste AA. */
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.75rem 0.3rem 0.45rem;
  border-radius: var(--radius-pill);
  background: var(--color-bg-alt);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}
body#product .product__availability-icon.material-icons { font-size: 18px; }
body#product .product__availability-status.text-success .material-icons { color: var(--color-success); }
body#product .product__availability-status.text-warning .material-icons { color: var(--color-accent-600); }
body#product .product__availability-status.text-danger .material-icons { color: #D93838; }
/* Disponible sur demande : bandeau or, il porte l'appel à nous contacter
   puisque ces produits ne s'achètent pas en ligne. Texte foncé fixe : l'or ne
   change pas en thème sombre, l'encre si. */
body#product .product__availability-status--request {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  padding: 0.55rem var(--space-4) 0.55rem var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: #0E1B2C;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  text-decoration: none;
  transition: background-color var(--dur-base) var(--ease-out);
}
body#product a.product__availability-status--request:hover,
body#product a.product__availability-status--request:focus-visible {
  background: #B38E0C;
  color: #0E1B2C;
}
body#product .product__availability-arrow.material-icons {
  margin-inline-start: auto;
  font-size: 20px;
  transition: transform var(--dur-fast) var(--ease-out);
}
body#product a.product__availability-status--request:hover .product__availability-arrow { transform: translateX(2px); }

/* ---- Options supplémentaires (module lmcffiche) ---- */
.lmcf-options { margin-block: var(--space-2) var(--space-4); }
.lmcf-options__title {
  margin: 0 0 var(--space-3);
  color: var(--color-ink);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}
.lmcf-options__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.lmcf-options__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0.85rem var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: border-color var(--dur-base) var(--ease-out);
}
a.lmcf-options__item:hover { border-color: var(--color-accent); color: var(--color-text); }
.lmcf-options__price { flex-shrink: 0; color: var(--color-ink); font-weight: var(--fw-bold); }

/* ---- Plus de modèles de cette série (module lmcffiche) ---- */
.lmcf-series {
  margin-block-start: var(--space-8);
  padding: var(--space-6) var(--space-6) var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.lmcf-series__title {
  margin: 0 0 var(--space-5);
  color: var(--color-accent);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}
.lmcf-series__scroll { overflow-x: auto; }
.lmcf-series__table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.lmcf-series__table thead th {
  padding: var(--space-3) var(--space-3);
  background: var(--color-bg-alt);
  border-block: 2px solid var(--color-primary-600);
  color: var(--color-ink);
  font-weight: var(--fw-semibold);
  text-align: start;
  vertical-align: middle;
  line-height: var(--lh-snug);
}
.lmcf-series__table thead small { font-size: inherit; font-weight: var(--fw-regular); }
.lmcf-series__table tbody td,
.lmcf-series__table tbody th {
  padding: 0.6rem var(--space-3);
  color: var(--color-text);
  text-align: start;
}
.lmcf-series__table tbody th { font-weight: var(--fw-semibold); }
.lmcf-series__table tbody th a { color: var(--color-ink); text-decoration: none; }
.lmcf-series__table tbody th a:hover { color: var(--color-accent); text-decoration: underline; }
.lmcf-series__table tbody tr:nth-child(even) { background: var(--color-bg-alt); }
.lmcf-series__table tbody tr:last-child { border-block-end: 1px solid var(--color-border-strong); }
.lmcf-series__table tbody tr.is-current { box-shadow: inset 3px 0 0 var(--color-accent); }
.lmcf-series__table .lmcf-series__num { text-align: center; }

/* ---------------------------------------------------------------
   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,
  body#product .product__availability-status.text-success,
  body#product .product__availability-status.text-warning { 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; }
}