@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700;800&family=Inter:wght@400;500;700&display=swap");
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
:root {
  --dark-green: #0C3B1D;
  --light-green: #90bc6d;
  --orange: #ED7824;
  --gray-dark: #727272;
  --gray: #CECECE;
  --gray-light: #F4F3F4;
  --white: #FFFFFF;
  --font-display: "Montserrat", "Gotham", system-ui, -apple-system, sans-serif;
  --font-body: "Montserrat", "Gotham", system-ui, sans-serif;
  --font-text: "Inter", system-ui, sans-serif;
  --fw-700: 700;
  --fw-800: 800;
  --radius-lg: 20px;
  --radius-md: 15px;
  --radius-sm: 10px;
  --bs-body-color: var(--gray-dark);
  --bs-body-font-family: var(--font-body);
  --base-spacing: 5px;
  --spacing-xs: calc(var(--base-spacing) * 2);
  --spacing-sm: calc(var(--base-spacing) * 5);
  --spacing-md: calc(var(--base-spacing) * 10);
  --spacing-lg: calc(var(--base-spacing) * 20);
  --spacing-xl: calc(var(--base-spacing) * 30);
  --spacing-xxl: calc(var(--base-spacing) * 60);
  --section-padding: clamp(2.25rem, 6vw, 7rem);
  --custom-padding-x: clamp(1.25rem, calc(1.25rem + ((1vw - 0.275625rem) * 6.2549)), 6.25rem);
  --intro-padding-top: clamp(6.25rem, calc(6.25rem + ((1vw - 0.234375rem) * 3.7209)), 9.375rem);
  --intro-padding-bottom: clamp(1.875rem, calc(1.875rem + ((1vw - 0.234375rem) * 5.2045)), 6.25rem);
  --hero-slide-padding-bottom: clamp(6.25rem, calc(6.25rem + ((1vw - 0.234375rem) * 3.7209)), 9.375rem);
  --cta-section-padding: clamp(6.25rem, calc(6.25rem + ((1vw - 0.234375rem) * 7.4416)), 12.5rem);
  --footer-margin-top: clamp(6.25rem, calc(6.25rem + ((1vw - 0.234375rem) * 8.1039)), 9.375rem);
  --btn-bel-padding-y: clamp(0.625rem, calc(0.625rem + ((1vw - 0.234375rem) * 0.6483)), 0.875rem);
  --btn-bel-padding-x: clamp(0.75rem, calc(0.75rem + ((1vw - 0.234375rem) * 1.2966)), 1.25rem);
  --burger-size: calc(var(--btn-bel-padding-y) * 2 + var(--font-size-base));
  --top-header-padding-top: var(--spacing-sm);
  --top-header-padding-bottom: var(--spacing-sm);
  --top-tab-padding-y: .55rem;
  --top-tabs-height: calc(var(--font-size-base) + var(--top-tab-padding-y) * 2);
  --top-header-height: calc(
    var(--top-header-padding-top)
    + var(--burger-size)
    + var(--top-header-padding-bottom)
  );
}

/*Spacings*/
.mt-xs {
  margin-top: var(--spacing-xs);
}

.mb-xs {
  margin-bottom: var(--spacing-xs);
}

.mr-xs {
  margin-right: var(--spacing-xs);
}

.ml-xs {
  margin-left: var(--spacing-xs);
}

.mt-sm {
  margin-top: var(--spacing-sm) !important;
}

.mb-sm {
  margin-bottom: var(--spacing-sm);
}

.mr-sm {
  margin-right: var(--spacing-sm);
}

.ml-sm {
  margin-left: var(--spacing-sm);
}

.mt-md {
  margin-top: var(--spacing-md);
}

.mb-md {
  margin-bottom: var(--spacing-md);
}

.mr-md {
  margin-right: var(--spacing-md);
}

.ml-md {
  margin-left: var(--spacing-md);
}

.mt-lg {
  margin-top: var(--spacing-lg);
}

.ml-md {
  margin-left: var(--spacing-md);
}

.mt-lg {
  margin-top: var(--spacing-lg);
}

.mb-lg {
  margin-bottom: var(--spacing-lg);
}

.mr-lg {
  margin-right: var(--spacing-lg);
}

.ml-lg {
  margin-left: var(--spacing-lg);
}

.mt-xl {
  margin-top: var(--spacing-xl);
}

.mb-xl {
  margin-bottom: var(--spacing-xl);
}

.mr-xl {
  margin-right: var(--spacing-xl);
}

.ml-xl {
  margin-left: var(--spacing-xl);
}

.mt-xxl {
  margin-top: var(--spacing-xxl);
}

.mb-xxl {
  margin-bottom: var(--spacing-xxl);
}

.mr-xxl {
  margin-right: var(--spacing-xxl);
}

.ml-xxl {
  margin-left: var(--spacing-xxl);
}

.pt-sm {
  padding-top: var(--spacing-sm);
}

.pb-sm {
  padding-bottom: var(--spacing-sm);
}

.pr-sm {
  padding-right: var(--spacing-sm);
}

.pl-sm {
  padding-left: var(--spacing-sm);
}

.pt-md {
  padding-top: var(--spacing-md);
}

.pb-md {
  padding-bottom: var(--spacing-md);
}

.pr-md {
  padding-right: var(--spacing-md);
}

.pl-md {
  padding-left: var(--spacing-md);
}

.pt-lg {
  padding-top: var(--spacing-lg);
}

.pb-lg {
  padding-bottom: var(--spacing-lg);
}

.pr-lg {
  padding-right: var(--spacing-lg);
}

.pl-lg {
  padding-left: var(--spacing-lg);
}

.pt-xl {
  padding-top: var(--spacing-xl);
}

.pb-xl {
  padding-bottom: var(--spacing-xl);
}

.pt-xxl {
  padding-top: var(--spacing-xxl);
}

.pb-xxl {
  padding-bottom: var(--spacing-xxl);
}

.gap-sm {
  gap: var(--spacing-sm);
}

.gap-md {
  gap: var(--spacing-md);
}

.gap-lg {
  gap: var(--spacing-lg);
}

.gap-xl {
  gap: var(--spacing-xl);
}

.gap-xxl {
  gap: var(--spacing-xxl);
}

.bg-dark-green {
  background-color: var(--dark-green);
}

.bg-gray-dark {
  background-color: var(--gray-dark);
}

.bg-gray {
  background-color: var(--gray);
}

.bg-gray-light {
  background-color: var(--gray-light);
}

.bg-white {
  background-color: var(--white);
}

.text-dark-green {
  color: var(--dark-green);
}

.text-gray-dark {
  color: var(--gray-dark);
}

.text-gray {
  color: var(--gray);
}

.text-gray-light {
  color: var(--gray-light);
}

.text-white {
  color: var(--white);
}

.fw-700 {
  font-weight: var(--fw-700) !important;
}

.fw-800 {
  font-weight: var(--fw-800) !important;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  background-color: var(--white);
  color-scheme: light;
}

:root {
  --fs-vw-min: 375px;
  --fs-vw-max: 1440px;
  --fs-vw-range: calc(var(--fs-vw-max) - var(--fs-vw-min));
  /* Font-size tokens (fluid, direct clamps — 375px → 1440px) */
  --font-size-xl: clamp(5rem, 3.4595rem + 6.5728vw, 9.375rem); /* 80px → 150px */
  --font-size-1: clamp(1.875rem, 1.3248rem + 2.3474vw, 3.4375rem); /* 30px → 55px */
  --font-size-2: clamp(1.5625rem, 1.3424rem + 0.9390vw, 2.1875rem); /* 25px → 35px */
  --font-size-3: clamp(1.125rem, 0.9710rem + 0.6573vw, 1.5625rem); /* 18px → 25px */
  --font-size-base: clamp(0.9375rem, 0.8715rem + 0.2817vw, 1.125rem); /* 15px → 18px */
  --font-size-small: clamp(0.75rem, 0.6840rem + 0.2817vw, 0.9375rem); /* 12px → 15px */
}

:where(.font-size-xl, .font-size-1, .font-size-2, .font-size-3, .font-size-base, .font-size-small) {
  line-height: 1.05;
}

.font-size-xl {
  --fs-min: 5rem; /* 80px */
  --fs-max: 9.375rem; /* 150px */
  font-size: var(--font-size-xl);
}

.font-size-1 {
  --fs-min: 1.875rem; /* 30px */
  --fs-max: 3.4375rem; /* 55px */
  font-size: var(--font-size-1);
}

.font-size-2 {
  --fs-min: 1.5625rem; /* 25px */
  --fs-max: 2.1875rem; /* 35px */
  font-size: var(--font-size-2);
}

.font-size-3 {
  --fs-min: 1.125rem; /* 18px */
  --fs-max: 1.5625rem; /* 25px */
  font-size: var(--font-size-3);
}

.font-size-base {
  --fs-min: 0.9375rem; /* 15px */
  --fs-max: 1.125rem; /* 18px */
  font-size: var(--font-size-base);
}

.font-size-small {
  --fs-min: 0.75rem; /* 12px */
  --fs-max: 0.9375rem; /* 15px */
  font-size: var(--font-size-small);
}

body {
  font-family: var(--font-body);
  color: var(--gray-dark);
  background-color: var(--white);
  -webkit-font-smoothing: antialiased;
  font-size: var(--font-size-base);
}

.perf-section {
  overflow-x: clip;
}

h1,
.h1-display,
.languages-modal .modal-title {
  font-size: var(--font-size-1);
}

h2,
.h2-section {
  font-size: var(--font-size-2);
}

h3,
.h3-card {
  font-size: var(--font-size-3);
}

p,
.text-body-belrobotics {
  font-size: var(--font-size-base);
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--dark-green);
  font-weight: bold;
  line-height: 1.05;
  text-wrap: pretty;
}

h1, h2, .wysiwyg-paragraph {
  margin-block: 1rem;
}

.h-orange {
  color: var(--orange);
}

.jvl-component.align-left {
  justify-content: flex-start !important;
  text-align: left !important;
}
.jvl-component.align-center {
  justify-content: center !important;
  text-align: center !important;
}
.jvl-component.align-right {
  justify-content: flex-end !important;
  text-align: right !important;
}
.jvl-component.heading {
  max-width: min(1720px, 92vw);
  margin-inline: auto;
  padding-inline: 1rem;
}

.component-row-wrapper {
  max-width: min(1720px, 92vw);
  margin-inline: auto;
  padding-inline: 1rem;
}

span[style*="text-decoration: underline"],
span[style*="text-decoration:underline"],
u {
  color: var(--orange);
  text-decoration: none !important;
}

.h1-display,
.languages-modal .modal-title {
  line-height: 1.05;
  font-weight: 700;
}

.blog-hero h1 {
  line-height: 1.05;
  font-weight: 700;
}

.h2-section {
  font-weight: 700;
}

.h3-card {
  font-weight: 700;
}

.text-body-belrobotics {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--gray-dark);
  line-height: 1.55;
  max-width: 610px;
}

.separation-title-left {
  max-width: 800px;
}

body .preview-command-visible .section {
  background-color: transparent;
}

/* ===== Top header ===== */
.top-header {
  padding-top: var(--top-header-padding-top);
  padding-bottom: var(--top-header-padding-bottom);
  /* Breadcrumb is d-none below md; :has() ignores display, so gate on breakpoint.
     Override the token so padding-bottom is 70px — not spacing-sm + 70px. */
}
@media (min-width: 768px) {
  .top-header:has(.breadcrumb-bel) {
    --top-header-padding-bottom: 70px;
  }
}

.logo {
  /* Height: 27px @375 → 41px @1440 (held through 1920). Width follows the SVG viewBox. */
  --min: 1.6875rem;
  --val: calc(1.6875rem + ((1vw - 0.234375rem) * 1.3146));
  --max: 2.5625rem;
  height: clamp(var(--min), var(--val), var(--max));
  width: auto;
  aspect-ratio: 194/31;
}

/* Header buttons row: hidden on mobile (accessible via burger menu), inline on desktop */
.header-buttons {
  display: none;
}
.header-buttons .btn-bel-primary,
.header-buttons .btn-bel-outline {
  height: var(--burger-size);
}

/* Top tabs — hang from the very top of the page, only bottom corners rounded */
.top-tabs {
  padding: 0;
}
.top-tabs .inner {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.top-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: var(--top-tab-padding-y) 1.25rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: filter 0.15s ease;
  line-height: 1;
  /* Language switcher — wireframe globe button next to "Contactez-nous" */
}
.top-tab:hover {
  filter: brightness(0.92);
}
.top-tab.dark {
  background: var(--dark-green);
  color: #fff;
}
.top-tab.dark:hover {
  color: #fff;
}
.top-tab.gray {
  background: var(--gray);
  color: var(--gray-dark);
}
.top-tab.gray:hover {
  color: var(--gray-dark);
}
.top-tab.language-switcher {
  border: 0;
  padding: 0.45rem 0.65rem;
  line-height: 1;
}
.top-tab.language-switcher svg {
  display: block;
  width: 20px;
  height: 20px;
}

/* ============================================================
   Language switcher modal (full-screen "Select your location")
   ============================================================ */
.languages-modal .modal-content,
.languages-modal .languages {
  background: #fff;
  border: 0;
  border-radius: 0;
  min-height: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.languages-modal .languages-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  width: 100%;
  padding-left: clamp(1.25rem, 1.25rem + (1vw - 0.275625rem) * 6.2549, 6.25rem);
  padding-right: clamp(1.25rem, 1.25rem + (1vw - 0.275625rem) * 6.2549, 6.25rem);
  padding-top: calc(var(--top-tabs-height) + var(--top-header-padding-top));
  background: #fff;
}
.languages-modal .languages-navbar .brand {
  display: inline-flex;
}
.languages-modal .languages-navbar .btn-close {
  font-size: var(--font-size-3);
  opacity: 0.6;
}
.languages-modal .languages-navbar .btn-close:hover {
  opacity: 1;
}
.languages-modal .modal-body-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  padding-block: clamp(1rem, 3vh, 2rem);
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.languages-modal .modal-body-wrapper .container-fluid.custom-padding {
  max-width: 1200px;
}
.languages-modal .modal-body {
  margin-block: auto;
  padding-top: clamp(0rem, 2vh, 2rem);
}
.languages-modal .modal-title {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
}
.languages-modal .modal-title.mb-md {
  margin-bottom: clamp(1.25rem, 5vh, 3rem);
}
.languages-modal .modal-title span {
  color: var(--dark-green);
}
.languages-modal .modal-title u {
  color: var(--orange);
}
.languages-modal .country-list-title {
  font-family: var(--font-display);
  color: var(--orange);
  font-size: var(--font-size-2);
  font-weight: 700;
  margin-bottom: clamp(0.75rem, 3vh, 2rem);
}
.languages-modal .mt-sm {
  margin-top: clamp(1.5rem, 5vh, 3rem);
}
.languages-modal .country-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 2.5vh, 1.5rem) clamp(1rem, 2.5vw, 2rem);
}
.languages-modal .country-item {
  font-family: var(--font-display);
  color: var(--dark-green);
  font-size: var(--font-size-3);
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.languages-modal .country-lang-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.9rem;
}
.languages-modal .country-lang-item {
  color: var(--gray-dark);
  font-weight: 500;
  font-size: var(--font-size-base);
  text-decoration: none;
  transition: color 0.15s ease;
}
.languages-modal .country-lang-item:hover {
  color: var(--orange);
}
@media (max-height: 900px) {
  .languages-modal .modal-title {
    font-size: var(--font-size-2);
  }
  .languages-modal .country-list-title {
    font-size: var(--font-size-3);
  }
  .languages-modal .country-item {
    font-size: var(--font-size-base);
  }
  .languages-modal .country-lang-item {
    font-size: var(--font-size-small);
  }
}

/* ===== Buttons ===== */
.btn-bel-primary span,
.btn-bel-outline span,
.btn-bel-ghost span,
.top-tab span,
.footer-bel span {
  white-space: nowrap;
  line-height: 1;
}
.btn-bel-primary a,
.btn-bel-outline a,
.btn-bel-ghost a,
.top-tab a,
.footer-bel a {
  text-decoration: none !important;
}

a.btn-bel-primary,
a.btn-bel-outline,
a.btn-bel-ghost {
  white-space: nowrap;
  line-height: 1;
  text-decoration: none !important;
}

/* Button arrow icon — exact Figma path (↗ diagonal + top-right corner L)
   Uses currentColor via CSS mask so it inherits button text color. */
.btn-arrow {
  display: inline-block;
  flex-shrink: 0;
  width: 13px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 15' fill='none'><path d='M0.5 14.5L13.5 0.5' stroke='black' stroke-width='1.4' stroke-linecap='round'/><path d='M0.5 0.5H13.5V14.5' stroke='black' stroke-width='1.4' stroke-linecap='round'/></svg>") no-repeat center/contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 15' fill='none'><path d='M0.5 14.5L13.5 0.5' stroke='black' stroke-width='1.4' stroke-linecap='round'/><path d='M0.5 0.5H13.5V14.5' stroke='black' stroke-width='1.4' stroke-linecap='round'/></svg>") no-repeat center/contain;
}

.btn-bel-primary {
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: 0;
  /* Padding: 10×12 @375 → 14×20 @992 */
  padding: var(--btn-bel-padding-y) var(--btn-bel-padding-x);
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}
.btn-bel-primary:hover {
  background: #d76a1c;
  color: #fff;
}
.btn-bel-primary u {
  color: inherit;
}

.btn-bel-outline {
  background: #fff;
  color: var(--dark-green);
  font-weight: 700;
  border: 1px solid var(--dark-green);
  border-radius: var(--radius-sm);
  /* Padding: 10×12 @375 → 14×20 @992 */
  padding: var(--btn-bel-padding-y) var(--btn-bel-padding-x);
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}
.btn-bel-outline:hover {
  background: var(--dark-green);
  color: #fff;
}
.btn-bel-outline.overlay-img {
  border: 0;
}

.btn-bel-outline-gray {
  border: 1px solid var(--gray);
  background: var(--white);
  color: var(--dark-green);
  font-size: var(--font-size-base);
  padding: 0.85rem 1.25rem;
}
.btn-bel-outline-gray:hover {
  border: 1px solid var(--dark-green);
}

.btn-bel-ghost {
  background: var(--gray-light);
  color: var(--dark-green);
  font-weight: 700;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0.85rem 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}
.btn-bel-ghost.active, .btn-bel-ghost[aria-selected=true] {
  background: var(--gray-light);
  color: var(--dark-green);
}
.btn-bel-ghost:not(.active):not([aria-selected=true]) {
  background: #fff;
  color: var(--dark-green);
}

/* ===== Navbar ===== */
.navbar-bel {
  background: #fff;
  padding-block: 0.75rem;
}
.navbar-bel .nav-link {
  color: var(--gray-dark);
  font-weight: 500;
}
.navbar-bel .nav-link.active, .navbar-bel .nav-link:hover {
  color: var(--dark-green);
}

/* ===== Burger trigger ===== */
.burger-btn {
  width: var(--burger-size);
  height: var(--burger-size);
  border: 0;
  background: var(--dark-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
  padding: 0;
}
.burger-btn:hover {
  background: #14502a;
}
.burger-btn .bars {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}
.burger-btn .bars span {
  display: block;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
}

/* ===== Offcanvas menu ===== */
.offcanvas.offcanvas-bel {
  background: #fff;
  /* iOS 26 Safari can leave gaps around fixed overlays sized with 100%. */
  inset-block: 0;
  height: auto;
  --bs-offcanvas-width: 100%;
  --bs-offcanvas-border-width: 0;
  width: var(--bs-offcanvas-width);
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 0;
  outline: 0;
  box-shadow: none;
  border-radius: 0;
}
.offcanvas.offcanvas-bel .offcanvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  padding: 3rem 1.5rem 1rem;
  border: 0;
}
.offcanvas.offcanvas-bel .offcanvas-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  padding: 1rem 1.5rem 2rem;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.offcanvas.offcanvas-bel .offcanvas-title {
  color: var(--gray-dark);
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1;
}
.offcanvas.offcanvas-bel .btn-close {
  width: 20px;
  height: 20px;
  margin: 0 0 0 auto;
  padding: 0;
  font-size: var(--font-size-small);
  opacity: 1;
}

/* Bootstrap locks body scrolling, but iOS can keep scrolling the html root. */
html:has(.offcanvas.show),
body:has(.offcanvas.show) {
  overflow: hidden;
  overscroll-behavior: none;
}

/* Keep Bootstrap's dimmer attached to the complete visual viewport on iOS. */
.offcanvas-backdrop {
  inset: 0;
  width: auto;
  height: auto;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 1 !important;
}

.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu-list > li > a,
.menu-list > li > .menu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  color: var(--dark-green);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-size-3);
  text-decoration: none;
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
}
.menu-list > li > a:hover, .menu-list > li > a.active,
.menu-list > li > .menu-toggle:hover,
.menu-list > li > .menu-toggle.active {
  color: var(--orange);
}
.menu-list-secondary {
  margin-top: 2.25rem;
}
.menu-list-secondary > li > a {
  color: var(--gray-dark);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 400;
}

.submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.submenu li a {
  display: block;
  padding: 0.55rem 0;
  color: var(--dark-green);
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
  font-size: var(--font-size-3);
}
.submenu li a:hover, .submenu li a.active {
  color: var(--orange);
}

.menu-panels {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.menu-panels-track {
  display: flex;
  align-items: stretch;
  width: 200%;
  max-width: 200%;
  height: 100%;
  transition: transform 0.35s ease;
}
.menu-panels .menu-panel {
  box-sizing: border-box;
  flex: 0 0 50%;
  width: 50%;
  max-width: 50%;
  min-width: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
}
.menu-panels .menu-panel-main {
  display: flex;
  flex-direction: column;
}
.menu-panels .menu-panel-submenu {
  display: none;
}
.menu-panels .menu-panel-submenu.is-active {
  display: block;
}
.menu-panels.is-submenu-open .menu-panels-track {
  transform: translateX(-50%);
}

.menu-language {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gray-dark);
}
.menu-language svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu-navigation {
  margin-top: 2.25rem;
}

.menu-toggle .chev,
.menu-back i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: calc(var(--radius-sm) / 2);
  background: var(--orange);
  color: #fff;
  opacity: 1;
  font-size: 0;
  line-height: 0;
}
.menu-toggle .chev::before,
.menu-back i::before {
  content: "";
  display: block;
  width: 0.45rem;
  height: 0.45rem;
  border-block-end: 2.5px solid currentColor;
  border-inline-end: 2.5px solid currentColor;
  transform: translateX(-1px) rotate(-45deg);
  opacity: 1;
}

.menu-toggle .chev {
  margin-left: auto;
}

.menu-back {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.25rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gray-dark);
  font-size: var(--font-size-base);
}
.menu-back i::before {
  transform: translateX(1px) rotate(135deg);
}

.menu-cta {
  display: grid;
  gap: 0.65rem;
  margin-top: auto;
  padding-top: 2rem;
}

/* ===== Breadcrumb ===== */
.breadcrumb-bel {
  color: var(--gray-dark);
  font-size: var(--font-size-base);
  padding-top: 50px;
}
.breadcrumb-bel a {
  color: var(--gray-dark);
  text-decoration: none;
}
.breadcrumb-bel a:hover {
  color: var(--dark-green);
}
.breadcrumb-bel .sep {
  color: var(--gray);
  margin-inline: 0.55rem;
}
.breadcrumb-bel .current {
  color: var(--dark-green);
  font-weight: 600;
}

/* ===== Hero (multizone) ===== */
.hero-multizone {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 540px;
  background-size: cover;
  background-position: center;
  background-image: var(--bg-lg);
}
.hero-multizone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 59, 29, 0.05) 0%, rgba(12, 59, 29, 0.18) 100%);
}
.hero-multizone .hero-multizone-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 520px;
  padding: 3rem 1rem;
}
.hero-multizone--image .hero-card .hero-card-body {
  margin-inline: auto;
}

.hero-card {
  position: relative;
  z-index: 2;
  background: #fff;
  border-radius: var(--radius-md);
  max-width: 935px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}
.hero-card h1,
.hero-card h2 {
  line-height: 1.05;
  margin-bottom: 1rem;
}
.hero-card .hero-card-body {
  margin: 0;
}
.hero-card .hero-card-body > p:last-child {
  margin-bottom: 0;
}

/* ===== FAQ category ===== */
.faq-category-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 0;
  aspect-ratio: 1720/600;
  padding: clamp(1.5rem, 4vw, 5rem);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-image: var(--bg-lg);
  background-position: center;
  background-size: cover;
}
.faq-category-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 59, 29, 0) 45%, rgba(12, 59, 29, 0.45) 100%);
}
.faq-category-title {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--white);
}
.faq-category-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}
.faq-category-item {
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--gray-light);
}
.faq-category-item[open] {
  border: 1px solid var(--gray);
  background: var(--white);
}
.faq-category-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-sm);
  padding: clamp(1.5rem, 2.75vw, 3.5rem);
  color: var(--dark-green);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--font-size-3);
  font-weight: var(--fw-700);
  line-height: 1.05;
  list-style: none;
}
.faq-category-item summary::-webkit-details-marker {
  display: none;
}
.faq-category-item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.1rem;
  background: linear-gradient(var(--orange), var(--orange)) center/100% 0.25rem no-repeat, linear-gradient(var(--orange), var(--orange)) center/0.25rem 100% no-repeat;
}
.faq-category-item[open] summary::after {
  background: linear-gradient(var(--orange), var(--orange)) center/100% 0.25rem no-repeat;
}
.faq-category-answer {
  padding: 0 clamp(1.5rem, 2.75vw, 3.5rem) clamp(1.5rem, 2.75vw, 3.5rem);
}
.faq-category-answer > :first-child {
  margin-top: 0;
}
.faq-category-answer > :last-child {
  margin-bottom: 0;
}

/* =============================================================
   Homepage hero swiper — full-bleed image with bottom-left overlay
   (header_slide dynamic component, Figma node 161:1513)
   ============================================================= */
.header-slide-component {
  /* Shared bottom baseline (Figma): 20px @375 → 56px @1400.
     Pagination uses the same var (+ optional offset via calc). */
  --slide-bottom: clamp(1.25rem, calc(1.25rem + ((1vw - 0.234375rem) * 3.5122)), 3.5rem);
  /* Side inset: 20px @375 → 64px @1400 */
  --slide-inset-x: clamp(1.25rem, calc(1.25rem + ((1vw - 0.234375rem) * 4.2927)), 4rem);
  /* Pill width + gap — applied to the CTA only, not the title/text */
  --pagination-reserve: 8rem;
  /* Edit-mode preview (Javlo CMS): stack slides vertically without swiper init */
}
.header-slide-component .hero-swiper {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* Bottom-right pill — same baseline as .slide-content */
}
.header-slide-component .hero-swiper .swiper-slide {
  position: relative;
  aspect-ratio: 1720/854;
  min-height: 420px;
  overflow: hidden;
}
.header-slide-component .hero-swiper .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 59, 29, 0.55) 0%, rgba(12, 59, 29, 0.15) 55%, rgba(12, 59, 29, 0) 55%);
  pointer-events: none;
}
.header-slide-component .hero-swiper .hero-slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.header-slide-component .hero-swiper .swiper-pagination {
  position: absolute;
  left: auto;
  right: var(--slide-inset-x);
  bottom: var(--slide-bottom);
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  background: #fff;
  border: 1px solid var(--dark-green);
  border-radius: 10px;
  z-index: 3;
}
.header-slide-component .hero-swiper .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: transparent;
  border: 1px solid var(--dark-green);
  border-radius: 2px;
  margin: 0;
  opacity: 1;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.header-slide-component .hero-swiper .swiper-pagination .swiper-pagination-bullet-active {
  background: var(--dark-green);
  border-color: var(--dark-green);
}
.header-slide-component .slide-content {
  position: absolute;
  left: var(--slide-inset-x);
  right: var(--slide-inset-x);
  bottom: var(--slide-bottom);
  z-index: 2;
  max-width: none;
  color: var(--gray-light);
  /* nowrap CTAs overflow the box — cap width so the pill never sits on the button */
}
.header-slide-component .slide-content .hero-title {
  color: var(--gray-light);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  margin: 0 0 1.5rem 0;
  max-width: none;
}
.header-slide-component .slide-content .hero-description {
  color: var(--gray-light);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--font-size-base);
  line-height: 1.4;
  margin: 0 0 1.75rem 0;
  max-width: 40rem;
}
.header-slide-component .slide-content .btn-bel-primary {
  white-space: nowrap;
  box-sizing: border-box;
}
.header-slide-component.edit-mode .hero-edit-wrapper {
  display: grid;
  gap: 1rem;
}
.header-slide-component.edit-mode .hero-edit-slide {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1720/854;
  min-height: 360px;
}
.header-slide-component.edit-mode .hero-edit-slide .hero-slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.header-slide-component.edit-mode .hero-edit-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(12, 59, 29, 0.55) 0%, rgba(12, 59, 29, 0.15) 55%, rgba(12, 59, 29, 0) 100%);
}

/* =============================================================
   Product hero — fixed full-bleed image, price + oversized name
   (header_model dynamic component, echorobotics-style)
   ============================================================= */
.header-model-component .hero-product {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1720/854;
  min-height: 420px;
  /* Dark gradient overlay on the bottom-left so the text stays legible */
}
.header-model-component .hero-product::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(12, 59, 29, 0.55) 0%, rgba(12, 59, 29, 0.15) 55%, rgba(12, 59, 29, 0) 100%);
  pointer-events: none;
}
.header-model-component .hero-slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.header-model-component .slide-content {
  position: absolute;
  left: clamp(1.5rem, 5vw, 5rem);
  right: clamp(1.5rem, 5vw, 5rem);
  bottom: clamp(1.5rem, 4vw, 3.5rem);
  z-index: 2;
  color: var(--gray-light);
}
.header-model-component .hero-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-size-3) !important;
  line-height: 1.1;
  margin: 0;
}
.header-model-component .hero-price-note {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.3;
  opacity: 0.85;
  margin: 0.25rem 0 0;
}
.header-model-component .hero-title {
  color: var(--gray-light);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  margin: 0.5rem 0 0;
  max-width: 100%;
  overflow-wrap: break-word;
}
.header-model-component .hero-description {
  color: var(--gray-light);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--font-size-base);
  line-height: 1.4;
  margin: 1rem 0 0;
  max-width: 540px;
}
.header-model-component .btn-bel-primary {
  margin-top: 1.5rem;
}

/* =============================================================
   Mower carousel (page-reference renderer "mower", Figma 265:1640)
   ============================================================= */
.mower-section {
  /* Prev / next nav buttons — orange squares straddling the slider edges,
     vertically centered on the shell (same pattern as .slider-middle-nav). */
  /* Footer row under the carousel: 3-col grid → spacer | CTA centered | pagination right */
  /* Override Swiper's external-pagination defaults (position:absolute; left:0; width:100%).
     Without !important Swiper's rules can win because it adds .swiper-pagination + .swiper-pagination-bullets
     classes to the element on init, alongside ours. */
}
.mower-section .mower-section-title {
  color: var(--dark-green);
  font-family: var(--font-display);
  font-weight: 700;
}
.mower-section .mower-shell {
  position: relative;
  overflow: visible;
}
.mower-section .mower-swiper {
  position: relative;
  /* Swiper.js sets its own clip via .swiper-wrapper transform; keeping overflow:hidden here
     would round off the footer border of the shared card component. */
  overflow: clip;
  padding-bottom: 1px;
  /* Explicit slide widths matching the swiper-init.js breakpoints (1 / 2 / 3 cols).
     Acts as a CSS-only fallback: Swiper's inline width overrides this once initialized. */
}
.mower-section .mower-swiper .swiper-wrapper {
  display: flex;
  align-items: stretch;
}
.mower-section .mower-swiper .swiper-slide {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
  height: auto;
  display: flex;
  box-sizing: border-box;
  /* Same collapse guard as .perf-swiper: the inline-size container has no
     intrinsic width inside the flex slide. */
}
.mower-section .mower-swiper .swiper-slide > .card-wrapper {
  width: 100%;
}
.mower-section .mower-swiper .swiper-slide > .card-wrapper .card-title {
  white-space: nowrap;
}
.mower-section .mower-nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 40px;
  height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--orange);
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.mower-section .mower-nav svg {
  width: 20px;
  height: 24px;
  stroke-width: 3.2;
}
.mower-section .mower-nav:hover {
  background: #d76a1c;
}
.mower-section .mower-nav.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}
.mower-section .mower-nav--prev {
  left: 0;
  transform: translate(-50%, -50%);
}
.mower-section .mower-nav--prev:active {
  transform: translate(-50%, -50%) scale(0.96);
}
.mower-section .mower-nav--next {
  right: 0;
  transform: translate(50%, -50%);
}
.mower-section .mower-nav--next:active {
  transform: translate(50%, -50%) scale(0.96);
}
.mower-section .mower-footer-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.mower-section .mower-section-cta {
  grid-column: 2;
  justify-self: center;
}
.mower-section .mower-pagination {
  grid-column: 3;
  justify-self: end;
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  width: auto !important;
  transform: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  background: #fff;
  border: 1px solid var(--dark-green);
  border-radius: 10px;
  box-sizing: content-box;
}
.mower-section .mower-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: transparent;
  border: 1px solid var(--dark-green);
  border-radius: 2px;
  margin: 0;
  opacity: 1;
  transition: background 0.2s ease;
}
.mower-section .mower-pagination .swiper-pagination-bullet-active {
  background: var(--dark-green);
}

/* Shared model-card anatomy. Variants only define their footer content. */
.models-grid .card,
.mower-swiper .card,
.perf-swiper .card {
  background: var(--white);
}
.models-grid .card .card-body,
.mower-swiper .card .card-body,
.perf-swiper .card .card-body {
  order: 1;
  position: relative;
  overflow: hidden;
  background: var(--gray-light);
}
.models-grid .card .card-header,
.mower-swiper .card .card-header,
.perf-swiper .card .card-header {
  order: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin: 0;
  background: var(--white);
  border: 1px solid var(--gray-dark);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.models-grid .card .card-title,
.models-grid .card .title,
.mower-swiper .card .card-title,
.mower-swiper .card .title,
.perf-swiper .card .card-title,
.perf-swiper .card .title {
  margin: 0;
  color: var(--dark-green) !important;
  font-family: var(--font-display);
  font-weight: 700;
}
.models-grid .card .card-action,
.mower-swiper .card .card-action,
.perf-swiper .card .card-action {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  flex: 0 0 auto;
}

.pref-swiper .card .card-body {
  padding: 0 !important;
}

/* Homepage model cards: title and CTA only. */
.mower-swiper .card .card-body,
.perf-swiper .card .card-body {
  aspect-ratio: 540/430;
  padding: 0 !important;
}
.mower-swiper .card .card-body img,
.perf-swiper .card .card-body img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.mower-swiper .card .card-header,
.perf-swiper .card .card-header {
  /* Padding: 20px @375 → 30px @1400 */
  padding: clamp(1.25rem, 1.25rem + (1vw - 0.234375rem) * 0.9756, 1.875rem);
}
.mower-swiper .card .card-title,
.perf-swiper .card .card-title {
  font-size: var(--font-size-2);
  line-height: 1;
}

/* Leasing cards reuse the same media and footer but replace the CTA with terms. */
.leasing-grid .card .card-body,
.leasing-swiper .card .card-body {
  aspect-ratio: 540/430;
}
.leasing-grid .card .card-header,
.leasing-swiper .card .card-header {
  min-height: 135px;
  padding: 0;
  overflow: hidden;
  color: var(--white);
  background: #000;
  border-color: #000;
}
.leasing-grid .card .card-meta,
.leasing-swiper .card .card-meta {
  padding: 1.5rem;
}
.leasing-grid .card .card-title,
.leasing-swiper .card .card-title {
  color: var(--dark-green);
}
.leasing-grid .card .card-financials,
.leasing-swiper .card .card-financials {
  align-self: stretch;
  padding: 1.5rem;
  color: var(--white);
  background: var(--orange);
}

/* Reference cards share the base card structure and expand to three columns when space allows. */
.news-grid,
.cta-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: var(--spacing-sm);
}

.cta-cards-grid {
  position: relative;
  z-index: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 550px), 1fr));
}

.news-grid .card-wrapper .card .card-image img,
.swiper .swiper-wrapper .swiper-slide .card-wrapper .card .card-image img {
  transition: transform 0.4s ease;
}

.models-section .models-grid a.card-link:hover .card-wrapper .card .card-body,
.mower-swiper .swiper-slide a.card-link:hover .card-wrapper .card .card-body {
  transform: scale(1.05);
}

/* =============================================================
   Models archive — Echo card and filter structure, Belrobotics skin
   ============================================================= */
.models-section {
  align-items: flex-start;
  gap: calc(var(--base-spacing) * 8);
  padding-top: var(--spacing-lg);
}
.models-section .filters {
  max-width: 380px;
  width: 100%;
}
.models-section .models-grid {
  z-index: 0;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 1.25rem + (1vw - 0.875rem) * 3.75, 2rem);
}
.models-section .models-grid a.card-link {
  color: inherit;
}
.models-section .models-grid a.card-link[hidden] {
  display: none;
}
.models-section .models-grid a.card-link:hover .card-wrapper .card .card-body::before, .models-section .models-grid a.card-link:focus-visible .card-wrapper .card .card-body::before {
  transform: scale(1.05);
}
.models-section .models-grid a.card-link .card-wrapper .card {
  position: relative;
  height: auto;
  gap: 0;
}
.models-section .models-grid a.card-link .card-wrapper .card .card-header {
  position: static;
  z-index: 1;
  min-height: 160px;
  padding: 1.875rem;
}
.models-section .models-grid a.card-link .card-wrapper .card .card-header .card-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  color: var(--dark-green);
}
.models-section .models-grid a.card-link .card-wrapper .card .card-header .card-meta .title {
  margin: 0 0 var(--base-spacing);
  color: var(--dark-green);
  font-family: var(--font-display);
  font-weight: 700;
}
.models-section .models-grid a.card-link .card-wrapper .card .card-header .card-meta .card-details {
  align-items: flex-start;
}
.models-section .models-grid a.card-link .card-wrapper .card .card-header .card-meta .card-details p {
  margin-bottom: 0.25rem;
  color: var(--gray-dark);
  font-weight: 400;
  text-align: left;
}
.models-section .models-grid a.card-link .card-wrapper .card .card-header .card-meta .card-details mark {
  padding: 0;
  color: var(--orange);
  background: transparent;
  font-weight: 700;
}
.models-section .models-grid a.card-link .card-wrapper .card .card-body {
  position: static;
  aspect-ratio: 540/430;
  overflow: visible;
  padding: 0;
  background: var(--card-image) top center/cover no-repeat;
  transition: transform 0.4s ease;
}
.models-section .models-grid a.card-link .card-wrapper .card .card-body .btn {
  position: absolute;
  z-index: 3;
  right: 1.875rem;
  bottom: 1.875rem;
  color: var(--dark-green);
  border: 1px solid var(--dark-green);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-weight: 700;
}
.models-section .models-grid a.card-link .card-wrapper .card .card-body::before {
  display: none;
}

.models-grid-wrapper {
  container-type: inline-size;
  container-name: models-grid-wrapper;
  width: 100%;
}
.models-grid-wrapper #no-results-message {
  display: none;
}

@container models-grid-wrapper (min-width: 680px) {
  .models-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
.filters-btn {
  width: 100%;
}

.card-link {
  text-decoration: none;
}

.card-wrapper {
  container-name: card-wrapper;
  container-type: inline-size;
}

/* Base shared by every Echo-style card. Grid-specific geometry and visual
   treatments belong to the grid that uses the card. */
.card {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-lg);
}

.filter-panel {
  padding-inline: var(--spacing-sm);
}
.filter-panel .filter-header {
  margin-bottom: calc(var(--base-spacing) * 3);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.filter-panel .filter-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: calc(var(--base-spacing) * 3);
  width: 100%;
  padding-top: calc(var(--base-spacing) * 3);
}
.filter-panel .filter-actions .btn {
  width: 100%;
  line-height: 1;
  font-weight: 600;
}

.filter-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  width: 100%;
}
.filter-wrapper .filter-group-item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.25rem;
  border: 1px solid var(--gray-dark);
  border-radius: var(--radius-sm);
}
.filter-wrapper .filter-group-item summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-sm);
  cursor: pointer;
  list-style: none;
}
.filter-wrapper .filter-group-item summary::-webkit-details-marker {
  display: none;
}
.filter-wrapper .filter-group-item summary span {
  color: var(--dark-green);
  font-size: var(--font-size-base);
  font-weight: 700;
}
.filter-wrapper .filter-group-item .filter-toggle-icon {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-left: 1.5rem;
  stroke: var(--dark-green);
}
.filter-wrapper .filter-group-item .bottom {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(var(--base-spacing) * 4);
  padding-top: calc(var(--base-spacing) * 3);
}
.filter-wrapper .filter-group-item[open] .icon-line-vertical {
  opacity: 0;
}
.filter-wrapper .form-check {
  padding-left: 1.5em;
}
.filter-wrapper .form-check-input {
  accent-color: var(--dark-green);
}

.form-check-input:checked {
  background-color: var(--gray-dark);
  border-color: var(--gray-dark);
}

.range-slider {
  width: 100%;
}
.range-slider .range-values {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-bottom: 0.75rem;
  color: var(--gray-dark);
}
.range-slider .range-controls {
  position: relative;
  height: 1.5rem;
}
.range-slider .range-controls::before {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  left: 0.5rem;
  height: 2px;
  content: "";
  background: var(--gray-dark);
  transform: translateY(-50%);
}
.range-slider .custom-range {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 1.5rem;
  margin: 0;
  pointer-events: none;
  appearance: none;
  background: transparent;
}
.range-slider .custom-range::-webkit-slider-runnable-track {
  height: 2px;
  background: transparent;
}
.range-slider .custom-range::-moz-range-track {
  height: 2px;
  background: transparent;
}
.range-slider .custom-range::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -0.4375rem;
  pointer-events: auto;
  appearance: none;
  border: 0;
  border-radius: 3px;
  background: var(--gray-dark);
  cursor: grab;
}
.range-slider .custom-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  pointer-events: auto;
  border: 0;
  border-radius: 3px;
  background: var(--gray-dark);
  cursor: grab;
}
.range-slider .custom-range:focus-visible {
  outline: none;
}
.range-slider .custom-range:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--dark-green);
  outline-offset: 2px;
}
.range-slider .custom-range:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--dark-green);
  outline-offset: 2px;
}

/* =============================================================
   Slider middle (page-reference renderer "slider-middle")
   Resource cards: full-image tile with dark gradient overlay at the
   bottom, title + circular arrow button anchored bottom-left/right.
   No description, no body panel. Desktop shows two cards plus a sliver of
   the next one inside the track (fractional slidesPerView in swiper-init.js).
   The track is viewport-wide so cuts always happen at the window edges.
   Padding-left matches the content gutter: at rest the first slide stays
   aligned with the title; once scrolled, the leftover slide peeks to left: 0.
   ============================================================= */
.slider-middle-section {
  overflow-x: clip;
  --slider-left-inset: calc(
    clamp(1.25rem, calc(1.25rem + ((1vw - 0.275625rem) * 6.2549)), 6.25rem)
    + max(0px, (100vw - 1920px) / 2)
  );
  /* Footer row under the carousel: pagination anchored to the right */
  /* Prev sits on the content gutter (first-slide edge). Next sits on the
     right peek, inset from the viewport. */
}
.slider-middle-section .slider-middle-title {
  color: var(--dark-green);
  font-family: var(--font-display);
  font-weight: 700;
}
.slider-middle-section .slider-middle-shell {
  position: relative;
  overflow: clip;
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-1 * var(--slider-left-inset));
  padding-left: var(--slider-left-inset);
}
.slider-middle-section .slider-middle-swiper {
  position: relative;
  overflow: visible;
}
.slider-middle-section .slider-middle-swiper .swiper-wrapper {
  display: flex;
  align-items: stretch;
}
.slider-middle-section .slider-middle-swiper .swiper-slide {
  height: auto;
  display: flex;
  box-sizing: border-box;
}
.slider-middle-section .slider-middle-swiper .swiper-slide > .card-link {
  display: flex;
  width: 100%;
}
.slider-middle-section .slider-middle-swiper .swiper-slide > .card-link > .card-wrapper {
  width: 100%;
}
.slider-middle-section .slider-middle-footer-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 2.5rem;
}
.slider-middle-section .slider-middle-pagination {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  transform: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  background: #fff;
  border: 1px solid var(--dark-green);
  border-radius: 10px;
}
.slider-middle-section .slider-middle-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: transparent;
  border: 1px solid var(--dark-green);
  border-radius: 2px;
  margin: 0;
  opacity: 1;
  transition: background 0.2s ease;
}
.slider-middle-section .slider-middle-pagination .swiper-pagination-bullet-active {
  background: var(--dark-green);
}
.slider-middle-section .slider-middle-nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 40px;
  height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--orange);
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.slider-middle-section .slider-middle-nav svg {
  width: 20px;
  height: 24px;
  stroke-width: 3.2;
}
.slider-middle-section .slider-middle-nav:hover {
  background: #d76a1c;
}
.slider-middle-section .slider-middle-nav.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}
.slider-middle-section .slider-middle-nav--prev {
  left: var(--slider-left-inset);
  transform: translate(-50%, -50%);
}
.slider-middle-section .slider-middle-nav--prev:active {
  transform: translate(-50%, -50%) scale(0.96);
}
.slider-middle-section .slider-middle-nav--next {
  right: 0;
  transform: translate(-50%, -50%);
}
.slider-middle-section .slider-middle-nav--next:active {
  transform: translate(-50%, -50%) scale(0.96);
}

/* =============================================================
   Large slider (page-reference renderer "large-slider", Figma 1:899)
   Each slide = full-width background image with dark gradient overlay,
   white card anchored bottom-right with icon + title + description + CTA.
   Orange chevron arrows flank the slider on the container edges.
   ============================================================= */
.large-slider-section {
  /* Orange chevron navigation buttons — square, small (Figma 40x45px), straddling the
     image edge (half-inside, half-outside) and vertically centered on the slider shell. */
  /* Pagination — small squares on white pill, bottom-right inside the slider shell
     (Figma 1:916: pagination floats over the slide image, anchored bottom-right) */
}
.large-slider-section .large-slider-title {
  color: var(--dark-green);
  font-family: var(--font-display);
  font-weight: 700;
}
.large-slider-section .large-slider-shell {
  position: relative;
  overflow: visible;
}
.large-slider-section .large-slider-swiper {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.large-slider-section .large-slider-swiper .swiper-wrapper {
  align-items: stretch;
}
.large-slider-section .large-slider-swiper .swiper-slide {
  height: auto;
}
.large-slider-section .large-slider-nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 40px;
  height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-sm); /* 10px, slight rounding */
  background: var(--orange);
  color: #fff;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.large-slider-section .large-slider-nav svg {
  width: 20px;
  height: 24px;
  stroke-width: 3.2;
}
.large-slider-section .large-slider-nav:hover {
  background: #d76a1c;
}
.large-slider-section .large-slider-nav.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}
.large-slider-section .large-slider-nav--prev {
  left: 0;
  transform: translate(-50%, -50%);
}
.large-slider-section .large-slider-nav--prev:active {
  transform: translate(-50%, -50%) scale(0.96);
}
.large-slider-section .large-slider-nav--next {
  right: 0;
  transform: translate(50%, -50%);
}
.large-slider-section .large-slider-nav--next:active {
  transform: translate(50%, -50%) scale(0.96);
}
.large-slider-section .large-slider-pagination {
  position: absolute !important;
  left: auto !important;
  top: auto !important;
  right: clamp(1rem, 2.5vw, 2.5rem) !important;
  bottom: clamp(1rem, 2.5vw, 2.5rem) !important;
  width: auto !important;
  transform: none !important;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  background: #fff;
  border-radius: 10px;
}
.large-slider-section .large-slider-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: transparent;
  border: 1px solid var(--dark-green);
  border-radius: 2px;
  margin: 0;
  opacity: 1;
  transition: background 0.2s ease;
}
.large-slider-section .large-slider-pagination .swiper-pagination-bullet-active {
  background: var(--dark-green);
}

/* The slide itself — image + gradient + card overlay.
   ≥1400: one stack (media + card) = 645px. Below that, hanging layout
   in _responsive.scss sizes __media with a 345→645 fluid clamp. */
.large-slide {
  --large-slide-media-min-height: clamp(
    345px,
    calc(345px + (100vw - 375px) * 300 / 1025),
    645px
  );
  position: relative;
  height: 645px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  /* Gradient overlay: dark on the left, fades to transparent past the middle
     (Figma 1:926: from rgba(0,0,0,0.5) → rgba(48,48,48,0.53) at 57% → rgba(102,102,102,0)) */
  /* White card anchored right, vertically centered — always inset inside the image */
  /* Desktop: icon stacked above the title (mobile switches to a row) */
}
.large-slide__media {
  position: absolute;
  inset: 0;
}
.large-slide__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.large-slide__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, rgba(48, 48, 48, 0.4) 75%, rgba(102, 102, 102, 0.5) 100%);
}
.large-slide__card {
  --large-slide-card-inset: clamp(1.25rem, 3vw, 3rem);
  /* 30px @375 → 50px @1200 */
  --large-slide-card-padding: clamp(30px, calc(30px + (100vw - 375px) * 20 / 825), 50px);
  position: absolute;
  top: 50%;
  right: var(--large-slide-card-inset);
  transform: translateY(-50%);
  box-sizing: border-box;
  width: min(564px, 100% - 2 * var(--large-slide-card-inset));
  max-width: min(564px, 100% - 2 * var(--large-slide-card-inset));
  max-height: calc(100% - 2 * var(--large-slide-card-inset));
  overflow: auto;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray);
  padding: var(--large-slide-card-padding);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  z-index: 2;
}
.large-slide__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
}
.large-slide__icon {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--orange);
}
.large-slide__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.large-slide__title {
  color: var(--dark-green);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  margin: 0;
}
.large-slide__description {
  color: var(--gray-dark);
  font-family: var(--font-body);
  line-height: 1.4;
  margin: 0;
}
.large-slide__cta {
  align-self: flex-end;
}

/* ===== Alternating feature sections ===== */
.feature-block .feature-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 688/492;
  background-size: cover;
  background-position: center;
}
.feature-block .feature-img.wide {
  aspect-ratio: 834/407;
}

/* bloc_image dynamic component — Same visual treatment as multizone.html feature-img:
   - width: 100% of the column
   - rounded corners (var(--radius-lg) = 20px)
   - fixed aspect-ratio 3:2 matching the "bloc" Javlo image filter (1200x800)
   - <img> with object-fit:cover so the image fills the frame without deformation,
     whatever the source's native ratio. */
.bloc-image-component {
  /* Alternating proportions driven by the JSP counter — exact Figma dimensions:
     square 614x492 (~5:4), wide 834x407 (~2:1), rectangle 835x601 (~7:5). */
}
.bloc-image-component .bloc-image-media {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 3/2; /* fallback when [data-shape] is absent */
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--gray-light);
}
.bloc-image-component .bloc-image-media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.bloc-image-component .bloc-image-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.bloc-image-component[data-shape=square] .bloc-image-media {
  aspect-ratio: 614/492;
}
.bloc-image-component[data-shape=wide] .bloc-image-media {
  aspect-ratio: 834/407;
}
.bloc-image-component[data-shape=rectangle] .bloc-image-media {
  aspect-ratio: 835/601;
}

/* full_image — one content-width image. Same radius as the CTA banner, no card.
   Frame matches the "full" / "full_sm" image filters. */
.full-image-component .full-image-media {
  display: block;
  width: 100%;
  aspect-ratio: 1720/780;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--gray-light);
}
.full-image-component .full-image-media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.full-image-component .full-image-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.full-image-component .full-image-media--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-dark);
}

/* Desktop layout: custom flex so all images share the same height (their width
   then varies per aspect-ratio), and the gap between image and text is a real,
   visible amount (target 400px on wide screens, clamped down on narrower ones).
   The "square" shape is the narrowest tile — on that one we also pull the text
   further away from the outer page edge so it doesn't hug the wall. */
/* ===== Feature cards (4-up) ===== */
.feature-card-bel {
  background: #fff;
  border: 1px solid var(--gray);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  height: 100%;
}
.feature-card-bel .icon-wrap {
  width: 70px;
  height: 70px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.feature-card-bel .icon-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.feature-card-bel h3 {
  line-height: 1.25;
  margin-bottom: 0.75rem;
}
.feature-card-bel p {
  color: var(--gray-dark);
  font-size: var(--font-size-base);
}

/* ===== Discover cards (image + title + text + "Je découvre" button, side by side) ===== */
.discover-card {
  display: flex;
  gap: clamp(1.25rem, 2vw, 2rem);
  min-height: 290px;
  height: 100%;
  background: #fff;
  border: 1px solid var(--gray);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2vw, 1.75rem);
}
.discover-card-media {
  flex: 0 0 clamp(180px, 35%, 280px);
  align-self: stretch;
  min-height: 230px;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.discover-card-media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.discover-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.discover-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
  padding-block: 0.5rem;
}
.discover-card-title {
  line-height: 1.2;
  margin: 0 0 1rem;
}
.discover-card-text {
  color: var(--gray-dark);
  line-height: 1.35;
  margin-bottom: 1rem;
}
.discover-card-cta {
  margin-top: auto;
}

/* ===== Homepage model cards (page-reference slider) ===== */
.perf-swiper {
  padding-bottom: 0;
  overflow: visible; /* peek slides past container; clipping happens on .perf-section */
}
.perf-swiper .swiper-slide {
  height: auto;
  display: flex;
  /* Flex items shrink to max-content, and .card-wrapper (inline-size container)
     contributes no intrinsic width: without explicit widths the card collapses to 0. */
}
.perf-swiper .swiper-slide .card-link {
  display: flex;
  width: 100%;
}
.perf-swiper .swiper-slide .card-wrapper {
  width: 100%;
}
.perf-swiper .swiper-slide .card {
  height: 100%;
}

.perf-pagination.swiper-pagination,
.perf-pagination {
  display: inline-flex !important;
  gap: 0.65rem;
  align-items: center;
  background: #fff;
  border: 1px solid var(--gray-dark);
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius-sm);
  position: relative !important;
  width: auto !important;
  bottom: auto !important;
  left: auto !important;
  text-align: left;
}
.perf-pagination.swiper-pagination .swiper-pagination-bullet,
.perf-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid var(--dark-green);
  background: #fff;
  opacity: 1;
  margin: 0 !important;
  transition: background 0.15s ease;
}
.perf-pagination.swiper-pagination .swiper-pagination-bullet-active,
.perf-pagination .swiper-pagination-bullet-active {
  background: var(--dark-green);
}

/* ===== CTA banner ===== */
.cta-banner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 650px !important;
  height: 750px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1rem;
}
.cta-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.cta-card {
  position: relative;
  z-index: 2;
  background: #fff;
  border-radius: var(--radius-md);
  max-width: 564px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
}
.cta-card h2 {
  font-size: var(--font-size-2);
  line-height: 1.15;
  margin-bottom: 1.5rem;
}

/* ===== FAQ accordion ===== */
.faq-section > .container-fluid {
  max-width: 1130px;
}
.faq-section h2 {
  text-align: center;
  margin: 0;
}
.faq-section .accordion-bel {
  margin-top: 0;
}

.accordion-bel .accordion-header {
  margin: 0;
}
.accordion-bel .accordion-item {
  border: 1px solid var(--gray-dark);
  border-radius: var(--radius-sm);
  margin-bottom: 0.75rem;
  overflow: hidden;
  background: #fff;
}
.accordion-bel .accordion-button {
  background: #fff;
  color: var(--gray-dark);
  font-weight: 700;
  font-size: var(--font-size-base);
  padding: 1.25rem 1.5rem;
  box-shadow: none !important;
}
.accordion-bel .accordion-button:not(.collapsed) {
  color: var(--dark-green);
}
.accordion-bel .accordion-button::after {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background-image: none;
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--font-size-2);
  font-weight: 400;
  line-height: 1;
  color: var(--gray-dark);
  transition: color 0.2s ease;
  transform: none;
}
.accordion-bel .accordion-button:not(.collapsed)::after {
  content: "−";
  color: var(--dark-green);
  transform: none;
}
.accordion-bel .accordion-body {
  color: var(--gray-dark);
  padding: 0 1.5rem 1.25rem;
}

/* ===== Footer ===== */
.footer-bel {
  background: #fff;
  border: 1px solid var(--gray);
  border-radius: var(--radius-md);
  padding: clamp(2rem, 4vw, 3rem);
  color: var(--gray-dark);
  /* Sponsor logos (e.g. FFA on the Belgian languages): content-managed, stacked under the brand logo. */
}
.footer-bel h6 {
  color: var(--dark-green);
  font-weight: 700;
  font-size: var(--font-size-base);
  margin-bottom: 1rem;
  text-transform: none;
}
.footer-bel .font-title {
  font-weight: 600;
}
.footer-bel a {
  color: var(--gray-dark);
  text-decoration: none;
  display: block;
  padding: 0.25rem 0;
}
.footer-bel a:hover {
  color: var(--dark-green);
}
.footer-bel a.nav-link.font-title {
  font-weight: 600;
}
.footer-bel .footer-divider {
  border-top: 1px solid var(--gray);
  margin: 2rem 0 1.25rem;
}
.footer-bel .legal {
  font-size: var(--font-size-small);
  color: var(--gray-dark);
}
.footer-bel .legal a {
  display: inline;
  padding: 0;
}
.footer-bel .footer-logo {
  height: 48px;
  width: auto;
}
.footer-bel .footer-identity {
  flex: 0 0 auto;
  gap: 1.5rem;
}
.footer-bel .footer-brand {
  padding: 0;
}
.footer-bel #footer {
  min-width: 0;
}
.footer-bel #footer > * {
  width: 100%;
}
.footer-bel #sponsors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}
.footer-bel #sponsors a {
  padding: 0;
}
.footer-bel #sponsors img {
  height: 4rem;
  width: auto;
  max-width: 100%;
}
.footer-bel #sponsors .component-row-wrapper {
  padding-inline: 0;
}

.official-partner {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

/* ===== Section spacing & container ===== */
.section-tight {
  padding-block: var(--spacing-lg);
}

#content > .section-tight {
  padding-block: calc(var(--spacing-md) / 2);
}
#content > .section-tight:first-child {
  padding-top: var(--spacing-lg);
}
#content > .section-tight:last-child {
  padding-bottom: var(--spacing-lg);
}

/*From echo*/
.container-fluid.custom-padding {
  width: 100%;
  /* 1720px usable content width with 100px outer gutters at the widest size. */
  max-width: 1920px;
  padding-left: var(--custom-padding-x);
  padding-right: var(--custom-padding-x);
  min-height: 0vw;
}
.container-fluid.custom-padding.small-wrapper {
  max-width: 1720px;
  padding-left: 20px;
  padding-right: 20px;
}

/* ===== Homepage outer rhythm =====
   Keep this scoped to the composed homepage sections. Container gutters,
   grids, cards, sliders and component internals retain their existing values. */
.home-page .section-tight,
.home-page #content > .section-tight {
  padding-block: var(--section-padding);
}

#content section.intro-component,
#content section.separation-title-component,
#content section.separation-title,
.home-page #content section.intro-component,
.home-page #content section.separation-title-component,
.home-page #content section.separation-title {
  padding-top: var(--intro-padding-top);
  padding-bottom: var(--intro-padding-bottom);
}

/* First rendered hero / FAQ: no top padding — header (incl. breadcrumb)
   already owns the offset. Ignore any number of Javlo placeholders that
   contain only comments, whitespace, scripts or styles. */
#content > :nth-child(1 of :has(> :not(script, style))):is(section.separation-title-component, section.separation-title, section.faq-category), #content > :nth-child(1 of :has(> :not(script, style))).jvl-component :is(section.separation-title-component, section.separation-title, section.faq-category) {
  padding-top: 0;
}

#content section.intro-component,
.home-page #content section.intro-component {
  padding-top: 0;
}

/* Javlo wraps the intro renderer in an extra div. Zero the intro bottom only
   when the next block is a separation title, which already owns that gap. */
#content .jvl-component:has(section.intro-component):has(+ :is(section.separation-title-component, section.separation-title)) section.intro-component {
  padding-bottom: 0;
}

/* A separation title's padding is the gap. Drop the next block's top spacing
   so it does not stack on --intro-padding-bottom. CTA keeps its own rhythm. */
#content :is(section.separation-title-component, section.separation-title) + .section-tight:not(.cta-section) {
  margin-top: 0;
  padding-top: 0;
}
#content :is(section.separation-title-component, section.separation-title) + .jvl-component:not(:has(.cta-section)) section.section-tight:first-of-type:not(.cta-section) {
  margin-top: 0;
  padding-top: 0;
}

#content .cta-section {
  padding-block: var(--cta-section-padding);
}

/* Footer offset for a block that has no padding of its own, and only when it
   is the last content. FAQ questions share one section (previousSame/nextSame);
   the offset stays on that section, never on .accordion-item. Resource cards
   are wrapped by Javlo in .jvl-component; the offset goes on the section.
   A later section or CTA keeps its own spacing. The CMS end-area is ignored. */
#content > .faq-section:not(:has(~ :is(section, .jvl-component))),
#content > .page-reference-cards:not(:has(~ :is(section, .jvl-component))),
#content > .jvl-component:not(:has(~ :is(section, .jvl-component))) > .page-reference-cards {
  padding-bottom: var(--footer-margin-top);
}

/* CTA owns the gap: collapse neighbor paddings on the shared edge so
   --cta-section-padding is the only survivor (same idea as intro → separation). */
#content .section-tight:has(+ .cta-section),
#content .jvl-component:has(+ .cta-section) {
  padding-bottom: 0;
}

#content .cta-section + .separation-title-component,
#content .cta-section + .separation-title,
#content .cta-section + .section-tight,
#content .jvl-component:has(.cta-section) + .separation-title-component,
#content .jvl-component:has(.cta-section) + .section-tight {
  padding-top: 0;
}

/* ===== Mobile tweaks ===== */
/* ============================================================
   Blog page
   ============================================================ */
/* Javlo native date and taxonomy-display components (blog articles). They
   render outside any container: align them on the .container-fluid.custom-padding
   gutter. Date sits above the intro hero, taxonomy just below it. */
#content .jvl-component.date, #content .jvl-component.taxonomy-display {
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  padding-inline: var(--custom-padding-x);
}
#content .jvl-component.date {
  margin-bottom: var(--spacing-xs);
  color: var(--gray-dark);
  font-family: var(--font-text);
  font-size: var(--font-size-small);
  line-height: 1.05;
  text-align: right;
}
#content .jvl-component.taxonomy-display {
  margin-bottom: var(--spacing-md);
  /* Same pill as .card-tag. Javlo outputs Bootstrap .badge.bg-secondary,
     whose utility background is !important. */
}
#content .jvl-component.taxonomy-display .taxonomy {
  width: 100%;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-xs);
}
#content .jvl-component.taxonomy-display .label {
  display: inline-flex;
  padding: 0.35rem 0.625rem;
  color: var(--white);
  border-radius: var(--radius-sm);
  background-color: var(--orange) !important;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: 1;
}

/* Filter cards in the sidebar */
.filter-heading {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--dark-green);
  font-size: var(--font-size-3);
  margin-bottom: 1rem;
}

.filter-card {
  border: 1px solid var(--gray-dark);
  border-radius: var(--radius-sm);
  background: #fff;
  margin-bottom: 1rem;
  overflow: hidden;
}

.filter-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--dark-green);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-size-3);
  width: 100%;
  padding: 1rem 1.25rem;
  cursor: pointer;
  text-align: left;
}
.filter-toggle::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 3px;
  background: var(--dark-green);
  margin-left: 1rem;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  position: relative;
}
.filter-toggle.collapsed::after {
  /* + sign when collapsed: extra vertical bar via box-shadow */
  box-shadow: 0 0 0 0 transparent;
  background: linear-gradient(var(--dark-green), var(--dark-green)), linear-gradient(var(--dark-green), var(--dark-green));
  background-position: center, center;
  background-size: 20px 3px, 3px 20px;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
}
.filter-toggle:not(.collapsed)::after {
  /* − sign when expanded */
  background: var(--dark-green);
  width: 20px;
  height: 3px;
}

.filter-list {
  list-style: none;
  padding: 0 1.25rem 1rem;
  margin: 0;
}
.filter-list li {
  padding: 0.35rem 0;
}
.filter-list label {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  cursor: pointer;
  color: var(--gray-dark);
  font-size: var(--font-size-base);
  font-family: var(--font-body);
  font-weight: 400;
}
.filter-list input[type=checkbox], .filter-list input[type=radio] {
  appearance: none;
  -webkit-appearance: none;
  width: 25px;
  height: 25px;
  background: var(--gray);
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  margin: 0;
  border: 0;
}
.filter-list input[type=checkbox]:checked, .filter-list input[type=radio]:checked {
  background: var(--dark-green);
}
.filter-list input[type=checkbox]:checked::after, .filter-list input[type=radio]:checked::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg) translate(2px, -2px);
}

.btn-bel-outline.reset-filters {
  width: 100%;
  justify-content: center;
  color: var(--gray-dark);
  border-color: var(--gray-dark);
}
.btn-bel-outline.reset-filters:hover {
  background: var(--gray-dark);
  color: #fff;
}

/* Image-overlay cards keep the shared card anatomy: body = media, header = content. */
.page-reference-cards .card--image-overlay,
.slider-middle-section .card--image-overlay,
.perf-section .card--image-overlay {
  position: relative;
  height: 100%;
  background: var(--gray-light);
  transition: transform 0.25s ease;
}
.page-reference-cards .card--image-overlay .card-body,
.slider-middle-section .card--image-overlay .card-body,
.perf-section .card--image-overlay .card-body {
  position: relative;
  order: 1;
  padding: 0;
  overflow: hidden;
  background: var(--gray-light);
  aspect-ratio: 540/380;
}
.page-reference-cards .card--image-overlay .card-body::after,
.slider-middle-section .card--image-overlay .card-body::after,
.perf-section .card--image-overlay .card-body::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 39.88%, rgba(102, 102, 102, 0) 100%);
  pointer-events: none;
}
.page-reference-cards .card--image-overlay .card-body img,
.slider-middle-section .card--image-overlay .card-body img,
.perf-section .card--image-overlay .card-body img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
}
.page-reference-cards .card--image-overlay .card-header,
.slider-middle-section .card--image-overlay .card-header,
.perf-section .card--image-overlay .card-header {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: clamp(1rem, 2vw, 1.75rem);
  color: var(--white);
  background: transparent;
  border: 0;
}
.page-reference-cards .card--image-overlay .card-meta,
.slider-middle-section .card--image-overlay .card-meta,
.perf-section .card--image-overlay .card-meta {
  min-width: 0;
}
.page-reference-cards .card--image-overlay .card-title,
.slider-middle-section .card--image-overlay .card-title,
.perf-section .card--image-overlay .card-title {
  margin: 0;
  color: var(--white) !important;
  font-family: var(--font-display);
  font-size: var(--font-size-3);
  font-weight: 700;
  line-height: 1.2;
}
.page-reference-cards .card--image-overlay .card-tag,
.slider-middle-section .card--image-overlay .card-tag,
.perf-section .card--image-overlay .card-tag {
  display: inline-block;
  margin-bottom: 0.5rem;
  color: var(--white);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 700;
}
.page-reference-cards .card--image-overlay .card-action,
.slider-middle-section .card--image-overlay .card-action,
.perf-section .card--image-overlay .card-action {
  flex: 0 0 auto;
}

/* The resource-grid title follows the three-line truncation from the Figma card. */
.page-reference-cards .card--image-overlay .card-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.perf-section .card--image-overlay .card-body {
  aspect-ratio: 1/1;
}
.perf-section .card--image-overlay .card-header {
  min-height: 0;
  justify-content: flex-end;
}

.page-reference-cards a.card-link:hover .card--image-overlay .card-body img,
.slider-middle-section a.card-link:hover .card--image-overlay .card-body img,
.perf-section a.card-link:hover .card--image-overlay .card-body img {
  transform: scale(1.03);
}
.page-reference-cards a.card-link:hover .card--image-overlay .card-action,
.slider-middle-section a.card-link:hover .card--image-overlay .card-action,
.perf-section a.card-link:hover .card--image-overlay .card-action {
  background: var(--orange);
  color: var(--white);
}

/* "Plus d'articles" CTA — orange filled like btn-bel-primary, but explicit selector */
.btn-orange-pill {
  background: var(--orange);
  color: #fff;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0.85rem 1.25rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none !important;
  font-family: var(--font-display);
}
.btn-orange-pill:hover {
  background: #d76a1c;
  color: #fff;
}

/* ============================================================
   Blog archive (page-reference renderer "blog")
   ============================================================ */
.blog-archive {
  --blog-filter-width: 292px;
}
.blog-archive__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-sm);
}
.blog-archive__filters {
  min-width: 0;
}
.blog-archive .offcanvas .blog-archive__panel {
  padding: var(--spacing-sm);
}
.blog-archive .filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.blog-archive .filter-header .filter-heading {
  margin: 0;
}
.blog-archive-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-sm);
}
.blog-archive-grid .card .card-body {
  padding: 0 !important;
  /* 200px @375 → 290px @1720 */
  flex-shrink: 0;
  height: clamp(200px, 200px + (100vw - 375px) * 90 / 1345, 290px);
}
.blog-archive .filter-card {
  margin-bottom: 0.875rem;
}
.blog-archive .filter-list[hidden] {
  display: none;
}
.blog-archive .card-link {
  color: inherit;
}
.blog-archive .card {
  height: 100%;
  border: 1px solid var(--gray-dark);
  background: var(--white);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.blog-archive .card-body {
  position: relative;
  overflow: hidden;
  background: var(--gray);
}
.blog-archive .card-body img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.blog-archive .card-header {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  min-height: 112px;
  padding: 1.375rem;
  border: 0;
  background: var(--white);
}
.blog-archive .card-meta {
  min-width: 0;
}
.blog-archive .card-tag {
  position: absolute;
  top: -1rem;
  left: 1.375rem;
  display: inline-flex;
  margin: 0;
  padding: 0.35rem 0.625rem;
  color: var(--white);
  border-radius: var(--radius-sm);
  background: var(--orange);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: 1;
}
.blog-archive .card-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  min-height: 3.6em;
  margin: 0;
  color: var(--dark-green);
  font-family: var(--font-display);
  font-size: var(--font-size-3);
  font-weight: 700;
  line-height: 1.2;
}
.blog-archive .card-action {
  flex: 0 0 auto;
}
.blog-archive a.card-link:hover .card, .blog-archive a.card-link:focus-visible .card {
  border-color: var(--gray-dark);
}
.blog-archive a.card-link:hover .card-body img, .blog-archive a.card-link:focus-visible .card-body img {
  transform: scale(1.04);
}
.blog-archive a.card-link:hover .card-action, .blog-archive a.card-link:focus-visible .card-action {
  color: var(--white);
  border-color: var(--orange);
  background: var(--orange);
}
.blog-archive__empty {
  grid-column: 1/-1;
  margin: 0;
  color: var(--gray-dark);
}
.blog-archive__more {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--spacing-sm);
}
.blog-archive__more[hidden] {
  display: none;
}
.blog-archive__more button {
  appearance: none;
  font-family: inherit;
  cursor: pointer;
}
.blog-archive__more button:disabled {
  opacity: 0.55;
}

/* global-image, renderer "label-top": label above the image */
.image-label-top {
  margin: 0;
}
.image-label-top-caption {
  margin-bottom: var(--spacing-xs);
  color: var(--gray-dark);
  font-size: var(--font-size-small);
}

/* ============================================================
   Native Javlo content (blog articles, imported pages)
   heading / global-image / wysiwyg-paragraph / internal-link are
   emitted directly in #content, without any template container:
   they are laid out here as a centered reading column.
   ============================================================ */
#content {
  --article-width: 900px;
  --article-wide-width: 1200px;
  --article-gutter: 1.25rem;
}
#content > h1.jvl-component.heading,
#content > .jvl-component:is(.wysiwyg-paragraph, .global-image, .internal-link) {
  box-sizing: content-box;
  max-width: var(--article-width);
  margin-inline: auto;
  padding-inline: var(--article-gutter);
}
#content > h1.jvl-component.heading {
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}
#content > .jvl-component.global-image {
  max-width: var(--article-wide-width);
  margin-block: var(--spacing-sm);
}
#content > .jvl-component.global-image figure {
  margin: 0;
}
#content > .jvl-component.global-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}
#content > .jvl-component.wysiwyg-paragraph {
  margin-block: var(--spacing-sm);
  line-height: 1.6;
}
#content > .jvl-component.wysiwyg-paragraph h2 {
  margin: 2.5rem 0 1rem;
}
#content > .jvl-component.wysiwyg-paragraph h3 {
  margin: 1.5rem 0 0.75rem;
}
#content > .jvl-component.wysiwyg-paragraph > :first-child {
  margin-top: 0;
}
#content > .jvl-component.wysiwyg-paragraph p {
  margin: 0 0 0.5rem;
}
#content > .jvl-component.wysiwyg-paragraph a {
  color: var(--dark-green);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
#content > .jvl-component.wysiwyg-paragraph a:hover {
  color: var(--orange);
}
#content > .jvl-component.wysiwyg-paragraph strong {
  color: var(--dark-green);
}
#content > .jvl-component.wysiwyg-paragraph ul,
#content > .jvl-component.wysiwyg-paragraph ol {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}
#content > .jvl-component.wysiwyg-paragraph li {
  margin-bottom: 0.35rem;
}
#content > .jvl-component.wysiwyg-paragraph li::marker {
  color: var(--orange);
}
#content > .jvl-component.wysiwyg-paragraph img {
  max-width: 100%;
  height: auto;
  margin-block: var(--spacing-xs);
  border-radius: var(--radius-lg);
}
#content > .jvl-component.internal-link {
  margin-block: var(--spacing-sm) var(--spacing-md);
}
#content > .jvl-component.internal-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: var(--btn-bel-padding-y) var(--btn-bel-padding-x);
  border-radius: var(--radius-sm);
  background: var(--orange);
  color: var(--white);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}
#content > .jvl-component.internal-link a:hover {
  background: #d76a1c;
  color: var(--white);
}

/* ============================================================
   Devenir revendeur — multi-step form
   ============================================================ */
.dealer-form-card {
  background: #fff;
  border: 1px solid var(--gray);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 3rem);
  max-width: 935px;
  margin-inline: auto;
}
.dealer-form-card .form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.dealer-form-card .form-header h2 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--dark-green);
  font-size: var(--font-size-2);
  margin: 0;
}
.dealer-form-card .step-indicator {
  color: #000;
  font-size: var(--font-size-base);
  font-weight: 400;
  flex-shrink: 0;
}

/* Progress bar — full track + filled bar overlay */
.progress-track {
  position: relative;
  background: rgba(217, 217, 217, 0.6);
  height: 20px;
  border-radius: 30px;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.progress-track .progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: #8f8f8f;
  border-radius: 30px;
}

.form-row {
  margin-bottom: 1.25rem;
}
.form-row .form-label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--dark-green);
  font-family: var(--font-text);
  font-weight: 700;
  font-size: var(--font-size-base);
}
.form-row .form-control {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0.65rem 1rem;
  border: 1px solid var(--gray-dark);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--dark-green);
  outline: none;
  transition: border-color 0.15s ease;
}
.form-row .form-control::placeholder {
  color: #a8a8a8;
  font-family: var(--font-body);
  font-weight: 400;
}
.form-row .form-control:focus {
  border-color: var(--dark-green);
}

.form-required-note {
  color: #8f8f8f;
  font-size: var(--font-size-base);
  margin-bottom: 0;
}

.btn-bel-next {
  background: var(--orange);
  color: #fff;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 0.85rem 1.85rem;
  font-family: var(--font-text);
  font-weight: 400;
  font-size: var(--font-size-base);
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn-bel-next:hover {
  background: #d76a1c;
  color: #fff;
}

.form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

/* Hero that holds a centered card on top of an image — reusable */
.hero-image-banner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 599px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
}
.hero-image-banner .hero-card-centered {
  position: relative;
  z-index: 2;
  background: #fff;
  border-radius: var(--radius-lg);
  max-width: 836px;
  padding: clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.hero-image-banner .hero-card-centered h1 {
  line-height: 1.05;
  margin-bottom: 1.25rem;
}

/* ===== Edit-preview legibility =====
   The Javlo back-office wraps component edit chrome under .preview-command-visible. */
.preview-command-visible .section {
  font-size: var(--font-size-base) !important;
}

/* ============================================================
   Utilisation — parcours (témoignage → défis → réponse →
   bénéfices → étape → conclusion → témoignage)
   Zigzag image/texte ; les 2 mockups téléphone sont reliés par
   un court trait (pas de trait central sur toute la hauteur).
   Le composant occupe toute la largeur du contenu.
   ============================================================ */
/* Fond gris qui démarre au MILIEU de la carte témoignage du haut : la carte
   est remontée d'une demi-hauteur de logo (margin-top négatif) et ressort donc
   à moitié au-dessus du cadre gris. flow-root empêche le margin négatif de la
   carte de "fuir" (margin collapsing) et de remonter toute la section. */
.utilisation-component {
  --util-author-logo-size: clamp(130px, 5vw, 174px);
  display: flow-root;
  background: var(--gray-light);
}
.utilisation-component:has(.util-author--top) {
  margin-top: calc(var(--util-author-logo-size) / 2 + 1rem);
}
.utilisation-component:has(.util-author--bottom) {
  margin-bottom: calc((var(--util-author-logo-size) + 3rem) / 2 + var(--spacing-xl) + var(--spacing-md) / 2);
}

/* ----- Carte témoignage ----- */
.util-author {
  --logo-size: var(--util-author-logo-size);
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 100%;
  margin-inline: auto;
  padding: 0.9rem 1.4rem;
  background: var(--white);
  border: 1px solid var(--gray-dark);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 28px rgba(12, 59, 29, 0.07);
  width: fit-content;
}
.util-author--top {
  margin-top: calc(var(--logo-size) / -2);
}
.util-author--bottom {
  position: relative;
  z-index: 2;
  margin-top: clamp(3rem, 6vw, 6rem);
  transform: translateY(50%);
}
.util-author-logo {
  position: relative;
  background: white;
  padding: 0.5em;
  border: 1px solid var(--gray-dark);
  border-radius: var(--radius-sm);
}
.util-author-logo img {
  height: var(--logo-size);
  width: auto;
  object-fit: contain;
  display: block;
}
.util-author-info > p {
  margin: 0;
  line-height: 1.3;
}
.util-author-org {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--dark-green);
  font-size: var(--font-size-2);
}
.util-author-name, .util-author-role {
  font-size: var(--font-size-2);
  color: var(--dark-green);
}

.util-route {
  display: block;
  position: relative;
  height: var(--spacing-lg);
  pointer-events: none;
}
.util-route::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--gray-dark);
  transform: translateX(-50%);
}

.util-anchor-route {
  display: none;
}

.util-first-row .split-layout-image {
  position: relative;
  z-index: 1;
}

.citation-section .citation {
  font-weight: 700;
  color: var(--dark-green);
  text-align: center;
  max-width: 80%;
  margin: auto;
}

.testimonials-section {
  border-top: 1px solid var(--gray-dark);
  /* ----- Mockups app entre les deux blocs (structure Echorobotics) ----- */
}
.testimonials-section .testimonial-author-wrapper {
  display: flex;
  align-items: center;
  gap: 15px;
  width: fit-content;
}
.testimonials-section .testimonial-author-wrapper img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  object-position: center center;
  border-radius: 50%;
  border: 1px solid var(--gray);
}
.testimonials-section .testimonial-author-wrapper .testimonial-author-name p {
  white-space: nowrap;
}
.testimonials-section .smartphones-wrapper {
  --smartphone-screen: clamp(130px, 20vw, 210px);
  --smartphones-gap: 30px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: var(--smartphones-gap);
  margin-bottom: -50px;
  margin-top: 50px;
}
.testimonials-section .smartphones-wrapper::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: calc(var(--smartphone-screen) + var(--smartphones-gap));
  height: 1px;
  background: rgba(114, 114, 114, 0.55);
  transform: translate(-50%, -50%);
}
.testimonials-section .smartphones-wrapper .smartphone {
  width: var(--smartphone-screen);
  height: auto;
  border-radius: 25px;
  border: 5px solid #000;
  overflow: hidden;
  z-index: 10;
}

.util-conclusion {
  max-width: 1485px;
  margin: auto;
}

/* Utilitaires Echorobotics : dégradé bas de section (classe CSS manuelle)
   + affichage conditionnel desktop/mobile (bascule à 992px dans _responsive) */
.bottom-gradient {
  background: linear-gradient(to top, rgba(217, 217, 217, 0.6) 0%, rgba(217, 217, 217, 0) 100%);
}

.show-desktop {
  display: none !important;
}

/* Titre saisi dans le WYSIWYG (format H3) — même rendu que les titres Echorobotics (font-size-2) */
.util-body h2, .util-body h3, .util-body h4 {
  color: var(--dark-green);
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 1.05;
  font-size: var(--font-size-2);
}
.util-body > :first-child {
  margin-top: 0;
}
.util-body p:last-child {
  margin-bottom: 0;
}

/* ----- Bénéfices mesurables (chiffres) ----- */
.util-stats {
  padding-block: var(--spacing-lg);
  position: relative;
}
.util-stats-title {
  margin-top: 0;
  margin-bottom: 4rem;
}
.util-stats-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.util-stat {
  position: relative;
  z-index: 1;
  background: var(--gray-light);
  border-radius: var(--radius-md);
  padding: 1.5rem 1rem;
  text-align: center;
  border: 1px solid var(--gray-dark);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.util-stat-value {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--font-size-1);
  color: var(--orange);
  line-height: 1;
}
.util-stat-label {
  margin: 0;
  font-size: var(--font-size-3);
  color: var(--dark-green);
  font-weight: 600;
  line-height: 1.3;
}

/* ============================================================
   Debug note — Javlo editor/preview only
   Small status box shown on components while editing. Meant to
   be obvious, not pretty: dashed frame + label so it never gets
   confused with real content.
   ============================================================ */
.debug-note {
  display: block;
  width: fit-content;
  max-width: 90%;
  margin: 10px auto;
  padding: 6px 14px 6px 34px;
  position: relative;
  font-family: var(--font-text);
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  color: var(--white);
  background-color: #d9534f;
  border: 1px dashed rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  user-select: none;
  z-index: 50;
}
.debug-note::before {
  content: "🐞"; /* 🐞 */
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-base);
}
.debug-note:hover {
  filter: brightness(1.08);
}
.debug-note.status-new {
  background-color: #474747;
}
.debug-note.status-rejected {
  background-color: #EF3513;
}
.debug-note.status-onhold {
  background-color: #5C75A1;
}
.debug-note.status-working {
  background-color: var(--orange);
}
.debug-note.status-archived {
  background-color: #8F7556;
}
.debug-note.status-done {
  background-color: #7BB529;
}

.split-layout-image {
  width: 100%;
  overflow: hidden;
  border-radius: calc(var(--base-spacing) * 4);
}
.split-layout-image.large {
  aspect-ratio: 16/9;
  flex: 1.2 !important;
}
.split-layout-image img, .split-layout-image picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.split-layout-content {
  width: 100%;
  max-width: 800px;
  line-height: 1.5;
}
.split-layout-content.small {
  flex: 0.8 !important;
}
.split-layout-content .split-layout-content-inside-wrapper, .split-layout-content .btn-wrapper {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Separation title: title on the left, intro text on the right */
.separation-title-component .separation-title-left h1, .separation-title-component .separation-title-left h2, .separation-title-component .separation-title-left h3, .separation-title-component .separation-title-left h4, .separation-title-component .separation-title-left h5, .separation-title-component .separation-title-left h6, .separation-title-component .separation-title-left p {
  font-size: var(--font-size-1);
  line-height: 1.05;
  font-weight: 700;
  margin: 0;
}
.separation-title-component .separation-title-right p:last-child {
  margin-bottom: 0;
}
.separation-title-component .separation-title-left,
.separation-title-component .separation-title-right {
  flex: 1 1 0 !important;
  min-width: 0;
}
.separation-title-component .stacked {
  max-width: 900px;
  margin: auto;
}

.invisible-item {
  visibility: hidden;
  display: block;
}

/* Five-image model gallery. */
.gallery-component {
  overflow-x: clip;
}

.gallery-grid-bel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: clamp(32rem, 46vw, 50rem) clamp(20rem, 30vw, 32rem);
  gap: clamp(1.25rem, 2.8vw, 3rem);
}

.gallery-item-bel {
  display: block;
  min-width: 0;
  overflow: hidden;
  background: var(--gray-light);
  border-radius: var(--radius-md);
}
.gallery-item-bel-1 {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  aspect-ratio: 1;
}
.gallery-item-bel-2 {
  grid-column: 2;
  grid-row: 1;
  height: 100%;
}
.gallery-item-bel-3 {
  grid-column: 3;
  grid-row: 1;
  align-self: end;
  aspect-ratio: 1;
}
.gallery-item-bel-4 {
  grid-column: 1/span 2;
  grid-row: 2;
  height: 100%;
}
.gallery-item-bel-5 {
  grid-column: 3;
  grid-row: 2;
  height: 100%;
}

.gallery-image-bel {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Four-image gallery (gal_4_images). */
.gallery-4-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.8vw, 3rem);
}
.gallery-4-item {
  display: block;
  min-width: 0;
  overflow: hidden;
  background: var(--gray-light);
  border-radius: var(--radius-md);
}
.gallery-4-item-1 {
  grid-column: 1/span 2;
  grid-row: 1;
  aspect-ratio: 16/9;
}
.gallery-4-item-2 {
  grid-column: 3;
  grid-row: 1/span 2;
  aspect-ratio: 3/4;
}
.gallery-4-item-3 {
  grid-column: 2;
  grid-row: 2/span 2;
  aspect-ratio: 3/4;
}
.gallery-4-item-4 {
  grid-column: 3/span 2;
  grid-row: 3;
  aspect-ratio: 16/9;
}

/* Model detail: product image overlapping the technical-specification card. */
.model-specs-layout {
  position: relative;
  max-width: 820px;
  margin-inline: auto;
  padding-top: clamp(9rem, 15vw, 13rem);
}
.model-specs-layout--without-image {
  padding-top: 0;
}
.model-specs-layout--without-image .model-specs-card {
  padding-top: clamp(2rem, 4vw, 4rem);
}
.model-specs-visual {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  width: min(52vw, 700px);
  height: clamp(14rem, 24vw, 22rem);
  transform: translateX(-50%);
  pointer-events: none;
}
.model-specs-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.model-specs-card {
  padding: 110px 30px 30px;
  background: var(--white);
  border: 1px solid var(--gray-dark);
  border-radius: var(--radius-md);
}
.model-specs-list {
  margin: 0;
}
.model-specs-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 1.5rem;
  padding-block: clamp(0.75rem, 1.4vw, 1.25rem);
  border-bottom: 1px solid #929292;
}
.model-specs-row:last-child {
  border-bottom: 0;
}
.model-specs-row dt,
.model-specs-row dd {
  margin: 0;
}
.model-specs-row dt {
  min-width: 0;
  color: var(--gray-dark);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: 1.25;
}
.model-specs-row dd {
  color: var(--orange);
  font-family: var(--font-display);
  font-size: var(--font-size-3);
  font-weight: 700;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
}
.model-specs-download {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.model-specs-title {
  text-align: center;
}

/* Cost calculator */
.cost-calculator {
  background: var(--gray-light);
}
.cost-calculator-intro, .cost-calculator-compare {
  max-width: 1160px;
  margin-inline: auto;
}
.cost-calculator-inputs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  max-width: 1160px;
  margin: 2rem auto 3rem;
  padding: 1.5rem;
  background: var(--white);
  border-radius: var(--radius-md);
}
.cost-calculator-hint {
  margin: 0.5rem 0 0;
  color: var(--gray-dark);
}
.cost-calculator-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--gray);
  border-radius: var(--radius-md);
  background: var(--white);
}
.cost-calculator-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}
.cost-calculator-table th, .cost-calculator-table td {
  padding: 1rem;
  border-bottom: 1px solid var(--gray);
  vertical-align: middle;
}
.cost-calculator-table thead th {
  font-family: var(--font-display);
  font-size: var(--font-size-3);
}
.cost-calculator-table tbody > tr > th:first-child {
  width: 42%;
  color: var(--dark-green);
  font-weight: 700;
}
.cost-calculator-table input {
  width: 6.5rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--gray-dark);
  border-radius: var(--radius-sm);
  font: inherit;
}
.cost-calculator-group th {
  padding-block: 0.7rem;
  background: var(--orange);
  color: var(--white) !important;
  font-family: var(--font-display);
  font-size: var(--font-size-3);
  text-align: left;
}
.cost-calculator-subtotal th, .cost-calculator-subtotal td {
  font-weight: 700;
}
.cost-calculator-total th, .cost-calculator-total td {
  background: var(--dark-green);
  color: var(--white) !important;
  font-family: var(--font-display);
  font-size: var(--font-size-3);
  font-weight: 700;
}
.cost-calculator-tooltip {
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.25rem;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1;
}
.cost-calculator-savings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.cost-calculator-savings > div {
  display: grid;
  gap: 0.35rem;
  padding: 1.25rem;
  border-radius: var(--radius-sm);
  background: var(--white);
}
.cost-calculator-savings span {
  color: var(--gray-dark);
}
.cost-calculator-savings strong {
  color: var(--orange);
  font-family: var(--font-display);
  font-size: var(--font-size-3);
}
.cost-calculator-note {
  margin-top: 1.5rem;
}
.cost-calculator-cta {
  margin-top: 1.5rem;
}

/* Calculator layout matching the cost-calculator reference. */
.cost-calculator {
  background: var(--white);
}
.cost-calculator-step--intro {
  max-width: 1180px;
  margin-inline: auto;
  padding: clamp(2rem, 5vw, 5rem);
  border: 1px solid var(--gray-dark);
  border-radius: var(--radius-md);
}
.cost-calculator-step--intro h2 {
  margin-top: 0;
}
.cost-calculator-entry {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}
.cost-calculator-entry .form-control {
  height: auto;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-sm);
}
.cost-calculator-next {
  display: flex;
  justify-content: flex-end;
}
.cost-calculator-next .btn-bel-primary[disabled] {
  opacity: 0.45;
  pointer-events: none;
}
.cost-calculator-step--locked {
  border-color: rgba(114, 114, 114, 0.45);
}
.cost-calculator-step--locked h2,
.cost-calculator-step--locked .form-row {
  opacity: 0.45;
  pointer-events: none;
}
.cost-calculator-results {
  margin-top: clamp(4rem, 9vw, 9rem);
}
.cost-calculator-results--disabled {
  opacity: 0.45;
  pointer-events: none;
}
.cost-calculator-compare-title {
  margin-bottom: 3rem;
  text-align: center;
}
.cost-calculator-table-wrap {
  max-width: 1550px;
  margin-inline: auto;
  border-color: var(--gray);
}
.cost-calculator-table {
  min-width: 980px;
  table-layout: fixed;
}
.cost-calculator-table th, .cost-calculator-table td {
  padding: clamp(0.75rem, 1.4vw, 1.25rem);
  text-align: center;
}
.cost-calculator-table th:not(:first-child), .cost-calculator-table td:not(:first-child) {
  border-left: 1px solid var(--gray);
}
.cost-calculator-table th:first-child {
  width: 28%;
}
.cost-calculator-table tbody > tr > th:first-child {
  color: var(--gray-dark);
  font-weight: 400;
}
.cost-calculator-table td {
  color: var(--gray-dark);
}
.cost-calculator-table small {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--font-size-base);
  font-weight: 400;
}
.cost-calculator-table label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.5rem;
  border: 2px solid #8cc56b;
  border-radius: 0.25rem;
  background: var(--white);
}
.cost-calculator-table input {
  width: 4.2rem;
  padding: 0;
  border: 0;
  outline: 0;
  text-align: center;
}
.cost-calculator-type-row th {
  height: 250px;
  background: var(--white);
  color: var(--dark-green) !important;
}
.cost-calculator-type-row th:last-child {
  background: #f4f4f4;
}
.cost-calculator-type-row select {
  width: 100%;
  padding: 0.55rem 2rem 0.55rem 0.75rem;
  border: 2px solid #9ccb78;
  border-radius: 0.25rem;
  background: var(--white);
  color: #79ae58;
  font: inherit;
  font-weight: 700;
}
.cost-calculator-type-row img {
  display: block;
  width: min(100%, 260px);
  height: 135px;
  margin: 1.5rem auto;
  object-fit: contain;
}
.cost-calculator-type-row a {
  color: var(--gray-dark);
  font-weight: 400;
}
.cost-calculator-classic-mower span {
  display: block;
  font-family: var(--font-display);
  font-size: var(--font-size-3);
}
.cost-calculator-depreciation-row th, .cost-calculator-depreciation-row td {
  background: #f6f6f6;
}
.cost-calculator-depreciation-row th {
  color: var(--gray-dark) !important;
  font-family: var(--font-body);
  font-weight: 400;
}
.cost-calculator-group th {
  background: var(--dark-green);
}
.cost-calculator-group th:not(:first-child) {
  background: var(--white);
  color: var(--dark-green) !important;
}
.cost-calculator-subtotal th, .cost-calculator-subtotal td {
  font-weight: 400;
}
.cost-calculator-total th {
  background: var(--dark-green);
}
.cost-calculator-total td {
  background: var(--white);
  color: var(--light-green) !important;
  font-size: var(--font-size-3);
}
.cost-calculator-co2 th, .cost-calculator-co2 td {
  background: var(--white);
  color: var(--light-green);
  font-size: var(--font-size-3);
}
.cost-calculator-co2 td:last-child, .cost-calculator-total td:last-child {
  color: #f25b54 !important;
}
.cost-calculator-note {
  max-width: 1450px;
  margin: 2.5rem auto;
  text-align: center;
}
.cost-calculator-savings {
  max-width: 1450px;
  grid-template-columns: 1.3fr repeat(3, 1fr);
  align-items: center;
  margin-inline: auto;
  padding: 1.25rem 2rem;
  border: 2px solid #70a94d;
  border-radius: var(--radius-md);
  background: var(--white);
}
.cost-calculator-savings > div {
  display: contents;
  padding: 0;
}
.cost-calculator-savings span, .cost-calculator-savings strong {
  color: #60953e;
  font-family: var(--font-display);
  font-size: var(--font-size-3);
  font-weight: 700;
  text-align: center;
}
.cost-calculator-savings span {
  text-align: left;
}
.cost-calculator-contact {
  max-width: 900px;
  margin: 3rem auto 0;
  text-align: center;
}
.cost-calculator-contact p {
  color: var(--gray-dark);
}

/* Partners finder and partner detail */
html.partners-is-single .partners-search,
html.partners-is-single .separation-title-component,
html.partners-is-single .faq-section {
  display: none !important;
}

html:not(.partners-is-single) .partners-single {
  display: none;
}

.partners-search .partners-finder {
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid var(--gray-dark);
  border-radius: var(--radius-md);
}
.partners-search .loading-message {
  display: grid;
  min-height: 32rem;
  place-items: center;
}
.partners-search .partners-finder-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(20rem, 0.8fr);
  grid-template-rows: clamp(34rem, 54vw, 58rem);
  gap: clamp(1.5rem, 2.5vw, 3.5rem);
}
.partners-search .map-container {
  min-height: 0;
  height: 100%;
}
.partners-search .partners-map {
  min-height: 0;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--gray-dark);
  border-radius: var(--radius-md);
}
.partners-search .partners-sidebar {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 2rem;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.partners-search .search-wrapper {
  position: relative;
}
.partners-search .input-wrapper {
  position: relative;
}
.partners-search .input-wrapper::before {
  position: absolute;
  top: 50%;
  left: 1.5rem;
  z-index: 1;
  width: clamp(20px, 2.5vw, 24px);
  height: clamp(20px, 2.5vw, 24px);
  background: url("../yamabiko-partners/images/search-icon.svg") no-repeat center/contain;
  content: "";
  pointer-events: none;
  transform: translateY(-50%);
}
.partners-search .input-wrapper.filled .partners-search-clear {
  display: grid;
}
.partners-search .partners-search-input {
  width: 100%;
  padding: 1rem 4.25rem 1rem 4.25rem;
  border: 1px solid var(--gray-dark);
  border-radius: var(--radius-sm);
  color: var(--gray-dark);
  font: inherit;
}
.partners-search .partners-search-input:focus-visible {
  border-color: var(--dark-green);
  outline: 2px solid var(--dark-green);
  outline-offset: 2px;
}
.partners-search .partners-search-clear {
  position: absolute;
  top: 50%;
  right: 1.25rem;
  display: none;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--dark-green);
  font-size: var(--font-size-2);
  line-height: 1;
  transform: translateY(-50%);
}
.partners-search .partners-search-clear:focus-visible {
  outline: 2px solid var(--dark-green);
  outline-offset: 2px;
}
.partners-search .autocomplete-suggestions {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  left: 0;
  z-index: 10;
  max-height: 18rem;
  margin: 0;
  padding: 0.5rem;
  overflow-y: auto;
  border: 1px solid var(--gray-dark);
  border-radius: var(--radius-sm);
  background: var(--white);
  box-shadow: 0 0.5rem 1.5rem rgba(12, 59, 29, 0.12);
  list-style: none;
}
.partners-search .autocomplete-suggestions li {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  color: var(--dark-green);
  cursor: pointer;
}
.partners-search .autocomplete-suggestions li:hover, .partners-search .autocomplete-suggestions li:focus-visible {
  background: var(--gray-light);
}
.partners-search .location-controls {
  margin-top: 0.75rem;
}
.partners-search .use-location-link {
  color: var(--dark-green);
  font-weight: 700;
}
.partners-search .partners-list-container {
  min-height: 0;
  padding-right: 0.75rem;
  overflow-y: scroll;
  scrollbar-color: var(--dark-green) transparent;
  scrollbar-width: thin;
}
.partners-search .partners-list-container::-webkit-scrollbar {
  width: 0.75rem;
}
.partners-search .partners-list-container::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--dark-green);
}
.partners-search .partners-list-container::-webkit-scrollbar-track {
  background: transparent;
}
.partners-search .partners-section-title {
  margin: 0 0 1rem;
  color: var(--dark-green);
  font-size: var(--font-size-3);
}
.partners-search .partners-list {
  display: grid;
  gap: 1.25rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}
.partners-search .brands {
  display: none;
}
.partners-search .card {
  border: 1px solid var(--gray-dark);
  border-radius: var(--radius-md);
  background: var(--white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.partners-search li.active .card,
.partners-search .card:hover {
  border-color: var(--dark-green);
  box-shadow: 0 0.5rem 1.5rem rgba(12, 59, 29, 0.12);
}
.partners-search .card-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1rem;
  padding: clamp(1.25rem, 2vw, 2rem);
}
.partners-search .partners-address-block h3 {
  margin: 0 0 1rem;
  color: var(--dark-green);
}
.partners-search .partners-address {
  color: var(--gray-dark);
  line-height: 1.35;
}
.partners-search .partners-street,
.partners-search .partners-zip,
.partners-search .partners-town,
.partners-search .partners-country {
  display: block;
}
.partners-search .no-results {
  padding: 2rem 0;
  color: var(--gray-dark);
}

.partners-address-block .partners-zip-town {
  display: flex;
  gap: 5px;
}

.partners-single-layout {
  display: grid;
  grid-template-areas: "content map";
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(1.5rem, 2.5vw, 3.5rem);
}
.partners-single-content {
  grid-area: content;
  display: grid;
  align-content: start;
  gap: 1.5rem;
}
.partners-single-content, .partners-single-layout > .partners-map {
  min-width: 0;
}
.partners-single .partners-header-block,
.partners-single .partners-contact-card,
.partners-single .partners-map {
  border: 1px solid var(--gray-dark);
  border-radius: var(--radius-md);
  background: var(--white);
}
.partners-single .partners-header-block {
  padding: clamp(2rem, 3vw, 3.5rem);
}
.partners-single .partners-header-block h1 {
  margin: 0;
  color: var(--dark-green);
}
.partners-single .partners-location-intro {
  margin-top: 0.75rem;
  color: var(--gray-dark);
  font-family: var(--font-display);
  font-size: var(--font-size-2);
  font-weight: 700;
}
.partners-single .partners-intro {
  margin-top: 2rem;
  color: var(--gray-dark);
}
.partners-single .partners-intro p {
  margin: 0;
}
.partners-single .partners-header-block .cta-block {
  justify-content: flex-end;
  margin-bottom: 0;
}
.partners-single .partners-contact-card {
  padding: clamp(1.5rem, 2.5vw, 2.5rem);
}
.partners-single .partners-contact-block {
  display: grid;
  gap: 1.25rem;
}
.partners-single .partners-address-item {
  display: grid;
  grid-template-columns: minmax(10rem, 0.55fr) minmax(0, 1fr);
  gap: 1.5rem;
  color: var(--gray-dark);
}
.partners-single .partners-address-title,
.partners-single .partners-links-title,
.partners-single .partners-website-title,
.partners-single .partners-hours-title {
  color: var(--dark-green);
  font-family: var(--font-display);
  font-weight: 700;
}
.partners-single .partners-address,
.partners-single .partners-links,
.partners-single .partners-website {
  display: grid;
  gap: 0.5rem;
}
.partners-single .contact-link {
  color: var(--gray-dark);
  text-decoration: none;
}
.partners-single .contact-link:hover {
  color: var(--dark-green);
  text-decoration: underline;
}
.partners-single .partners-hours-block {
  display: grid;
  grid-template-columns: minmax(10rem, 0.55fr) minmax(0, 1fr);
  gap: 1.5rem;
  margin-top: 1.25rem;
  color: var(--gray-dark);
}
.partners-single .partners-hours-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.partners-single .partners-hours-list li {
  display: grid;
  grid-template-columns: minmax(6rem, 0.45fr) minmax(0, 1fr);
  gap: 1rem;
}
.partners-single .partners-hours-list strong {
  font-weight: 400;
}
.partners-single .hour-slots {
  display: grid;
  gap: 0.25rem;
}
.partners-single .partners-map {
  grid-area: map;
  min-height: clamp(35rem, 48vw, 52rem);
  overflow: hidden;
}

.cta-wrapper.animated {
  transform-origin: center center;
  transition: transform 0.1s linear;
  will-change: transform;
}

/* ============================================================
   max-width (desktop-first) — largest → smallest
   ============================================================ */
@media (max-width: 1399.98px) {
  /* Exclude bloc_image: its .full-width-mobile only bleeds below 992. */
  :not(.bloc-image-component) > .container-fluid.custom-padding.full-width-mobile {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  :not(.bloc-image-component) > .container-fluid.custom-padding.full-width-mobile .cta-banner {
    border-radius: 0;
    min-height: 650px !important;
    height: 750px;
  }
  .large-slider-section {
    /* Clip sideways Swiper slides so they don't widen the page / enable
       pinch-zoom-out; keep Y visible for the hanging card. */
    overflow-x: clip;
  }
  .large-slider-section .large-slider-nav {
    display: none;
  }
  .large-slider-section .large-slider-shell {
    overflow-x: clip;
    overflow-y: visible;
  }
  .large-slider-section .large-slider-swiper {
    overflow-x: clip;
    overflow-y: visible;
    border-radius: 0;
  }
  .large-slider-section .large-slider-pagination {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: flex;
    justify-content: center;
    width: fit-content !important;
    margin: 1.25rem auto 0;
  }
  .large-slide {
    height: auto;
    min-height: 0;
    overflow-x: clip;
    overflow-y: visible;
    display: flex;
    flex-direction: column;
    border-radius: 0;
  }
  .large-slide__media {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: auto;
    min-height: var(--large-slide-media-min-height);
    height: var(--large-slide-media-min-height);
    overflow: hidden;
    border-radius: 0;
  }
  .large-slide__overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 45%);
  }
  .large-slide__card {
    position: relative;
    right: auto;
    left: auto;
    top: auto;
    transform: none;
    max-height: none;
    margin: -4.5rem auto 0;
    overflow: visible;
    /* padding via --large-slide-card-padding (30px @375 → 50px @1200) */
  }
  .large-slide__heading {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
  }
  .large-slide__icon {
    width: 44px;
    height: 44px;
  }
  .models-section {
    padding-top: var(--spacing-md);
  }
}
@media (max-width: 991.98px) {
  .cta-banner {
    height: 650px;
  }
  .large-slide {
    border-radius: 0;
  }
  .large-slide__media {
    border-radius: 0;
  }
  .top-tabs {
    display: none;
  }
  :root {
    --top-header-padding-top: var(--burger-size);
    --top-tabs-height: 0px;
  }
  /* Homepage hero: fill first screen on short phones (svh = stable, no
     chrome-resize jump), cap at 720px on taller ones. */
  .home-page .header-slide-component {
    height: min(720px, 100svh - var(--top-header-height));
  }
  .home-page .header-slide-component .container-fluid,
  .home-page .header-slide-component .hero-swiper,
  .home-page .header-slide-component .swiper-wrapper {
    height: 100%;
  }
  .home-page .header-slide-component .hero-swiper .swiper-slide {
    aspect-ratio: auto;
    min-height: 0;
    height: 100%;
  }
  .show-desktop {
    display: none;
  }
  .swiper-pagination-bullets {
    padding: 8px 10px !important;
  }
  .swiper-pagination-bullets .swiper-pagination-bullet {
    width: 8px !important;
    height: 8px !important;
  }
  .partners-search .partners-finder-layout {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .partners-search .map-container,
  .partners-search .partners-map {
    min-height: 32rem;
    height: auto;
  }
  .partners-search .partners-list-container {
    max-height: none;
    overflow: visible;
  }
  .partners-single-layout {
    grid-template-areas: "content" "map";
    grid-template-columns: 1fr;
  }
  .partners-single .partners-map {
    min-height: 32rem;
  }
  .models-section .filters-btn {
    width: 100%;
  }
  .gallery-grid-bel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: var(--spacing-sm);
  }
  .gallery-item-bel {
    grid-column: 1;
    grid-row: auto;
    align-self: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    border-radius: var(--radius-sm);
  }
  .gallery-4-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-sm);
  }
  .gallery-4-item {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 4/3;
    border-radius: var(--radius-sm);
  }
  .testimonials-section .util-author {
    flex-direction: column;
  }
  .testimonials-section .util-author .util-author-info {
    text-align: center;
  }
  .bloc-image-component {
    /* Always image above text on mobile. Mirroring desktop L/R would stack
       Text→Text between consecutive blocks and break the rhythm. */
    /* Wide shape uses .full-width-mobile: edge-to-edge + square media below 992.
       Radius lives on both .split-layout-image and .bloc-image-media.
       Content keeps the usual custom-padding gutters. */
  }
  .bloc-image-component .split-layout-image {
    order: -1;
  }
  .bloc-image-component .container-fluid > .d-flex {
    gap: 50px;
  }
  .bloc-image-component .full-width-mobile {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .bloc-image-component .full-width-mobile .split-layout-image,
  .bloc-image-component .full-width-mobile .split-layout-image .bloc-image-media {
    border-radius: 0;
  }
  .bloc-image-component .full-width-mobile .split-layout-content {
    padding-left: clamp(1.25rem, 1.25rem + (1vw - 0.275625rem) * 6.2549, 6.25rem);
    padding-right: clamp(1.25rem, 1.25rem + (1vw - 0.275625rem) * 6.2549, 6.25rem);
  }
  /* Bottom author: on mobile the card stacks (logo + text) so translateY(50%)
     hangs ~half a tall card and outruns any logo-based margin. Match the top
     author instead — hang by half a logo. The next section owns its own gap. */
  .utilisation-component:has(.util-author--bottom) {
    margin-bottom: calc(var(--util-author-logo-size) / 2 + var(--spacing-md) / 2);
  }
  .utilisation-component .util-author--bottom {
    transform: translateY(calc(var(--util-author-logo-size) / 2));
    margin-bottom: 0;
  }
  .languages-modal .country-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mower-section .mower-footer-row {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 1.25rem;
  }
  .mower-section .mower-section-cta,
  .mower-section .mower-pagination {
    grid-column: 1;
    justify-self: center;
  }
  .news-grid .card .card-body {
    flex-direction: column;
    align-items: flex-start;
  }
  .news-grid .card .card-action {
    align-self: flex-end;
  }
  .util-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .util-stats-title {
    margin-bottom: 2rem;
  }
}
@media (max-width: 767.98px) {
  /* No breadcrumb below md. The first rendered #content block drives header
     bottom space; ignore any number of non-rendering Javlo placeholders. */
  body:has(#content > :nth-child(1 of :has(> :not(script, style))):is(section.separation-title-component, section.separation-title)) .top-header,
  body:has(#content > .jvl-component:nth-child(1 of :has(> :not(script, style))) :is(section.separation-title-component, section.separation-title)) .top-header {
    --top-header-padding-bottom: 100px;
  }
  body:has(#content > :nth-child(1 of :has(> :not(script, style))):is(section.intro-component, .jvl-component:has(.intro-component))) .top-header {
    --top-header-padding-bottom: var(--spacing-sm);
  }
  .faq-category-hero {
    aspect-ratio: 4/3;
    background-image: var(--bg-sm, var(--bg-lg));
  }
  .faq-category-list {
    grid-template-columns: minmax(0, 1fr);
    margin-top: var(--spacing-md);
  }
  .hero-multizone {
    background-image: var(--bg-sm, var(--bg-lg));
  }
  .header-slide-component .hero-swiper .swiper-slide {
    aspect-ratio: 4/5;
    min-height: 480px;
  }
  .header-slide-component .hero-swiper .swiper-pagination {
    right: var(--slide-inset-x);
    left: auto;
    bottom: var(--slide-bottom);
  }
  .header-slide-component .slide-content {
    bottom: calc(var(--slide-bottom) + 3.75rem);
  }
  .header-model-component .hero-product {
    aspect-ratio: 4/5;
    min-height: 480px;
  }
  .slider-middle-section .slider-middle-nav {
    display: none;
  }
  .slider-middle-section .slider-middle-footer-row {
    justify-content: center;
  }
  .mower-section .mower-nav {
    width: 34px;
    height: 38px;
  }
  .mower-section .mower-nav svg {
    width: 16px;
    height: 20px;
    stroke-width: 3.2;
  }
  .top-tab {
    padding: 0.45rem 1rem;
  }
  .hero-card {
    margin-inline: 1rem;
    max-width: 100%;
  }
  .cta-banner {
    min-height: 420px;
  }
  .hero-image-banner {
    min-height: 460px;
    padding: 2rem 1rem;
  }
  .discover-card {
    flex-direction: column;
    min-height: 0;
  }
  .discover-card-media {
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
    aspect-ratio: 400/330;
  }
  .discover-card-body {
    padding-block: 0;
  }
}
@media (max-width: 575.98px) {
  .cost-calculator-step--intro {
    padding: 1.5rem;
  }
  .cost-calculator-next {
    justify-content: stretch;
  }
  .cost-calculator-next .btn-bel-primary {
    width: 100%;
    justify-content: center;
  }
  .cost-calculator-compare-title {
    margin-bottom: 1.5rem;
  }
  .cost-calculator-savings {
    display: grid;
    grid-template-columns: 1fr;
    text-align: center;
  }
  .cost-calculator-savings span {
    text-align: center;
  }
  .cost-calculator-inputs, .cost-calculator-savings {
    grid-template-columns: 1fr;
  }
  .partners-search .partners-finder {
    padding: 1rem;
  }
  .partners-search .map-container,
  .partners-search .partners-map {
    min-height: 24rem;
    height: auto;
  }
  .partners-search .card-section {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .partners-search .card-section .btn {
    justify-self: start;
  }
  .partners-single .partners-header-block,
  .partners-single .partners-contact-card {
    padding: 1.5rem;
  }
  .partners-single .partners-header-block .cta-block {
    justify-content: stretch;
  }
  .partners-single .partners-header-block .cta-block .btn-bel-outline,
  .partners-single .partners-header-block .cta-block .btn-bel-primary {
    justify-content: center;
    width: 100%;
  }
  .partners-single .partners-address-item,
  .partners-single .partners-hours-block {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .partners-single .partners-hours-list li {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
  .partners-single .partners-map {
    min-height: 24rem;
  }
  .model-specs-layout {
    width: 100%;
    padding-top: 6rem;
  }
  .model-specs-visual {
    width: min(90vw, 31rem);
    height: 13rem;
  }
  .model-specs-card {
    padding: 8.5rem 0.75rem 0.75rem;
    border-radius: var(--radius-sm);
  }
  .model-specs-row {
    gap: 0.75rem;
  }
  .full-image-component .full-image-media {
    aspect-ratio: 920/520;
  }
  .languages-modal .country-list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 479.98px) {
  .models-grid .card .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
  .models-grid .card .card-header .btn {
    width: fit-content;
  }
  .container-fluid.full-width-mobile .cta-banner .cta-card {
    max-width: 320px;
  }
  .utilisation-component .util-stats:has(+ .util-row--benefits .split-layout-image)::after {
    content: "";
    position: absolute;
    z-index: 0;
    right: 50%;
    bottom: 0;
    width: 1px;
    height: calc(var(--spacing-lg) * 2);
    background: var(--gray-dark);
    transform: translateX(50%);
  }
  .utilisation-component .util-stats-grid {
    grid-template-columns: 1fr;
  }
  .utilisation-component .util-stats-grid::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: var(--gray-dark);
    transform: translateX(-50%);
  }
}
@media (min-width: 480px) and (max-width: 991.98px) {
  .utilisation-component .util-stats-grid .util-stat:nth-child(odd)::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 100%;
    width: 1rem;
    height: 1px;
    background: var(--gray-dark);
    transform: translateY(-50%);
  }
}
/* ============================================================
   min-width (mobile-first) — smallest → largest
   ============================================================ */
@media (min-width: 441px) {
  .menu-panels .menu-panel {
    padding: 0 var(--spacing-md);
  }
  .offcanvas.offcanvas-bel {
    --bs-offcanvas-width: min(calc(100% - 20px), 475px);
    width: min(100% - 20px, 475px);
    max-width: 475px;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  }
  .container-fluid.custom-padding.small-wrapper {
    padding-left: 50px;
    padding-right: 50px;
  }
}
@media (min-width: 576px) {
  .mower-section .mower-swiper .swiper-slide {
    flex: 0 0 calc((100% - 20px) / 2);
    max-width: calc((100% - 20px) / 2);
    width: calc((100% - 20px) / 2);
  }
}
@media (min-width: 768px) {
  .header-buttons {
    display: inline-flex;
    width: auto;
    gap: 0.5rem;
  }
  .footer-bel .footer-identity {
    margin-right: clamp(2rem, 5vw, 5rem);
  }
}
@media (min-width: 992px) {
  .blog-archive-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .twocolumns .separation-title-left,
  .twocolumns .separation-title-right {
    flex: 1 1 0 !important;
    min-width: 0;
  }
  .utilisation-component .util-route--author {
    display: none;
  }
  .utilisation-component .util-author--top {
    margin-bottom: var(--spacing-lg);
  }
  .utilisation-component:has(.util-first-row .split-layout-image) .util-author--top .util-author-logo::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: calc(100% + 0.9rem);
    left: 50%;
    width: 1px;
    height: clamp(8rem, 12vw, 14rem);
    background: var(--gray-dark);
    transform: translateX(-50%);
  }
  .utilisation-component .util-row--response,
  .utilisation-component .util-stats,
  .utilisation-component .util-stats-grid {
    position: relative;
  }
  .utilisation-component .util-stats::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: var(--spacing-lg);
    left: 87.5%;
    width: 1px;
    background: var(--gray-dark);
    transform: translateX(-50%);
  }
  .utilisation-component .util-stats-grid::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 50%;
    right: 0;
    left: 0;
    height: 1px;
    background: var(--gray-dark);
    transform: translateY(-50%);
  }
  .utilisation-component .util-stats-grid::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 100%;
    left: 12.5%;
    width: 1px;
    height: var(--spacing-lg);
    background: var(--gray-dark);
  }
  .mower-section .mower-swiper .swiper-slide {
    flex: 0 0 calc((100% - 60px) / 3);
    max-width: calc((100% - 60px) / 3);
    width: calc((100% - 60px) / 3);
  }
  .bloc-image-component .container-fluid > .d-flex {
    gap: var(--spacing-lg);
  }
  .bloc-image-component .row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: clamp(2rem, 22vw, 400px);
    --bs-gutter-x: 0;
    margin-inline: 0;
  }
  .bloc-image-component .row > * {
    padding-inline: 0;
    max-width: none;
  }
  .bloc-image-component .row > :has(.bloc-image-media) {
    flex: 0 1 auto;
    width: var(--bloc-img-w, 800px);
  }
  .bloc-image-component .row > .split-layout-content {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }
  .bloc-image-component[data-shape=square] {
    --bloc-img-w: 614px;
  }
  .bloc-image-component[data-shape=wide] {
    --bloc-img-w: 834px;
  }
  .bloc-image-component[data-shape=rectangle] {
    --bloc-img-w: 835px;
  }
  .bloc-image-component .bloc-image-media {
    width: 100%;
    height: auto;
  }
  .bloc-image-component[data-shape=square][data-image-side=left] .split-layout-content {
    margin-right: clamp(2rem, 6vw, 6rem);
  }
  .bloc-image-component[data-shape=square][data-image-side=right] .split-layout-content {
    margin-left: clamp(2rem, 6vw, 6rem);
  }
  .testimonials-section .smartphones-wrapper {
    --smartphones-gap: 150px;
    margin-bottom: -30px !important;
    margin-top: -30px !important;
    gap: var(--smartphones-gap) !important;
  }
  .testimonials-section .smartphones-wrapper .smartphone {
    border-radius: 30px !important;
    border: 7px solid #000 !important;
  }
  .show-desktop {
    display: flex !important;
  }
  .show-mobile {
    display: none !important;
  }
}
/* Optional enhancement: the U-shaped connector follows the images rather
   than the copy, so translated text cannot displace either endpoint. */
@supports (anchor-name: --util-benefits-image) {
  @media (min-width: 992px) {
    .utilisation-component {
      anchor-scope: --util-benefits-image, --util-next-image;
    }
    .utilisation-component .container-fluid {
      position: relative;
    }
    .utilisation-component .util-row--benefits .split-layout-image {
      anchor-name: --util-benefits-image;
    }
    .utilisation-component .util-row--next .split-layout-image {
      anchor-name: --util-next-image;
    }
    .utilisation-component .util-anchor-route {
      display: block;
    }
    .utilisation-component .util-anchor-route span {
      position: absolute;
      z-index: 0;
      display: block;
      box-sizing: border-box;
      pointer-events: none;
      position-anchor: --util-benefits-image;
    }
    .utilisation-component .util-anchor-route-top {
      top: anchor(--util-benefits-image 80%);
      left: anchor(--util-benefits-image right);
      right: calc(anchor(--util-next-image 40%) + var(--radius-md));
      height: 1px;
      background: var(--gray-dark);
    }
    .utilisation-component .util-anchor-route-top-turn {
      top: anchor(--util-benefits-image 80%);
      left: calc(anchor(--util-next-image 40%) - var(--radius-md));
      width: var(--radius-md);
      height: var(--radius-md);
      border-top: 1px solid var(--gray-dark);
      border-right: 1px solid var(--gray-dark);
      border-top-right-radius: var(--radius-md);
    }
    .utilisation-component .util-anchor-route-vertical {
      top: calc(anchor(--util-benefits-image 80%) + var(--radius-md));
      bottom: anchor(--util-next-image top);
      left: anchor(--util-next-image 40%);
      width: 1px;
      background: var(--gray-dark);
    }
  }
}
@media (min-width: 1400px) {
  .blog-archive__layout {
    grid-template-columns: var(--blog-filter-width) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
  }
  .blog-archive__filters {
    position: sticky;
    top: 1.5rem;
    align-self: start;
    z-index: 2;
    max-height: calc(100dvh - 3rem);
    overflow: auto;
  }
  .jvl-component.heading,
  .component-row-wrapper {
    max-width: 1720px;
  }
  .testimonials-section .smartphones-wrapper {
    --smartphones-gap: 300px;
    margin-bottom: -120px !important;
    margin-top: -120px !important;
    gap: var(--smartphones-gap) !important;
  }
  .mower-section .mower-swiper .swiper-slide {
    flex: 0 0 calc((100% - 100px) / 3);
    max-width: calc((100% - 100px) / 3);
    width: calc((100% - 100px) / 3);
  }
}
@media (min-width: 1720px) {
  .container-fluid.custom-padding.small-wrapper {
    padding-left: 50px;
    padding-right: 50px;
  }
}
/* Gutters reach 100px at a 1720px viewport, but the content column is only
   1720px once the 1920px container is full (100 + 1720 + 100). Capping
   .full-width-mobile earlier leaves it wider than the rest of the page. */
@media (min-width: 1920px) {
  .container-fluid.custom-padding.full-width-mobile {
    max-width: 1720px;
    padding-left: 0;
    padding-right: 0;
  }
}
@media (min-width: 992px) and (max-width: 1719.98px) {
  .container-fluid.custom-padding.small-wrapper {
    padding-left: 50px;
    padding-right: 50px;
  }
}
.eal {
  opacity: 0;
  transition-property: opacity, transform;
  transition-timing-function: ease-out;
  will-change: opacity, transform;
}
.eal[data-eal=fade-up] {
  transform: translateY(var(--eal-amount, 60px));
}
.eal[data-eal=fade-up].eal-animated {
  opacity: 1;
  transform: translateY(0);
}
.eal[data-eal=fade-down] {
  transform: translateY(calc(var(--eal-amount, 60px) * -1));
}
.eal[data-eal=fade-down].eal-animated {
  opacity: 1;
  transform: translateY(0);
}
.eal[data-eal=fade-left] {
  transform: translateX(calc(var(--eal-amount, 60px) * -1));
}
.eal[data-eal=fade-left].eal-animated {
  opacity: 1;
  transform: translateX(0);
}
.eal[data-eal=fade-right] {
  transform: translateX(var(--eal-amount, 60px));
}
.eal[data-eal=fade-right].eal-animated {
  opacity: 1;
  transform: translateX(0);
}
.eal[data-eal=zoom-in] {
  transform: scale(var(--eal-amount, 0.8));
}
.eal[data-eal=zoom-in].eal-animated {
  opacity: 1;
  transform: scale(1);
}
.eal[data-eal=zoom-out] {
  transform: scale(var(--eal-amount, 1.2));
}
.eal[data-eal=zoom-out].eal-animated {
  opacity: 1;
  transform: scale(1);
}
.eal[data-eal=flip-up] {
  transform: rotateX(calc(var(--eal-amount, 90deg) * -1));
  transform-origin: top;
}
.eal[data-eal=flip-up].eal-animated {
  opacity: 1;
  transform: rotateX(0deg);
}
.eal[data-eal=flip-down] {
  transform: rotateX(var(--eal-amount, 90deg));
  transform-origin: bottom;
}
.eal[data-eal=flip-down].eal-animated {
  opacity: 1;
  transform: rotateX(0deg);
}
.eal[data-eal=flip-left] {
  transform: rotateY(calc(var(--eal-amount, 90deg) * -1));
  transform-origin: left;
}
.eal[data-eal=flip-left].eal-animated {
  opacity: 1;
  transform: rotateY(0deg);
}
.eal[data-eal=flip-right] {
  transform: rotateY(var(--eal-amount, 90deg));
  transform-origin: right;
}
.eal[data-eal=flip-right].eal-animated {
  opacity: 1;
  transform: rotateY(0deg);
}

[data-hsfc-id=Renderer][data-hsfc-id=Renderer] {
  --hsf-default-field-input__background-color: white!important;
  --hsf-default-field-input__border-color: var(--gray-dark)!important;
  --hsf-default-field-input__font-family: var(--font-display)!important;
  --hsf-field-input__background-color: white!important;
  --hsf-field-input__border-color: var(--gray-dark)!important;
  --hsf-default-field-input__padding: 1em 1.5em!important;
  --hsf-default-field-input__border-radius: var(--radius-sm)!important;
  --hsf-default-field-textarea__border-radius: var(--radius-sm)!important;
  --hsf-default-progressbar-trackLine__background-color: var(--gray)!important;
  --hsf-field-label-requiredindicator__color: var(--dark-green)!important;
}

.hubspot-form-container {
  width: 100%;
}
.hubspot-form-container .hs-form-html {
  width: 100%;
  max-width: 830px;
  font-family: var(--font-display) !important;
}
.hubspot-form-container .hs-form-html .hsfc-Step__Content {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
}
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=text],
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=email],
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=tel],
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=number],
.hubspot-form-container .hs-form-html .hsfc-Step__Content [data-hsfc-id=Renderer] .hsfc-CheckboxInput,
.hubspot-form-container .hs-form-html .hsfc-Step__Content .hsfc-CheckboxInput,
.hubspot-form-container .hs-form-html .hsfc-Step__Content [data-hsfc-id=Renderer] .hsfc-DropdownOptions,
.hubspot-form-container .hs-form-html .hsfc-Step__Content [data-hsfc-id=Renderer] .hsfc-PhoneInput__FlagAndCaret {
  --hsf-default-field-input__background-color: white!important;
  --hsf-default-field-input__border-color: var(--gray-dark)!important;
  --hsf-default-field-input__font-family: var(--font-display)!important;
  --hsf-field-input__background-color: white!important;
  --hsf-field-input__border-color: var(--gray-dark)!important;
  --hsf-heading__font-family: var(--font-display)!important;
  --hsf-heading__color: var(--dark-green)!important;
  --hsf-global__color: var(--dark-green)!important;
  --hsf-default-heading__color: var(--dark-green)!important;
  background-color: white !important;
  border: 1px solid !important;
  border-color: var(--gray-dark) !important;
  font-family: var(--font-display) !important;
}
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=text]:hover,
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=email]:hover,
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=tel]:hover,
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=number]:hover,
.hubspot-form-container .hs-form-html .hsfc-Step__Content [data-hsfc-id=Renderer] .hsfc-CheckboxInput:hover,
.hubspot-form-container .hs-form-html .hsfc-Step__Content .hsfc-CheckboxInput:hover,
.hubspot-form-container .hs-form-html .hsfc-Step__Content [data-hsfc-id=Renderer] .hsfc-DropdownOptions:hover,
.hubspot-form-container .hs-form-html .hsfc-Step__Content [data-hsfc-id=Renderer] .hsfc-PhoneInput__FlagAndCaret:hover {
  border: 1px solid var(--gray-dark) !important;
  box-shadow: none !important;
}
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=text]:focus, .hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=text]:focus-visible, .hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=text]:active,
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=email]:focus,
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=email]:focus-visible,
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=email]:active,
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=tel]:focus,
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=tel]:focus-visible,
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=tel]:active,
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=number]:focus,
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=number]:focus-visible,
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=number]:active,
.hubspot-form-container .hs-form-html .hsfc-Step__Content [data-hsfc-id=Renderer] .hsfc-CheckboxInput:focus,
.hubspot-form-container .hs-form-html .hsfc-Step__Content [data-hsfc-id=Renderer] .hsfc-CheckboxInput:focus-visible,
.hubspot-form-container .hs-form-html .hsfc-Step__Content [data-hsfc-id=Renderer] .hsfc-CheckboxInput:active,
.hubspot-form-container .hs-form-html .hsfc-Step__Content .hsfc-CheckboxInput:focus,
.hubspot-form-container .hs-form-html .hsfc-Step__Content .hsfc-CheckboxInput:focus-visible,
.hubspot-form-container .hs-form-html .hsfc-Step__Content .hsfc-CheckboxInput:active,
.hubspot-form-container .hs-form-html .hsfc-Step__Content [data-hsfc-id=Renderer] .hsfc-DropdownOptions:focus,
.hubspot-form-container .hs-form-html .hsfc-Step__Content [data-hsfc-id=Renderer] .hsfc-DropdownOptions:focus-visible,
.hubspot-form-container .hs-form-html .hsfc-Step__Content [data-hsfc-id=Renderer] .hsfc-DropdownOptions:active,
.hubspot-form-container .hs-form-html .hsfc-Step__Content [data-hsfc-id=Renderer] .hsfc-PhoneInput__FlagAndCaret:focus,
.hubspot-form-container .hs-form-html .hsfc-Step__Content [data-hsfc-id=Renderer] .hsfc-PhoneInput__FlagAndCaret:focus-visible,
.hubspot-form-container .hs-form-html .hsfc-Step__Content [data-hsfc-id=Renderer] .hsfc-PhoneInput__FlagAndCaret:active {
  border: 1px solid var(--dark-green) !important;
  box-shadow: none !important;
}
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=text] input[type=text],
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=text] input[type=email],
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=text] input[type=number],
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=email] input[type=text],
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=email] input[type=email],
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=email] input[type=number],
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=tel] input[type=text],
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=tel] input[type=email],
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=tel] input[type=number],
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=number] input[type=text],
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=number] input[type=email],
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=number] input[type=number],
.hubspot-form-container .hs-form-html .hsfc-Step__Content [data-hsfc-id=Renderer] .hsfc-CheckboxInput input[type=text],
.hubspot-form-container .hs-form-html .hsfc-Step__Content [data-hsfc-id=Renderer] .hsfc-CheckboxInput input[type=email],
.hubspot-form-container .hs-form-html .hsfc-Step__Content [data-hsfc-id=Renderer] .hsfc-CheckboxInput input[type=number],
.hubspot-form-container .hs-form-html .hsfc-Step__Content .hsfc-CheckboxInput input[type=text],
.hubspot-form-container .hs-form-html .hsfc-Step__Content .hsfc-CheckboxInput input[type=email],
.hubspot-form-container .hs-form-html .hsfc-Step__Content .hsfc-CheckboxInput input[type=number],
.hubspot-form-container .hs-form-html .hsfc-Step__Content [data-hsfc-id=Renderer] .hsfc-DropdownOptions input[type=text],
.hubspot-form-container .hs-form-html .hsfc-Step__Content [data-hsfc-id=Renderer] .hsfc-DropdownOptions input[type=email],
.hubspot-form-container .hs-form-html .hsfc-Step__Content [data-hsfc-id=Renderer] .hsfc-DropdownOptions input[type=number],
.hubspot-form-container .hs-form-html .hsfc-Step__Content [data-hsfc-id=Renderer] .hsfc-PhoneInput__FlagAndCaret input[type=text],
.hubspot-form-container .hs-form-html .hsfc-Step__Content [data-hsfc-id=Renderer] .hsfc-PhoneInput__FlagAndCaret input[type=email],
.hubspot-form-container .hs-form-html .hsfc-Step__Content [data-hsfc-id=Renderer] .hsfc-PhoneInput__FlagAndCaret input[type=number] {
  height: 32px;
}
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=text] [data-hsfc-id=Renderer] .hsfc-PhoneInput:not(.hsfc-PhoneInput--rtl) .hsfc-PhoneInput__FlagAndCaret,
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=text] [data-hsfc-id=Renderer] .hsfc-PhoneInput__FlagAndCaret,
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=email] [data-hsfc-id=Renderer] .hsfc-PhoneInput:not(.hsfc-PhoneInput--rtl) .hsfc-PhoneInput__FlagAndCaret,
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=email] [data-hsfc-id=Renderer] .hsfc-PhoneInput__FlagAndCaret,
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=tel] [data-hsfc-id=Renderer] .hsfc-PhoneInput:not(.hsfc-PhoneInput--rtl) .hsfc-PhoneInput__FlagAndCaret,
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=tel] [data-hsfc-id=Renderer] .hsfc-PhoneInput__FlagAndCaret,
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=number] [data-hsfc-id=Renderer] .hsfc-PhoneInput:not(.hsfc-PhoneInput--rtl) .hsfc-PhoneInput__FlagAndCaret,
.hubspot-form-container .hs-form-html .hsfc-Step__Content input[type=number] [data-hsfc-id=Renderer] .hsfc-PhoneInput__FlagAndCaret,
.hubspot-form-container .hs-form-html .hsfc-Step__Content [data-hsfc-id=Renderer] .hsfc-CheckboxInput [data-hsfc-id=Renderer] .hsfc-PhoneInput:not(.hsfc-PhoneInput--rtl) .hsfc-PhoneInput__FlagAndCaret,
.hubspot-form-container .hs-form-html .hsfc-Step__Content [data-hsfc-id=Renderer] .hsfc-CheckboxInput [data-hsfc-id=Renderer] .hsfc-PhoneInput__FlagAndCaret,
.hubspot-form-container .hs-form-html .hsfc-Step__Content .hsfc-CheckboxInput [data-hsfc-id=Renderer] .hsfc-PhoneInput:not(.hsfc-PhoneInput--rtl) .hsfc-PhoneInput__FlagAndCaret,
.hubspot-form-container .hs-form-html .hsfc-Step__Content .hsfc-CheckboxInput [data-hsfc-id=Renderer] .hsfc-PhoneInput__FlagAndCaret,
.hubspot-form-container .hs-form-html .hsfc-Step__Content [data-hsfc-id=Renderer] .hsfc-DropdownOptions [data-hsfc-id=Renderer] .hsfc-PhoneInput:not(.hsfc-PhoneInput--rtl) .hsfc-PhoneInput__FlagAndCaret,
.hubspot-form-container .hs-form-html .hsfc-Step__Content [data-hsfc-id=Renderer] .hsfc-DropdownOptions [data-hsfc-id=Renderer] .hsfc-PhoneInput__FlagAndCaret,
.hubspot-form-container .hs-form-html .hsfc-Step__Content [data-hsfc-id=Renderer] .hsfc-PhoneInput__FlagAndCaret [data-hsfc-id=Renderer] .hsfc-PhoneInput:not(.hsfc-PhoneInput--rtl) .hsfc-PhoneInput__FlagAndCaret,
.hubspot-form-container .hs-form-html .hsfc-Step__Content [data-hsfc-id=Renderer] .hsfc-PhoneInput__FlagAndCaret [data-hsfc-id=Renderer] .hsfc-PhoneInput__FlagAndCaret {
  height: 32px !important;
  border-right: 0 !important;
}
.hubspot-form-container .hs-form-html .hsfc-Step__Content textarea {
  background: white !important;
  font-family: var(--font-display) !important;
}
.hubspot-form-container .hs-form-html .hsfc-Step__Content textarea:hover {
  border: 1px solid var(--orange) !important;
  box-shadow: none !important;
}
.hubspot-form-container .hs-form-html .hsfc-Step__Content textarea:focus, .hubspot-form-container .hs-form-html .hsfc-Step__Content textarea:focus-visible, .hubspot-form-container .hs-form-html .hsfc-Step__Content textarea:active {
  border: 1px solid var(--orange) !important;
  box-shadow: none !important;
}
.hubspot-form-container .hs-form-html .hsfc-Step__Content [data-hsfc-id=FieldLabel] {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}
.hubspot-form-container .hs-form-html .hsfc-Step__Content [data-hsfc-id=Renderer] .hsfc-Button:not([disabled]),
.hubspot-form-container .hs-form-html .hsfc-Step__Content button[type=submit],
.hubspot-form-container .hs-form-html .hsfc-Step__Content button[type=button],
.hubspot-form-container .hs-form-html .hsfc-Step__Content .hsfc-Button {
  background-color: var(--orange) !important;
  color: #fff !important;
  border: 2px solid var(--orange) !important;
  padding-top: clamp(10px, 2vw, 15px) !important;
  padding-bottom: clamp(10px, 2vw, 15px) !important;
  padding-left: clamp(20px, 2vw, 30px) !important;
  padding-right: clamp(20px, 2vw, 30px) !important;
  border-radius: var(--radius-sm) !important;
  --min: 0.9375rem;
  --val: calc(0.9375rem + ((1vw - 0.234375rem) * 0.4695));
  --max: 1.25rem;
  font-size: clamp(var(--min), var(--val), var(--max)) !important;
  min-height: 0vw;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transform: none !important;
}
.hubspot-form-container .hs-form-html .hsfc-Step__Content [data-hsfc-id=Renderer] .hsfc-Button:not([disabled]):not([disabled]):hover,
.hubspot-form-container .hs-form-html .hsfc-Step__Content button[type=submit]:not([disabled]):hover,
.hubspot-form-container .hs-form-html .hsfc-Step__Content button[type=button]:not([disabled]):hover,
.hubspot-form-container .hs-form-html .hsfc-Step__Content .hsfc-Button:not([disabled]):hover {
  background-color: var(--orange) !important;
  border: 2px solid var(--orange) !important;
  transform: none !important;
  box-shadow: none !important;
}
.hubspot-form-container .hs-form-html .hsfc-Step__Content .hsfc-Heading {
  color: var(--dark-green) !important;
  font-family: var(--font-display) !important;
  font-size: var(--font-size-2) !important;
}
.hubspot-form-container .hs-form-html .hsfc-Step__Content > .hsfc-Row:has(> [data-hsfc-id=ProgressBar]) {
  order: -1 !important;
}
.hubspot-form-container .hs-form-html .hsfc-ProgressBar__Text {
  font-weight: 700 !important;
  font-family: var(--font-display) !important;
  text-align: end !important;
}
.hubspot-form-container .hs-form-html [data-hsfc-id=Renderer] .hsfc-ProgressBar__Progress {
  background-color: var(--gray) !important;
  height: 20px !important;
}
.hubspot-form-container .hs-form-html [data-hsfc-id=Renderer] .hsfc-ProgressBar__Progress > div {
  background-color: var(--gray-dark) !important;
  height: 20px !important;
}
.hubspot-form-container .hs-form-html .hsfc-DropdownInput {
  font-family: var(--font-display) !important;
}
.hubspot-form-container .hs-form-html .hsfc-ErrorAlert {
  font-size: 13px !important;
}

@media (min-width: 768px) {
  input[type=text],
  input[type=email],
  input[type=tel],
  input[type=number] {
    height: 60px;
  }
  [data-hsfc-id=Renderer] .hsfc-Button:not([disabled]),
  button[type=submit],
  button[type=button] button[type=button]:not(.language-switcher),
  .hsfc-Button {
    padding: 15px 30px;
  }
}
.form-modal {
  --bs-modal-padding: 30px;
  --bs-modal-header-padding: 30px;
  --bs-modal-header-padding-x: 30px;
  --bs-modal-header-padding-y: 30px;
  --bs-modal-header-border-width: 0;
  --bs-modal-width: min(890px, calc(100vw - 3.5rem));
}
.form-modal .modal-header {
  border-bottom: 0;
}
.form-modal .modal-header h2 {
  margin: 0;
}
.form-modal .modal-body {
  padding-top: 0;
}
.form-modal .hsfc-NavigationRow {
  margin-top: 0 !important;
}
.form-modal .hsfc-NavigationRow__Alerts {
  margin-bottom: 0 !important;
}

/* =============================================================
   Macaron — sticker "indice de réparabilité" (composant réutilisable)
   Utilisé dans le hero des pages modèles (header_model) et dans intro.
   ============================================================= */
:root {
  --repa-green: #3aaa35;
}

.macaron {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  width: clamp(135px, 14vw, 175px);
  /* Couleur héritée du contexte : claire sur le hero produit, sombre dans la hero-card. */
}
.macaron-badge {
  display: flex;
  align-items: stretch;
  background: var(--white);
  border: 2px solid var(--repa-green);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.macaron-icon {
  flex: 0 0 44%;
  background: var(--repa-green);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(7px, 1vw, 12px);
}
.macaron-icon svg {
  width: 100%;
  height: auto;
  max-width: 56px;
  display: block;
}
.macaron-value {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4px clamp(7px, 1vw, 12px);
  line-height: 1;
  font-family: var(--font-display);
  font-weight: var(--fw-800);
  color: #111;
}
.macaron-value .num {
  font-size: var(--font-size-2);
  letter-spacing: -0.02em;
}
.macaron-value .denom {
  align-self: flex-end;
  font-size: var(--font-size-small);
}
.macaron-label {
  text-align: center;
  text-transform: uppercase;
  font-family: var(--font-display);
  font-weight: var(--fw-700);
  font-size: var(--font-size-small);
  letter-spacing: 0.02em;
  line-height: 1.3;
}