/* =========================================================================
   Syngenta Maroc — design tokens (from the "final new" Figma page)
   ========================================================================= */
:root {
  --syn-green-900: #1d3600;
  --syn-green-800: #264600;   /* dark bands, footer */
  --syn-green-700: #26400f;   /* tiles on dark bands */
  --syn-green-600: #007a2f;
  --syn-green-500: #009933;   /* primary buttons */
  --syn-green-400: #52e600;   /* highlighted words on dark */
  --syn-green-link: #4a7c1f;
  --syn-green-leaf: #5a7d2a;   /* icon glyphs and their hover accents */
  --syn-teal-ink: #1d5c63;
  --syn-card-hover: #264600;   /* crop-card hover panel, per-card via field_accent */
  --syn-brick: #ba2c00;
  --syn-orange: #eb8200;
  --syn-orange-600: #d17400;
  --syn-amber: #fdab00;        /* spotlight numbers and buttons */

  --syn-ink: #111827;
  --syn-ink-soft: #1f2937;
  --syn-body: #6b7280;
  --syn-muted: #8a8f98;
  --syn-gray-500: #667085;

  --syn-bg: #ffffff;
  --syn-bg-soft: #f9f9f9;
  --syn-bg-tint: #e8eff0;
  --syn-border: #ececec;

  --r-band: 40px;
  --r-xl: 28px;
  --r-lg: 20px;
  --r-md: 16px;
  --r-sm: 10px;
  --r-pill: 999px;

  --container: 1200px;
  --gutter: 24px;
  --section-y: 100px;

  --shadow-card: 0 6px 24px rgba(17, 24, 39, 0.06);
  --shadow-raise: 0 12px 28px rgba(0, 153, 51, 0.22);
  --shadow-soft: 0 10px 30px rgba(17, 24, 39, 0.08);

  --font-heading: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Noto Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --icon-arrow-disc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='white'/%3E%3Cpath d='M7 12h10M13 8l4 4-4 4' fill='none' stroke='%23009933' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E");
  --icon-search-plain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
  --icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .3 1.9.6 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.5 2.8.6a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E");
  --icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='M5 7l7 6 7-6'/%3E%3C/svg%3E");
  --icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007329' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  --icon-arrow-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23009933' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --icon-arrow-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8f98' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b3024' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 11l5 5 5-5M4 20h16'/%3E%3C/svg%3E");
  --icon-pin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7m0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E");
}

/* =========================================================================
   Base
   ========================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--syn-body);
  background: var(--syn-bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  color: var(--syn-ink);
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: break-word;
}

.page { overflow-x: clip; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--syn-green-500); text-decoration: none; }
a:hover { text-decoration: underline; }

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

ul { margin: 0; padding: 0; list-style: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* =========================================================================
   Shared section furniture
   ========================================================================= */
.section { padding-block: var(--section-y); }

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 60px;
}
.section__head--centered {
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
}
/* Heading left, intro text in a second column. */
.section__head--split {
  display: grid;
  grid-template-columns: minmax(0, 532px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.section__intro--wide { max-width: none; text-align: justify; }
.section__intro--wide p + p { margin-top: 1em; }
.section__head-text { max-width: 720px; }
.section__head--centered .section__title { max-width: 880px; }

.section__title {
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  line-height: 1.2;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}
.section__intro {
  max-width: 600px;
  color: var(--syn-body);
  font-size: 1rem;
  line-height: 1.5;
}
.section__cta { flex: none; }

.eyebrow {
  margin: 0 0 12px;
  font-size: 0.94rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--syn-orange);
}

.hl { color: var(--syn-green-500); }

/* =========================================================================
   Icons
   ========================================================================= */
.card__arrow,
.btn__icon::after {
  display: inline-block;
  flex: none;
  width: 16px; height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
}

/* Arrow inside a white disc, used on the green CTA buttons. */
.btn__icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  color: var(--syn-green-500);
}
.btn__icon::after { content: ""; width: 14px; height: 14px; }

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 28px;
  border: 1px solid transparent;
  border-radius: 12px;
  font: inherit;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn:hover { text-decoration: none; }

.btn--primary { background: var(--syn-green-500); color: #fff; }
.btn--primary:hover { background: var(--syn-green-600); color: #fff; }
/* Section CTA (Figma 1139:4826), same component as the hero primary: the
   icon disc swells to fill the button on hover (1413:4107). */
.btn--raised {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 2px solid var(--syn-green-500);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(45, 106, 45, 0.3);
  transition: color 0.35s ease;
}
.btn--raised::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: 28px;
  width: 24px; height: 24px;
  margin-top: -12px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.45s ease;
}
.btn--primary.btn--raised:hover,
.btn--primary.btn--raised:focus-visible { background: var(--syn-green-500); color: var(--syn-green-500); }
.btn--raised:hover::before,
.btn--raised:focus-visible::before { transform: scale(32); }
@media (prefers-reduced-motion: reduce) {
  .btn--raised::before { transition: none; }
}

.btn--accent { background: var(--syn-orange); color: #fff; }
.btn--accent:hover { background: var(--syn-orange-600); color: #fff; }

/* On dark or photo backgrounds, filled buttons take a white outline on hover
   (Figma button sets 138:2956, 171:1366, 288:1820). The darker fill above
   stays for buttons on white, where a white outline would be invisible. */
.card-grid--numbered .btn--accent { border-radius: var(--r-pill); background: var(--syn-amber); }
.card-grid--numbered .btn--accent:hover,
.card-grid--numbered .btn--accent:focus-visible { border-color: #fff; background: var(--syn-amber); }

.btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.85); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

.btn--pill { border-radius: var(--r-pill); }
.btn--sm { gap: 8px; padding: 10px 24px; font-size: 0.84rem; border-radius: 8px; }

/* =========================================================================
   Site header
   ========================================================================= */
.site-header {
  position: relative;
  z-index: 20;
  background: var(--syn-green-800);
  color: #fff;
}
.site-header--overlay {
  position: absolute;
  inset: 0 0 auto;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.08) 75%, rgba(0, 0, 0, 0) 100%);
}

.site-header__top-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding-block: 20px 18px;
}

.site-header__global {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.site-header__global:hover { text-decoration: none; opacity: 0.85; }
.site-header__globe {
  flex: none;
  display: inline-block;
  width: 17px; height: 17px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  position: relative;
}
.site-header__globe::after {
  content: "";
  position: absolute; inset: -1.5px 3.5px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.site-header__brand {
  justify-self: center;
  text-align: right;
  color: #fff;
  line-height: 1;
}
.site-header__brand:hover { text-decoration: none; }
/* The brand mark exported from Figma: white wordmark, green leaf. */
.site-header__logo {
  display: block;
  width: 140px;
  height: auto;
}
.site-header__country {
  display: block;
  margin-top: 1px;
  font-size: 0.68rem;
  text-align: right;
}

.site-header__actions {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 22px;
}
.site-header__actions .btn { border-radius: var(--r-pill); }
.site-header__search {
  width: 20px; height: 20px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
.site-header__search::before {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px;
  border: 1.8px solid #fff;
  border-radius: 50%;
}
.site-header__search::after {
  content: "";
  position: absolute; right: 2px; bottom: 3px;
  width: 6px; height: 1.8px;
  background: #fff;
  transform: rotate(45deg);
}

/* Hamburger: hidden on desktop, shown with the panel below 900px. */
.site-header__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-left: -10px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}
.site-header__burger-bars,
.site-header__burger-bars::before,
.site-header__burger-bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.site-header__burger-bars { position: relative; }
.site-header__burger-bars::before,
.site-header__burger-bars::after {
  content: "";
  position: absolute;
  left: 0;
}
.site-header__burger-bars::before { top: -7px; }
.site-header__burger-bars::after { top: 7px; }
/* Bars fold into a cross while the panel is open. */
.is-nav-open .site-header__burger-bars { background: transparent; }
.is-nav-open .site-header__burger-bars::before { transform: translateY(7px) rotate(45deg); }
.is-nav-open .site-header__burger-bars::after { transform: translateY(-7px) rotate(-45deg); }

.site-header__global--in-panel { display: none; }

.site-header__nav > .container > * { border-top: 1px solid rgba(255, 255, 255, 0.28); }
.site-header__nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  padding: 22px 8px;
}
/* Menu items without a URL render as <span>, so both are styled alike. */
.site-header__nav a,
.site-header__nav li > span {
  color: #fff;
  font-size: 0.94rem;
  font-weight: 500;
}
.site-header__nav a:hover { text-decoration: none; opacity: 0.8; }
.site-header__nav li.menu-item--expanded > a::after {
  content: "";
  display: inline-block;
  margin-left: 7px;
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
}

/* Submenus drop below their parent on hover or keyboard focus. */
.site-header__nav li { position: relative; }
.site-header__nav ul ul {
  position: absolute;
  top: 100%;
  left: -14px;
  z-index: 20;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  min-width: 200px;
  padding: 12px 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-sm);
  background: var(--syn-green-800);
  box-shadow: var(--shadow-soft);
}
.site-header__nav li:hover > ul,
.site-header__nav li:focus-within > ul { display: flex; }
.site-header__nav ul ul li { width: 100%; }
.site-header__nav ul ul a { display: block; padding: 7px 14px; }
.site-header__nav ul ul a:hover { opacity: 1; background: rgba(255, 255, 255, 0.1); }

/* The hero states the page title, so the title block is hidden there. */
.page--has-hero #block-syngenta-theme-page-title { display: none; }

/* =========================================================================
   Hero
   ========================================================================= */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(640px, 100svh, 980px);
  padding-block: 190px 110px;
  background-color: var(--syn-green-800);
  background-size: cover;
  background-position: center;
  color: #fff;
}
.hero > .container { position: relative; }
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.2) 55%, rgba(0, 0, 0, 0) 100%);
}
.hero__inner { max-width: 700px; }

/* Inner pages: shorter hero, everything centred. */
.hero--center {
  min-height: 620px;
  padding-block: 190px 90px;
  text-align: center;
}
.hero--center .hero__scrim {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.3) 100%);
}
.hero--center .hero__inner { max-width: 900px; margin-inline: auto; }
.hero--center .hero__title { margin-bottom: 14px; font-size: clamp(2rem, 4.4vw, 3.3rem); }
.hero--center .hero__subtitle { max-width: 780px; margin-inline: auto; font-size: 1rem; }

.hero__badge {
  display: inline-block;
  margin: 0 0 30px;
  padding: 5px 13px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(35px);
  backdrop-filter: blur(35px);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 20px;
}

.hero__title {
  margin-bottom: 30px;
  color: #fff;
  font-size: clamp(2rem, 4.4vw, 3.44rem);
  line-height: 1.16;
}
.hero__title .hl { color: var(--syn-green-400); }

.hero__subtitle {
  max-width: 640px;
  font-size: 1.125rem;
  line-height: 1.45;
  color: #fff;
}

/* Multi-value link fields render as bare nested divs, so the wrappers collapse
   and each link is styled by position: primary, outline, then text links. */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 48px;
}
.hero__actions > *,
.hero__actions > * > * { display: contents; }
/* Outline button: fills white with a green label on hover (Figma 1413:4119). */
.hero__actions a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 16px 28px;
  border: 2px solid #fff;
  border-radius: 14px;
  color: #fff;
  font-weight: 500;
  font-size: 0.94rem;
  line-height: 1.5;
  box-shadow: 0 2px 6px rgba(45, 106, 45, 0.08);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.hero__actions a:hover,
.hero__actions a:focus-visible {
  background: #fff;
  color: var(--syn-green-500);
  text-decoration: none;
}

/* Primary button: on hover the white disc behind the arrow swells until it
   fills the button, leaving a green label and arrow on white
   (Figma 1413:4107). The disc is painted under the label via ::before with
   z-index -1 inside an isolated stacking context. */
.hero__actions > * > :first-child a {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 16px 26px;
  border-color: var(--syn-green-500);
  border-radius: 16px;
  background: var(--syn-green-500);
  box-shadow: 0 4px 14px rgba(45, 106, 45, 0.3);
  transition: color 0.35s ease;
}
.hero__actions > * > :first-child a::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: 26px;
  width: 24px; height: 24px;
  margin-top: -12px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.45s ease;
}
.hero__actions > * > :first-child a::after {
  content: "";
  width: 24px; height: 24px;
  background: var(--icon-arrow-disc) center / contain no-repeat;
}
.hero__actions > * > :first-child a:hover,
.hero__actions > * > :first-child a:focus-visible {
  background: var(--syn-green-500);
  color: var(--syn-green-500);
}
.hero__actions > * > :first-child a:hover::before,
.hero__actions > * > :first-child a:focus-visible::before { transform: scale(32); }

@media (prefers-reduced-motion: reduce) {
  .hero__actions a,
  .hero__actions > * > :first-child a::before { transition: none; }
}

.hero__actions > * > :nth-child(n + 3) { display: block; flex-basis: 100%; }
.hero__actions > * > :nth-child(n + 3) a {
  min-height: 0;
  padding: 0;
  border: 0;
  gap: 8px;
  font-size: 0.94rem;
}
.hero__actions > * > :nth-child(n + 3) a::before {
  content: "";
  width: 16px; height: 16px;
  background-color: var(--syn-green-500);
  -webkit-mask: var(--icon-pin) center / contain no-repeat;
  mask: var(--icon-pin) center / contain no-repeat;
}
.hero__actions > * > :nth-child(n + 3) a:hover,
.hero__actions > * > :nth-child(n + 3) a:focus-visible { background: none; color: #fff; text-decoration: underline; }

/* =========================================================================
   Cards
   ========================================================================= */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  overflow: hidden;
}
.card__media {
  position: relative;
  aspect-ratio: 384 / 487;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--syn-bg-soft);
}

/* Media entities render through a few nested wrappers, so the image is pinned
   to the tile rather than relying on an unbroken height:100% chain. */
.card__media img,
.feature__media img,
.teaser__media img,
.media-tile__media img,
.media-tile__media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card__number {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--syn-orange);
}
.card__title { margin-bottom: 8px; font-size: 1.2rem; }
.card__text { font-size: 0.92rem; }
.card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #fff;
}
.card__link:hover { text-decoration: none; }

/* Drupal wraps multi-value fields in a field div; letting it collapse keeps the
   paragraph items as direct grid children. */
.card-grid__items > *,
.features__items > *,
.numbered__items > * {
  display: contents;
}
/* The media band template wraps each item itself (.media-band__item), so its
   children must keep their boxes. */
.media-band__item .media-tile { width: 100%; }

/* Grid variant: image tiles with the crop name over the photo; the whole tile
   is the link. */
.card-grid__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* The photo carries no text at rest; hovering slides a coloured panel over it
   with the crop name, its description and the link (Figma Card-9, 1392:4100). */
.card-grid--grid .card,
.card-grid--split .card { border-radius: 30px; }
.card-grid--grid .card__media,
.card-grid--split .card__media { border-radius: 30px; }
.card-grid--grid .card__media img,
.card-grid--split .card__media img { transition: transform 0.45s ease; }
.card-grid--grid .card:hover .card__media img,
.card-grid--split .card:hover .card__media img,
.card-grid--grid .card:focus-within .card__media img,
.card-grid--split .card:focus-within .card__media img { transform: scale(1.04); }

.card-grid--grid .card__body,
.card-grid--split .card__body {
  position: absolute;
  inset: 7.7% 7.7%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 24px;
  border-radius: 44px;
  background: var(--syn-card-hover);
  color: #fff;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card-grid--grid .card:hover .card__body,
.card-grid--split .card:hover .card__body,
.card-grid--grid .card:focus-within .card__body,
.card-grid--split .card:focus-within .card__body { opacity: 1; }

/* Each crop carries its own panel colour (Figma Card-9 variants). */
.card--brick .card__body { background: var(--syn-brick); }
.card--orange .card__body { background: var(--syn-orange); }
.card--teal .card__body { background: var(--syn-teal-ink); }

.card-grid--grid .card__title,
.card-grid--split .card__title {
  margin: 0 0 14px;
  color: #fff;
  font-size: 1.49rem;
  font-weight: 500;
}
.card-grid--grid .card__text,
.card-grid--split .card__text {
  max-width: 283px;
  color: #fff;
  font-size: 1rem;
  line-height: 1.35;
}
.card-grid--grid .card__link,
.card-grid--split .card__link {
  margin-top: 37px;
  font-size: 1.125rem;
  font-weight: 500;
}
/* Keeps the whole tile clickable while the label lives inside the panel. */
.card-grid--grid .card__link::before,
.card-grid--split .card__link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}


@media (prefers-reduced-motion: reduce) {
  .card-grid--grid .card__media img,
  .card-grid--split .card__media img,
  .card-grid--grid .card__body,
  .card-grid--split .card__body { transition: none; }
}

/* Featured variant: the lead story of a listing page. */
.card-grid--featured .card-grid__items { grid-template-columns: 1fr; }
.card-grid--featured .card {
  display: grid;
  grid-template-columns: 650fr 550fr;
  gap: 60px;
  align-items: center;
  border-radius: 0;
  overflow: visible;
}
.card-grid--featured .card__media {
  aspect-ratio: 650 / 520;
  border-radius: var(--r-md);
}
.card-grid--featured .card__body { padding: 0; }
.card-grid--featured .card__meta {
  margin: 0 0 18px;
  color: var(--syn-green-600);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.card-grid--featured .card__title { margin-bottom: 18px; font-size: clamp(1.6rem, 2.8vw, 2.25rem); line-height: 1.3; }
.card-grid--featured .card__text { color: var(--syn-gray-500); font-size: 1rem; line-height: 1.6; }
.card-grid--featured .card__link {
  gap: 12px;
  margin-top: 28px;
  padding: 16px 26px;
  border-radius: 8px;
  background: var(--syn-green-500);
  font-size: 1rem;
}
.card-grid--featured .card__link:hover { background: var(--syn-green-600); }
.card-grid--featured .card__arrow {
  width: 24px; height: 24px;
  background: var(--icon-arrow-disc) center / contain no-repeat;
  -webkit-mask: none;
  mask: none;
}

/* The filter bar spans the grid; its own look lives in "Listing filters". */
.block-ref__content .views-exposed-form,
.block-ref__content .pager { grid-column: 1 / -1; }
.block-ref__content .views-exposed-form { margin-bottom: 40px; }

/* Pager */
.dealers__list .pager__items,
.block-ref__content .pager__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 48px;
}
.dealers__list .pager__item a,
.block-ref__content .pager__item a {
  display: grid;
  place-items: center;
  min-width: 42px;
  padding: 10px 14px;
  border: 1px solid var(--syn-border);
  border-radius: 8px;
  color: var(--syn-ink);
  font-size: 0.95rem;
}
.dealers__list .pager__item.is-active a,
.block-ref__content .pager__item.is-active a {
  border-color: var(--syn-green-500);
  background: var(--syn-green-500);
  color: #fff;
}
.dealers__list .pager__item a:hover,
.block-ref__content .pager__item a:hover { text-decoration: none; border-color: var(--syn-green-500); }

/* Spotlight variant */
.card-grid--spotlight { background: var(--syn-bg-soft); }
.card-grid--spotlight .section__title { color: #03030f; font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; }
.spotlight {
  display: grid;
  grid-template-columns: 813fr 396fr;
  gap: 18px;
}
.spotlight__rest {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 22px;
}
/* Hovering a spotlight card zooms the photo and lights the number and button
   up in full amber (Figma 290:1911 feature card, 290:1914 compact cards). */
.spotlight .card {
  justify-content: flex-end;
  height: 100%;
  border-radius: 22px;
}
.spotlight .card__media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border-radius: inherit;
}
.spotlight .card__media img {
  transform-origin: 50% 100%;
  transition: transform 0.5s ease;
}
.spotlight .card:hover .card__media img,
.spotlight .card:focus-within .card__media img { transform: scale(1.06); }
.spotlight .card__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0, 44, 34, 0.9) 0%, rgba(0, 44, 34, 0.4) 24%, rgba(0, 44, 34, 0) 51%);
}
.spotlight .card__body {
  position: relative;
  padding: 48px;
  color: #fff;
}
.spotlight .card__title { color: #fff; font-size: 2.25rem; font-weight: 700; line-height: 1.1; }
.spotlight .card__text { max-width: 545px; color: rgba(236, 253, 245, 0.9); font-size: 1.125rem; line-height: 1.55; }
.spotlight .card__number {
  font-family: var(--font-body);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(253, 171, 0, 0.55);
  transition: color 0.25s ease;
}
.spotlight .card:hover .card__number,
.spotlight .card:focus-within .card__number { color: var(--syn-amber); }

/* Feature button: the label rolls up and an identical copy (data-label)
   rolls in from below, while a white outline appears (Figma 288:1820). */
.spotlight__feature .card__link {
  overflow: hidden;
  gap: 14px;
  margin-top: 26px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--syn-amber);
  font-size: 1rem;
  transition: border-color 0.25s ease;
}
.spotlight__feature .card__link:hover,
.spotlight__feature .card__link:focus-visible { border-color: #fff; text-decoration: none; }
.card__link-label {
  position: relative;
  display: inline-block;
  transition: transform 0.35s ease;
}
.spotlight__feature .card__link-label::after {
  content: attr(data-label);
  position: absolute;
  left: 0;
  top: 100%;
  padding-top: 14px;
  white-space: nowrap;
}
.spotlight__feature .card__link:hover .card__link-label,
.spotlight__feature .card__link:focus-visible .card__link-label {
  transform: translateY(calc(-100% - 14px));
}
.spotlight__feature .card { min-height: 600px; }

.spotlight__rest .card { min-height: 288px; }
.spotlight__rest .card__media::after {
  background: linear-gradient(0deg, rgba(0, 44, 34, 0.9) 12%, rgba(0, 44, 34, 0.2) 63%, rgba(0, 44, 34, 0) 76%);
}
.spotlight__rest .card__body { padding: 28px 32px; }
.spotlight__rest .card__number { font-size: 1.125rem; margin-bottom: 4px; }
.spotlight__rest .card__title { margin-bottom: 4px; font-size: 1.375rem; }
.spotlight__rest .card__text { font-size: 0.875rem; line-height: 1.45; }
/* Compact cards swap the text button for a round arrow. */
.spotlight__rest .card__link {
  justify-content: center;
  width: 40px; height: 40px;
  margin-top: 18px;
  padding: 0;
  gap: 0;
  border-radius: var(--r-pill);
  font-size: 0;
  background: rgba(255, 255, 255, 0.2);
  transition: background-color 0.25s ease;
}
.spotlight__rest .card:hover .card__link,
.spotlight__rest .card:focus-within .card__link { background: var(--syn-amber); }

@media (prefers-reduced-motion: reduce) {
  .spotlight .card__media img,
  .card__link-label { transition: none; }
}

/* Numbered variant */
.card-grid--numbered {
  background: var(--syn-green-800);
  color: #fff;
  border-radius: var(--r-band) var(--r-band) 0 0;
}
.numbered {
  display: grid;
  grid-template-columns: minmax(0, 609px) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.numbered__media {
  align-self: stretch;
  min-height: 640px;
  border-radius: 24px;
  background-color: var(--syn-green-900);
  background-size: cover;
  background-position: center;
}
.numbered__panel { position: relative; padding-top: 24px; }
.numbered__title {
  color: #fff;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.numbered__title .hl { color: var(--syn-green-400); }
.numbered__intro { max-width: 566px; margin-bottom: 36px; color: #fff; font-size: 1rem; line-height: 1.6; }
.numbered__items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  width: calc(100% + 224px);
  margin: 60px 0 0 -224px;
}
/* Glass tiles that lift 18px on hover (Figma Component 40, 34:826). */
.numbered__items .card {
  padding: 30px 26px;
  border: 0.65px solid rgba(255, 255, 255, 0.38);
  border-radius: 14px;
  background: rgba(37, 55, 37, 0.37);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  transition: transform 0.3s ease;
}
.numbered__items .card:hover,
.numbered__items .card:focus-within { transform: translateY(-18px); }
@media (prefers-reduced-motion: reduce) {
  .numbered__items .card { transition: none; }
}
.numbered__items .card__media { display: none; }
.numbered__items .card__body { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; }
.numbered__items .card__number {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: #fff;
}
.numbered__items .card__title {
  grid-column: 1;
  grid-row: 1;
  margin-bottom: 14px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
}
.numbered__items .card__text { grid-column: 1 / -1; color: rgba(255, 255, 255, 0.9); font-size: 0.94rem; line-height: 1.55; }

/* =========================================================================
   Feature cards
   ========================================================================= */
.features__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px;
}
.feature__title { margin-bottom: 14px; font-size: 1.375rem; font-weight: 500; color: var(--syn-ink-soft); }
.feature__text { font-size: 0.875rem; line-height: 1.55; color: var(--syn-muted); }
.feature__link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--syn-teal-ink);
}
.feature__link:hover { text-decoration: none; }
.feature__link .card__arrow {
  width: 32px; height: 32px;
  border-radius: 50%;
  background-color: var(--syn-bg-tint);
  -webkit-mask: none;
  mask: none;
  position: relative;
}
.feature__link .card__arrow::after {
  content: "";
  position: absolute;
  inset: 9px;
  background-color: var(--syn-teal-ink);
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
}

/* Photo cards: leaf-shaped image, text underneath (Figma Component 60, hover
   state 293:1042). Two layouts share it: "media" sits straight on the page,
   "cards" on a light panel ("Notre présence et nos engagements"). Hovering
   turns either into a white card with a green top rule. */
.features--media .feature,
.features--cards .feature {
  padding: 20px;
  border-top: 4px solid transparent;
  border-radius: 24px;
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
/* The padding exists at rest too; the negative margin keeps the bare
   variant's photo aligned with the grid, so the panel appears in place. */
.features--media .feature { margin: -20px; }
.features--cards .feature {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--syn-bg-soft);
}
.features--media .feature:hover,
.features--media .feature:focus-within,
.features--cards .feature:hover,
.features--cards .feature:focus-within {
  border-top-color: var(--syn-green-500);
  background: #fff;
  box-shadow: 0 18px 40px rgba(17, 24, 39, 0.1);
}

.features--media .feature__media,
.features--cards .feature__media {
  position: relative;
  aspect-ratio: 343 / 256;
  overflow: hidden;
  border-radius: 0 110px 0 110px;
  background: var(--syn-bg-soft);
  transition: border-radius 0.35s ease;
}
.features--media .feature:hover .feature__media,
.features--media .feature:focus-within .feature__media,
.features--cards .feature:hover .feature__media,
.features--cards .feature:focus-within .feature__media { border-radius: 16px; }

.features--media .feature__body { padding-top: 28px; }
.features--cards .feature__body { padding: 24px 6px 0; }

/* The arrow disc fills in on hover. */
.features--media .feature__link,
.features--media .feature__link .card__arrow,
.features--media .feature__link .card__arrow::after,
.features--cards .feature__link,
.features--cards .feature__link .card__arrow,
.features--cards .feature__link .card__arrow::after {
  transition: background-color 0.25s ease, color 0.25s ease;
}
.features--media .feature:hover .feature__link,
.features--media .feature:focus-within .feature__link,
.features--cards .feature:hover .feature__link,
.features--cards .feature:focus-within .feature__link { color: #276f7c; }
.features--media .feature:hover .card__arrow,
.features--media .feature:focus-within .card__arrow,
.features--cards .feature:hover .card__arrow,
.features--cards .feature:focus-within .card__arrow { background-color: #276f7c; }
.features--media .feature:hover .card__arrow::after,
.features--media .feature:focus-within .card__arrow::after,
.features--cards .feature:hover .card__arrow::after,
.features--cards .feature:focus-within .card__arrow::after { background-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .features--media .feature,
  .features--media .feature__media,
  .features--cards .feature,
  .features--cards .feature__media { transition: none; }
}

/* Icon cards: centred, with the icon in a raised white disc. Hovering lights
   up a top rule, the title and the disc (Figma Component 63, 308:2960). */
.features--icons .features__items { gap: 24px; }
.features--icons .feature {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  overflow: hidden;
  padding: 44px 40px 40px;
  border: 1px solid #f3f4f6;
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: 0 2px 12px rgba(17, 24, 39, 0.08);
  text-align: center;
  transition: box-shadow 0.25s ease;
}
.features--icons .feature::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--syn-green-leaf) 0%, rgba(90, 125, 42, 0) 100%);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.features--icons .feature:hover,
.features--icons .feature:focus-within { box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); }
.features--icons .feature:hover::before,
.features--icons .feature:focus-within::before { opacity: 1; }
.features--icons .feature:hover .feature__title,
.features--icons .feature:focus-within .feature__title { color: var(--syn-green-leaf); }
.features--icons .feature:hover .feature__media,
.features--icons .feature:focus-within .feature__media { box-shadow: 0 0 11px rgba(90, 125, 42, 0.2); }

@media (prefers-reduced-motion: reduce) {
  .features--icons .feature,
  .features--icons .feature::before { transition: none; }
}
.features--icons .feature__title { transition: color 0.25s ease; }
.features--icons .feature__media {
  position: relative;
  display: grid;
  place-items: center;
  transition: box-shadow 0.25s ease;
  width: 155px; height: 155px;
  margin-bottom: 34px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 28px rgba(17, 24, 39, 0.08);
}
.features--icons .feature__media img {
  inset: 50% auto auto 50%;
  width: 80px; height: 80px;
  object-fit: contain;
  transform: translate(-50%, -50%);
}
.features--icons .feature__title { font-size: 1.25rem; font-weight: 600; }
.features--icons .feature__text { color: var(--syn-body); }
.features--icons .feature__link { margin-top: 18px; gap: 10px; color: var(--syn-green-link); font-weight: 500; }
.features--icons .feature__link .card__arrow {
  width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
}
.features--icons .feature__link .card__arrow::after { content: none; }

/* =========================================================================
   Timeline
   ========================================================================= */
.timeline { background: var(--syn-bg-soft); }
.timeline__head {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  margin-bottom: 54px;
}
.timeline__intro { margin-top: 14px; color: var(--syn-body); font-size: 0.95rem; }

/* 17 years, so the strip scrolls and the active pill is kept in view. */
.timeline__years {
  display: flex;
  gap: 16px;
  padding-top: 46px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-padding-inline: 40px;
}
.timeline__years::-webkit-scrollbar { display: none; }
.timeline__year {
  flex: none;
  padding: 10px 20px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: #737373;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
}
.timeline__year.is-active {
  background: #fff;
  color: #171717;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Prev / next chevrons sit either side of the card. */
.timeline__stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}
.timeline__nav {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 34px; height: 45px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--syn-green-500);
  cursor: pointer;
  transform: translateY(-50%);
}
.timeline__nav::before {
  content: "";
  display: block;
  width: 18px; height: 18px;
  margin: 0 auto;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
}
.timeline__nav--prev { left: -46px; }
.timeline__nav--prev::before { transform: rotate(135deg); }
.timeline__nav--next { right: -46px; }
.timeline__nav--next::before { transform: rotate(-45deg); }
.timeline__nav:hover { color: var(--syn-green-600); }
.timeline__nav[hidden] { display: none; }

.timeline__items > * { display: contents; }
.milestone[hidden] { display: none; }
.milestone {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 420px;
  margin-top: 46px;
  padding: 64px 60px;
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}
/* The connector and dot above the card. */
.timeline--interactive .milestone::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 1px; height: 52px;
  background: #d7ded7;
}
.timeline--interactive .milestone::after {
  content: "";
  position: absolute;
  top: 46px; left: 50%;
  width: 14px; height: 14px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--syn-green-500);
  box-shadow: 0 0 0 1px #d7ded7;
  transform: translateX(-50%);
}
.milestone__ghost {
  position: absolute;
  right: 40px; bottom: -40px;
  color: rgba(17, 24, 39, 0.045);
  font-family: var(--font-heading);
  font-size: 15rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}
.milestone__body { position: relative; max-width: 760px; }
.milestone__year {
  display: inline-block;
  margin-bottom: 30px;
  padding: 6px 18px;
  border-radius: var(--r-pill);
  background: #e6f7ec;
  color: var(--syn-green-600);
  font-size: 0.85rem;
  font-weight: 600;
}
/* Rule running from the year badge across the card. */
.milestone__year::after {
  content: "";
  position: absolute;
  top: 16px; left: 100%;
  width: calc(100% - 90px);
  height: 1px;
  margin-left: 18px;
  background: #e8e8e8;
}
.milestone__title {
  margin: 0 0 14px;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 600;
  line-height: 1.35;
}
.milestone__text { color: var(--syn-body); }

/* =========================================================================
   Media band
   ========================================================================= */
.media-band {
  background: var(--syn-green-800);
  color: #fff;
  border-radius: 0 0 var(--r-band) var(--r-band);
}
.media-band__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 70px;
}
.media-band__title {
  margin: 0;
  color: #fff;
  font-family: var(--font-body);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.22;
}
.media-band__title .hl { color: var(--syn-green-400); }
.media-band__intro { max-width: 434px; color: rgba(255, 255, 255, 0.86); font-size: 1.125rem; line-height: 1.55; }
.media-band__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

/* Feature row: the first tile is wide; hovering another tile hands the width
   over to it (Figma Component 69, 290:2055). */
.media-band--feature .media-band__items { display: flex; }
.media-band--feature .media-band__item {
  flex: 1 1 0;
  min-width: 0;
  transition: flex-grow 0.5s ease;
}
.media-band--feature .media-band__item:first-child { flex-grow: 1.92; }
.media-band--feature .media-band__items:has(.media-band__item:hover) .media-band__item { flex-grow: 1; }
/* Same selector plus :hover, so it outranks the reset above. */
.media-band--feature .media-band__items:has(.media-band__item:hover) .media-band__item:hover { flex-grow: 1.92; }
@media (prefers-reduced-motion: reduce) {
  .media-band--feature .media-band__item { transition: none; }
}
.media-tile { margin: 0; }
.media-tile__media {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: rgba(0, 0, 0, 0.25);
}
.media-band--feature .media-tile__media { aspect-ratio: auto; height: 479px; }
.media-tile__media iframe { border: 0; }

/* Thumbnails are stills, so the play affordance is drawn here. */
.media-band--feature .media-tile__media::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 84px; height: 84px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25) var(--icon-play) center / 26px no-repeat;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.media-band--feature .media-tile__media:has(iframe)::after { content: none; }

/* Click-to-play poster: the button covers the thumbnail, and the CSS play
   affordance above stands in for tiles whose still has none. */
.media-tile__play {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.media-tile__play:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.media-tile--video .media-tile__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* A lone video fills the row; its thumbnail already carries a play button. */
.media-band--feature.media-band--single .media-band__item { flex-grow: 1; }
.media-band--feature.media-band--single .media-tile__media { height: auto; aspect-ratio: 16 / 5; }
.media-band--feature.media-band--single .media-tile__media::after { content: none; }
/* Captions are part of the thumbnails in the design; keep them for screen readers. */
.media-band--feature .media-tile__label {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.media-tile__label {
  margin-top: 12px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
}

/* =========================================================================
   Referenced blocks (news teasers etc.)
   ========================================================================= */
.block-ref .section__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 600; color: #000; }
.block-ref .section__head-text { max-width: 1030px; }
.block-ref .section__intro { max-width: 930px; color: var(--syn-gray-500); font-size: 1.125rem; line-height: 1.67; }

/* Views wraps rows in .views-element-container > div.js-view-dom-id-*, so the
   grid goes on that inner wrapper. */
.block-ref__content .views-element-container > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 38px;
}
.block-ref__content .views-row { display: flex; }
.block-ref__content .views-row > .teaser { width: 100%; }

/* On hover the shadow deepens and the photo zooms ~1.16x from its centre
   (Figma Article, 420:3719). */
.teaser {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #f3f4f6;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.25s ease;
}
.teaser:hover,
.teaser:focus-within { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); }
.teaser__media { position: relative; display: block; aspect-ratio: 373 / 300; overflow: hidden; background: var(--syn-bg-soft); }
.teaser__media img { transition: transform 0.5s ease; }
.teaser:hover .teaser__media img,
.teaser:focus-within .teaser__media img { transform: scale(1.16); }
@media (prefers-reduced-motion: reduce) {
  .teaser,
  .teaser__media img { transition: none; }
}
.teaser__body { display: flex; flex: 1; flex-direction: column; padding: 30px; }
.teaser__date {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(0, 122, 85, 0.9);
}
.teaser__title {
  margin: 15px 0;
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.375;
}
.teaser__title a { color: #101828; }
.teaser__text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  color: #6a7282;
  font-size: 0.94rem;
  line-height: 1.625;
}
.teaser__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #f9fafb;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  color: #007a55;
}
.teaser__text + .teaser__link { margin-top: 22px; }
.teaser__link .card__arrow { width: 15px; height: 15px; }
.teaser__link:hover { text-decoration: none; }

/* =========================================================================
   Article page (Figma "Détail actualité — Article", 1139:8210)
   ========================================================================= */
.hero--article {
  min-height: 540px;
  padding-block: 200px 60px;
}
.hero--article .hero__scrim { background: rgba(0, 0, 0, 0.48); }
.hero--article .hero__inner { max-width: 1140px; }
.hero--article .hero__title {
  margin-bottom: 16px;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 600;
  line-height: 1.21;
}
.hero--article .hero__subtitle {
  max-width: 900px;
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

.article__main { padding-block: 96px 120px; background: #fff; }

.article__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 64px;
  padding-bottom: 16px;
  border-bottom: 1px solid #d6e0d9;
}
.article__crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.3px;
  color: #055933;
}
.article__crumbs a { color: inherit; }
.article__meta {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #57665c;
}
.article__meta > * + *::before { content: "•"; margin-inline: 10px; }

.article__columns {
  display: grid;
  grid-template-columns: minmax(0, 753px) minmax(0, 388px);
  justify-content: space-between;
  gap: 60px;
  align-items: start;
}

/* Body copy comes from the WYSIWYG, so the rules target plain tags. */
.article__body {
  display: flex;
  flex-direction: column;
  gap: 34px;
  color: #737373;
  font-size: 1.0625rem;
  line-height: 31px;
}
.article__body > div,
.article__body > div > div { display: contents; }
.article__body p { margin: 0; }
.article__body .article__lead {
  font-size: 1.5625rem;
  font-weight: 600;
  line-height: 39px;
  color: #2b3024;
}
.article__body h2,
.article__body h3 {
  margin: 0;
  font-weight: 600;
  color: #2b3024;
}
.article__body h2 { font-size: 2rem; line-height: 42px; }
.article__body h3 { font-size: 1.5rem; line-height: 32px; }
.article__body ul,
.article__body ol { margin: 0; padding-left: 1.25em; list-style: revert; }
.article__body img { border-radius: var(--r-md); }

/* Highlighted quote. A second paragraph (or a <cite>) is the attribution. */
.article__body blockquote {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  padding: 48px;
  border: 1px solid #d1e0d1;
  border-radius: 24px;
  background: #f6faf7;
}
.article__body blockquote p:first-child {
  font-family: var(--font-heading);
  font-size: 1.5625rem;
  font-weight: 600;
  line-height: 37px;
  color: #2b3024;
}
.article__body blockquote p + p,
.article__body blockquote cite {
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 700;
  line-height: 18px;
  text-transform: uppercase;
  color: var(--syn-orange);
}

/* "Dans cet article" card. */
.article__aside {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 36px 32px;
  border: 1px solid #e5e9ec;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.06);
}
.article__aside-title {
  margin: 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e9ec;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 30px;
  color: #2b3024;
}
.article__facts {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e9ec;
}
.article__facts dt,
.article__share-title {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--syn-orange);
}
.article__facts dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 24px;
  color: #2b3024;
}
.article__share-title { font-size: 0.8125rem; line-height: 18px; text-transform: none; }
.article__share { display: flex; flex-direction: column; gap: 8px; margin-top: -12px; }
.article__share a,
.article__share button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 20px;
  color: #009e30;
  cursor: pointer;
}
.article__share a:hover,
.article__share button:hover { text-decoration: underline; }

.article__related { padding-block: 92px 112px; background: #fff; }
.article__related .eyebrow {
  margin-bottom: 38px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0;
}
.article__related-title {
  margin: 0 0 38px;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.25;
  color: #2b3024;
}
.article__related-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 37px;
}

@media (max-width: 1024px) {
  .article__columns { grid-template-columns: minmax(0, 1fr); }
  .article__aside { position: static; }
  .article__related-items { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .hero--article { min-height: 460px; padding-block: 150px 48px; }
  .article__main { padding-block: 56px 72px; }
  .article__head { margin-bottom: 40px; }
  .article__body { gap: 24px; font-size: 1rem; line-height: 1.75; }
  .article__body .article__lead { font-size: 1.25rem; line-height: 1.5; }
  .article__body h2 { font-size: 1.5rem; line-height: 1.3; }
  .article__body blockquote { padding: 28px 24px; }
  .article__body blockquote p:first-child { font-size: 1.25rem; line-height: 1.5; }
  .article__related { padding-block: 56px 72px; }
  .article__related .eyebrow,
  .article__related-title { margin-bottom: 24px; }
  .article__related-items { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* =========================================================================
   Event page (Figma "Détail événement", 1139:8327)
   ========================================================================= */
.event__intro { padding-block: 80px 88px; background: #fff; }
.event__intro .article__crumbs { color: #009e30; }

.event__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid #d6e0d9;
}
.event__status {
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: rgba(242, 140, 20, 0.12);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 18px;
  color: var(--syn-orange);
}
.event__status--open::before { content: "● "; }
.event__keywords {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--syn-orange);
}
.event__keywords > * + *::before { content: "•"; margin-inline: 10px; }

.event__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
  margin-top: 36px;
  padding: 28px 24px;
  border: 1px solid #e5e9ec;
  border-radius: var(--r-md);
  background: #f4f7f9;
}
.event__fact { min-width: 190px; }
.event__fact-label {
  margin: 0 0 8px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 16px;
  text-transform: uppercase;
  color: #2b3024;
}
.event__fact-value {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 27px;
  color: #2b3024;
}
.event__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.btn--event {
  min-height: 44px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 600;
}
.btn--event-outline {
  border: 1px solid #009e30;
  background: #fff;
  color: #009e30;
}
.btn--event-outline:hover { background: #009e30; color: #fff; }

.event__program { padding-block: 104px 112px; background: #fff; }
.event__program .eyebrow {
  margin-bottom: 46px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0;
}
.event__program-title {
  margin: 0 0 46px;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.25;
  color: #2b3024;
}
.event__program-columns {
  display: grid;
  grid-template-columns: minmax(0, 720px) minmax(0, 400px);
  justify-content: space-between;
  gap: 80px;
  align-items: start;
}

/* Programme slots. The field wrappers collapse so the items are flex children. */
.event__agenda { display: flex; flex-direction: column; gap: 14px; }
.event__agenda > div,
.event__agenda > div > div { display: contents; }
.agenda-item {
  display: flex;
  gap: 24px;
  padding: 24px 26px;
  border: 1px solid #d1e0d1;
  border-radius: 18px;
  background: #f6faf7;
}
.agenda-item__time {
  flex: none;
  width: 96px;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 22px;
  color: #eb6e0d;
}
.agenda-item__title {
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 28px;
  color: #141c17;
}
.agenda-item__text { font-size: 0.9375rem; line-height: 24px; color: #57665c; }

.event__reasons {
  position: sticky;
  top: 24px;
  padding: 46px 40px;
  border: 1px solid #e5e9ec;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.06);
}
.event__reasons-title {
  margin: 0 0 24px;
  font-size: 1.6875rem;
  font-weight: 600;
  line-height: 35px;
  color: #2b3024;
}
.event__reasons-intro { margin: 0 0 24px; font-size: 1rem; line-height: 26px; color: #2b3024; }
.event__reasons-list { display: flex; flex-direction: column; gap: 24px; margin: 0; }
.event__reasons-list li {
  display: flex;
  gap: 16px;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 25px;
  color: #2b3024;
}
.event__reasons-list span {
  flex: none;
  width: 34px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 20px;
  color: var(--syn-orange);
}
.event__place { margin-top: 24px; padding-top: 24px; border-top: 1px solid #386e4f; }
.event__place-value {
  margin: 0 0 12px;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 26px;
  color: #2b3024;
}
.event__map {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  color: #009e30;
}
.event__map:hover { text-decoration: none; }

.event__cta {
  padding: 96px 0;
  border-radius: var(--r-band) var(--r-band) 0 0;
  background: #f4f7f9;
}
.event__cta-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
  padding: 56px;
  border-radius: 24px;
  background: var(--syn-green-800);
  color: #fff;
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.06);
}
.event__cta-card > div { flex: 1 1 520px; }
.event__cta-meta {
  margin: 0 0 12px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 18px;
  text-transform: uppercase;
  color: var(--syn-amber);
}
.event__cta-title {
  margin: 0 0 12px;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}
.event__cta-text { font-size: 1rem; line-height: 26px; color: #fff; }
.event__cta-card .btn--event { min-width: 320px; min-height: 56px; font-weight: 700; }

@media (max-width: 1024px) {
  .event__program-columns { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .event__reasons { position: static; }
  .event__actions { margin-left: 0; }
}
@media (max-width: 720px) {
  .event__intro { padding-block: 48px 56px; }
  .event__facts { padding: 22px 18px; }
  .event__program { padding-block: 56px 72px; }
  .event__program .eyebrow,
  .event__program-title { margin-bottom: 24px; }
  .event__reasons { padding: 32px 24px; }
  .agenda-item { flex-direction: column; gap: 8px; padding: 20px; }
  .agenda-item__time { width: auto; }
  .event__cta { padding: 56px 0; }
  .event__cta-card { padding: 32px 24px; gap: 24px; }
  .event__cta-card .btn--event { min-width: 0; width: 100%; }
}

/* =========================================================================
   Events listing: the "next event" panel and the archive band
   ========================================================================= */
.next-event {
  display: grid;
  grid-template-columns: minmax(0, 384px) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.next-event__media {
  position: relative;
  aspect-ratio: 384 / 340;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--syn-bg-soft);
}
.next-event__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.next-event__badge {
  position: absolute;
  top: 18px;
  left: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: var(--syn-green-500);
  color: #fff;
  line-height: 1.1;
}
.next-event__badge-day { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; }
.next-event__badge-month { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; }
.next-event__badge-year { font-size: 0.6875rem; opacity: 0.8; }
.next-event__status {
  position: absolute;
  top: 18px;
  right: 18px;
  background: rgba(255, 255, 255, 0.92);
}
.next-event__keywords {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.45);
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
}
.next-event__keywords > * + *::before { content: "•"; margin-inline: 8px; }

.next-event__eyebrow {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 12px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--syn-orange);
}
.next-event__eyebrow > * + *::before { content: "•"; margin-inline: 8px; }
.next-event__title { margin: 0 0 14px; font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.3; }
.next-event__title a { color: var(--syn-ink); }
.next-event__text { max-width: 640px; color: var(--syn-gray-500); font-size: 0.97rem; line-height: 1.6; }
.next-event__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
  margin: 24px 0;
  padding-top: 24px;
  border-top: 1px solid var(--syn-border);
}
.next-event__facts .event__fact-value { font-size: 1rem; line-height: 24px; }

/* A single-row block (the next event) keeps the full width. */
.block-ref--featured .block-ref__content .views-element-container > div { display: block; }

/* Rows stacked full width, e.g. the press releases. */
.block-ref--list .block-ref__content .views-element-container > div {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.block-ref--list .views-row { display: block; }

/* Archive: the newest past event large, the others as compact rows beside it. */
.block-ref--archive .block-ref__content .views-element-container > div {
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: 32px;
}
.block-ref--archive .views-row:first-child { grid-row: span 2; }
.block-ref--archive .views-row:first-child .teaser__media { aspect-ratio: 760 / 420; }
.block-ref--archive .views-row:not(:first-child) .teaser__media { display: none; }
.block-ref--archive .views-row:not(:first-child) .teaser__body { padding: 24px; }
.block-ref--archive .views-row:not(:first-child) .teaser__title { margin: 10px 0 0; font-size: 1.05rem; }
.block-ref--archive .views-row:not(:first-child) .teaser__text { display: none; }
.block-ref--archive .views-row:not(:first-child) .teaser__link { margin-top: 14px; padding-top: 14px; }

@media (max-width: 1024px) {
  .next-event { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .block-ref--archive .block-ref__content .views-element-container > div { grid-template-columns: minmax(0, 1fr); }
  .block-ref--archive .views-row:first-child { grid-row: auto; }
}

/* Numbered checklist (Figma "Checklist sécurité", 1139:9322). */
.card-grid--steps { background: #f6fbf7; }
.card-grid--steps .section__head { margin-bottom: 30px; }
.card-grid--steps .section__title { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 600; color: #2b3024; }
.card-grid--steps .card-grid__items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.card-grid--steps .card {
  gap: 16px;
  padding: 28px;
  border: 1px solid #e5eaed;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}
.card-grid--steps .card__body { display: flex; flex-direction: column; gap: 16px; }
.card-grid--steps .card__number {
  display: grid;
  place-items: center;
  width: 54px; height: 38px;
  margin: 0;
  border-radius: 19px;
  background: #f6fbf7;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  color: #1a570d;
}
.card-grid--steps .card__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 26px;
  color: #2b3024;
}
.card-grid--steps .card__text { font-size: 0.875rem; line-height: 22px; color: #636e78; }

@media (max-width: 1024px) {
  .card-grid--steps .card-grid__items { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .card-grid--steps .card-grid__items { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   MixSyn compatibility checker (Figma 1139:9223)
   ========================================================================= */
.mixsyn__checker { padding-block: 76px 78px; background: #fff; text-align: center; }
.mixsyn__checker .eyebrow {
  margin-bottom: 30px;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
}
.mixsyn__title {
  margin: 0 0 30px;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 600;
  line-height: 1.33;
  color: #2b3024;
}
.mixsyn__intro {
  max-width: 980px;
  margin: 0 auto 30px;
  font-size: 1.0625rem;
  line-height: 28px;
  color: #636e78;
}

.mixsyn__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 30px 36px;
  border: 1px solid #e5eaed;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 8px 22px -8px rgba(13, 31, 13, 0.08);
  text-align: left;
}
.mixsyn__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.mixsyn__field label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  color: #2b3024;
}
.mixsyn__field select {
  width: 100%;
  height: 58px;
  padding: 0 46px 0 18px;
  border: 1px solid #e5eaed;
  border-radius: 12px;
  background: #fff var(--icon-chevron) right 18px center / 16px no-repeat;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-size: 0.94rem;
  color: var(--syn-ink);
}
.mixsyn__field select:focus { outline: none; border-color: var(--syn-green-500); }
.mixsyn__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.mixsyn__help { margin: 0; max-width: 808px; font-size: 0.875rem; line-height: 22px; color: #636e78; }
.mixsyn__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 300px;
  min-height: 56px;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  background: var(--syn-orange);
  box-shadow: 0 10px 24px -6px rgba(26, 41, 15, 0.16);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}
.mixsyn__submit:hover { background: var(--syn-orange-600); }
.mixsyn__submit-icon {
  width: 20px; height: 20px;
  background: #fff;
  -webkit-mask: var(--icon-search-plain) center / contain no-repeat;
  mask: var(--icon-search-plain) center / contain no-repeat;
}

/* Result band. */
.mixsyn__result-band { padding-block: 76px; background: #f4f7f9; }
.mixsyn__result-band .eyebrow {
  margin-bottom: 30px;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
}
.mixsyn__result-grid {
  display: grid;
  grid-template-columns: minmax(0, 790px) minmax(0, 378px);
  justify-content: space-between;
  gap: 32px;
  align-items: stretch;
}
.mixsyn__result {
  padding: 34px 46px 30px;
  border-radius: 24px;
  background: #03084d;
  box-shadow: 0 10px 24px -6px rgba(26, 41, 15, 0.16);
  color: #fff;
}
/* The verdict colours the panel and its status dot. */
.mixsyn__result[data-status="compatible"] { background: #0e4d22; }
.mixsyn__result[data-status="caution"] { background: #5c3c05; }
.mixsyn__result[data-status="avoid"] { background: #5a1410; }
.mixsyn__status {
  display: block;
  width: 42px; height: 42px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: #40e073;
}
.mixsyn__result[data-status="caution"] .mixsyn__status { background: var(--syn-amber); }
.mixsyn__result[data-status="avoid"] .mixsyn__status { background: #ff6b5e; }
.mixsyn__pair {
  margin: 0 0 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.mixsyn__result-title {
  margin: 0 0 10px;
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  font-weight: 600;
  line-height: 40px;
  color: #fff;
}
.mixsyn__result-text { margin: 0 0 10px; max-width: 680px; font-size: 1rem; line-height: 27px; color: #d1dbf5; }
.mixsyn__result-note { margin: 0 0 10px; max-width: 680px; font-size: 0.875rem; line-height: 22px; color: #9eb2db; }
.mixsyn__steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 680px;
  margin: 0;
  padding: 10px 0 0;
}
.mixsyn__steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  line-height: 18px;
  color: #9eb2db;
}
.mixsyn__steps li span {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 14px;
  background: #3d4d94;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
}
.mixsyn__steps li.is-current { color: #fff; }
.mixsyn__steps li.is-current span { background: #40e073; }

.mixsyn__legend {
  padding: 28px 32px;
  border: 1px solid #e5eaed;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 8px 22px -8px rgba(13, 31, 13, 0.08);
}
.mixsyn__legend h3 {
  margin: 0 0 10px;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 30px;
  color: #2b3024;
}
.mixsyn__legend-item {
  position: relative;
  margin: 0;
  padding: 10px 0 10px 34px;
  font-size: 0.75rem;
  line-height: 18px;
  color: #636e78;
}
.mixsyn__legend-item::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
}
.mixsyn__legend-item strong {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  color: #2b3024;
}
.mixsyn__legend-item--compatible::before { background: #16a34a; }
.mixsyn__legend-item--caution::before { background: var(--syn-amber); }
.mixsyn__legend-item--avoid::before { background: #dc2626; }

@media (max-width: 1024px) {
  .mixsyn__result-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .mixsyn__checker,
  .mixsyn__result-band { padding-block: 48px; }
  .mixsyn__form { padding: 20px; }
  .mixsyn__row { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .mixsyn__submit { min-width: 0; width: 100%; }
  .mixsyn__result { padding: 26px 22px; }
  .mixsyn__steps { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   Help banner (Figma "Contact Syngenta Maroc", 1139:8873)
   ========================================================================= */
.help-banner { padding-block: 92px; background: #fff; }
.help-banner__inner {
  display: grid;
  grid-template-columns: minmax(0, 472px) minmax(0, 578px);
  justify-content: space-between;
  gap: 54px;
  padding: 42px 48px;
  border-radius: var(--r-xl);
  background: linear-gradient(114deg, #124d24 2%, #0a2914 109%);
  color: #fff;
}
.help-banner__eyebrow {
  margin: 0 0 15px;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 19px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--syn-orange);
}
.help-banner__title {
  margin: 0 0 15px;
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  font-weight: 600;
  line-height: 1.32;
  color: #fff;
}
.help-banner__text { margin-bottom: 26px; max-width: 450px; font-size: 0.94rem; line-height: 24px; opacity: 0.78; }
.help-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 18px;
  border-radius: 12px;
  background: var(--syn-orange);
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
}
.help-banner__cta:hover { text-decoration: none; background: var(--syn-orange-600); }
.help-banner__cta .card__arrow { background: #fff; }

.help-banner__contacts { display: flex; flex-direction: column; gap: 12px; }
.help-banner__contact {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
}
.help-banner__icon {
  flex: none;
  width: 20px; height: 20px;
  background: #fff;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.help-banner__icon--phone { -webkit-mask-image: var(--icon-phone); mask-image: var(--icon-phone); }
.help-banner__icon--email { -webkit-mask-image: var(--icon-mail); mask-image: var(--icon-mail); }
.help-banner__icon--address { -webkit-mask-image: var(--icon-pin); mask-image: var(--icon-pin); }
.help-banner__label { margin: 0 0 2px; font-size: 0.6875rem; line-height: 16px; opacity: 0.62; }
.help-banner__value {
  display: block;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 21px;
  color: #fff;
}
a.help-banner__value:hover { text-decoration: underline; }

@media (max-width: 1024px) {
  .help-banner__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 720px) {
  .help-banner { padding-block: 48px; }
  .help-banner__inner { padding: 28px 22px; }
}

/* =========================================================================
   Distributor finder (Figma "Trouver un distributeur", 1139:8720)
   ========================================================================= */
.dealers__search { padding-block: 88px; background: #f6f8f7; }
.dealers__search .eyebrow {
  margin-bottom: 24px;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
}
.dealers__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.dealers__title {
  margin: 0 0 10px;
  max-width: 820px;
  font-size: clamp(1.9rem, 3.4vw, 2.625rem);
  font-weight: 600;
  line-height: 1.24;
  color: #1f261c;
}
.dealers__intro { max-width: 760px; font-size: 1rem; line-height: 26px; color: #616e78; }
.dealers__count {
  flex: none;
  width: 220px;
  margin: 0;
  padding: 14px 20px;
  border-radius: var(--r-md);
  background: #f0f7f2;
}
.dealers__count-value {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 34px;
  color: #0e611f;
}
.dealers__count-label { font-size: 0.75rem; line-height: 18px; color: #616e78; }

/* Search panel. */
.dealers__panel {
  padding: 28px;
  border: 1px solid #d6e0db;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 30px -10px rgba(13, 31, 13, 0.08);
}
.dealers__panel .views-exposed-form { margin: 0; }
/* Row 1: search, "use my position", submit. Row 2: the filter pills. */
.dealers__panel .filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 244px 212px;
  gap: 18px 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.dealers__panel .filters__search { flex: none; grid-column: 1 / 2; grid-row: 1; }
.dealers__panel .filters__search input {
  height: 64px;
  padding-left: 54px;
  border-radius: 13px;
  background-color: #fff;
  background-position: 20px center;
  background-size: 22px;
  font-size: 0.94rem;
}
.dealers__panel .filters__cluster {
  grid-column: 1 / -1;
  grid-row: 2;
  gap: 14px;
  min-height: 64px;
  padding: 0;
  background: none;
}
.dealers__panel .filters__pill,
.dealers__panel .filters__cluster select {
  height: 64px;
  padding: 0 18px;
  border-radius: 13px;
  font-size: 0.875rem;
}
.dealers__panel .filters__pill {
  justify-content: center;
  background: #f0f7f2;
  border-color: #d6e0db;
  color: #0e611f;
}
.dealers__panel .filters__cluster select { min-width: 220px; padding-right: 44px; }
/* The submit is the design's orange "Rechercher" button. */
.js .dealers__panel .filters__actions { display: flex; grid-column: 3 / 4; grid-row: 1; }
.dealers__panel .filters__actions input[type="submit"] {
  width: 100%;
  min-height: 64px;
  padding: 0 24px;
  border-radius: 13px;
  background: var(--syn-orange);
  font-family: var(--font-heading);
  font-size: 0.875rem;
}
.dealers__panel .filters__actions input[type="submit"]:hover { background: var(--syn-orange-600); }
.dealers__panel .filters__actions [id*="edit-reset"] {
  display: inline-block;
  padding: 0 18px;
  border: 0;
  background: none;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #006e7d;
  cursor: pointer;
}

.dealers__locate {
  grid-column: 2 / 3;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 64px;
  padding: 0 18px;
  border: 1px solid #d6e0db;
  border-radius: 13px;
  background: #f0f7f2;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: #0e611f;
  cursor: pointer;
}
.dealers__locate:hover { border-color: #0e611f; }
.dealers__locate[disabled] { opacity: 0.6; cursor: progress; }
.dealers__locate-icon {
  width: 20px; height: 20px;
  background: #0e611f;
  -webkit-mask: var(--icon-pin) center / contain no-repeat;
  mask: var(--icon-pin) center / contain no-repeat;
}

/* Results: the list beside the map. */
.dealers__results { padding-block: 88px; background: #fff; }
.dealers__results .eyebrow {
  margin-bottom: 8px;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
}
.dealers__results-title {
  margin: 0 0 8px;
  font-size: clamp(1.75rem, 3vw, 2.375rem);
  font-weight: 600;
  line-height: 1.26;
  color: #1f261c;
}
.dealers__results-intro { margin: 0 0 32px; font-size: 0.94rem; line-height: 24px; color: #616e78; }
.dealers__workspace {
  display: grid;
  grid-template-columns: minmax(0, 470px) minmax(0, 706px);
  justify-content: space-between;
  gap: 24px;
  align-items: start;
}
.dealers__list .views-element-container > div { display: flex; flex-direction: column; gap: 14px; }
.dealers__map {
  position: sticky;
  top: 24px;
  height: 880px;
  border-radius: 22px;
  overflow: hidden;
  background: #eef2f0;
}
.dealers__map-fallback {
  display: grid;
  place-items: center;
  height: 100%;
  margin: 0;
  font-size: 0.875rem;
  color: var(--syn-gray-500);
}
.dealers__map.is-unavailable .dealers__map-fallback::after {
  content: " " attr(data-error);
}
.leaflet-container { height: 100%; font: inherit; }
/* Marker drawn in CSS, so no image file is needed. */
.dealer-pin {
  border-radius: 50% 50% 50% 0;
  background: var(--syn-green-500);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transform: rotate(-45deg);
  transition: background-color 0.2s ease;
}
.dealer-pin.is-active { background: var(--syn-orange); }

/* Distributor card. */
.dealer {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 20px 20px 18px;
  border: 1.5px solid transparent;
  border-radius: 18px;
  background: #f0f7f2;
  box-shadow: 0 10px 24px -10px rgba(13, 31, 13, 0.08);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.dealer:hover,
.dealer.is-active { border-color: var(--syn-orange); }
.dealer__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dealer__name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 28px;
  color: #1f261c;
}
.dealer__region {
  flex: none;
  padding: 7px 14px;
  border-radius: 15px;
  background: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #0e611f;
}
.dealer__activity,
.dealer__address {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  color: #616e78;
}
.dealer__activity { align-items: center; font-size: 0.75rem; font-weight: 600; line-height: 18px; }
.dealer__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--syn-green-500); }
.dealer__address { font-size: 0.8125rem; line-height: 20px; }
.dealer__pin {
  flex: none;
  width: 17px; height: 17px;
  background: #616e78;
  -webkit-mask: var(--icon-pin) center / contain no-repeat;
  mask: var(--icon-pin) center / contain no-repeat;
}
.dealer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dealer__phone,
.dealer__email {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 11px;
  font-size: 0.75rem;
  font-weight: 600;
}
.dealer__phone { background: #0e611f; color: #fff; }
.dealer__phone:hover { background: #0a4a17; color: #fff; text-decoration: none; }
.dealer__email { border: 1px solid #d6e0db; background: #fff; color: #0e611f; }
.dealer__email:hover { text-decoration: none; border-color: #0e611f; }
.dealer__site {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #006e7d;
}
.dealer__site:hover { text-decoration: none; }
.dealer__site .card__arrow { width: 14px; height: 14px; background: #006e7d; }

/* Pagination under the list. */
.dealers__list .pager__items { justify-content: center; margin-top: 24px; }

@media (max-width: 1024px) {
  .dealers__workspace { grid-template-columns: minmax(0, 1fr); }
  .dealers__map { position: static; height: 460px; }
  /* One column, so every part of the panel drops its placement. */
  .dealers__panel .filters { grid-template-columns: minmax(0, 1fr); }
  .dealers__panel .filters__search,
  .dealers__panel .filters__cluster,
  .dealers__panel .dealers__locate,
  .js .dealers__panel .filters__actions {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}
@media (max-width: 720px) {
  .dealers__search,
  .dealers__results { padding-block: 48px; }
  .dealers__panel { padding: 18px; }
  .dealers__count { width: 100%; }
  .dealers__panel .filters__cluster { flex-direction: column; align-items: stretch; }
  .dealers__panel .filters__cluster select { width: 100%; min-width: 0; }
  .dealer__site { margin-left: 0; }
}

/* =========================================================================
   Product landing pages (Figma "Vixeran", 1139:6815)
   ========================================================================= */

/* "Triple mode d'action" (Figma Mode card, 767:3983).
   At rest the photo fills the tile with the caption over it; on hover the
   photo shrinks to the top and a white panel reveals the description. */
.card-grid--modes .card-grid__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.card-grid--modes .card {
  position: relative;
  aspect-ratio: 387 / 500;
  border-radius: 15px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 19px rgba(26, 58, 42, 0.08);
}
.card-grid--modes .card__media {
  position: absolute;
  inset: 0;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  transition: height 0.35s ease;
}
.card-grid--modes .card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The scrim only belongs to the state where text sits over the photo. */
.card-grid--modes .card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 37%, rgba(0, 0, 0, 0.84) 100%);
  transition: opacity 0.35s ease;
}
.card-grid--modes .card__body {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: baseline;
  justify-content: center;
  gap: 0 12px;
  padding: 32px 26px;
  text-align: center;
  transition: top 0.35s ease, background-color 0.35s ease;
}
.card-grid--modes .card__number,
.card-grid--modes .card__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #fff;
  transition: color 0.35s ease;
}
.card-grid--modes .card__number::after { content: " •"; }
/* The description is only part of the hovered state. */
.card-grid--modes .card__text {
  flex-basis: 100%;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  font-size: 0.825rem;
  line-height: 23px;
  color: #000;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.35s ease;
}
.card-grid--modes .card:hover .card__media,
.card-grid--modes .card:focus-within .card__media { height: 52.4%; }
.card-grid--modes .card:hover .card__media::after,
.card-grid--modes .card:focus-within .card__media::after { opacity: 0; }
.card-grid--modes .card:hover .card__body,
.card-grid--modes .card:focus-within .card__body { top: 52.4%; background: #fff; }
.card-grid--modes .card:hover .card__number,
.card-grid--modes .card:hover .card__title,
.card-grid--modes .card:focus-within .card__number,
.card-grid--modes .card:focus-within .card__title { color: #000; }
.card-grid--modes .card:hover .card__text,
.card-grid--modes .card:focus-within .card__text { max-height: 220px; margin-top: 11px; opacity: 1; }

/* "Outils d'aide à la décision" (Figma Tool card, 767:3432): same reveal as
   the mode tiles, with the call to action visible in both states. */
.card-grid--tools .card-grid__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.card-grid--tools .card {
  position: relative;
  aspect-ratio: 589 / 724;
  border-radius: 23px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 29px rgba(26, 58, 42, 0.08);
}
.card-grid--tools .card__media {
  position: absolute;
  inset: 0;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  transition: height 0.35s ease;
}
.card-grid--tools .card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-grid--tools .card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 31%, rgba(0, 0, 0, 0.68) 100%);
  transition: opacity 0.35s ease;
}
.card-grid--tools .card__body {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
  transition: top 0.35s ease, background-color 0.35s ease;
}
.card-grid--tools .card__title {
  margin: 0 0 18px;
  font-size: clamp(1.4rem, 2.2vw, 1.75rem);
  color: #fff;
  transition: color 0.35s ease;
}
.card-grid--tools .card__text {
  max-height: 0;
  margin-bottom: 0;
  overflow: hidden;
  font-size: 1.05rem;
  line-height: 35px;
  color: #000;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.25s ease, margin-bottom 0.35s ease;
}
.card-grid--tools .card__link {
  align-self: flex-start;
  padding-bottom: 6px;
  border-bottom: 3px solid #e8a800;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
  transition: color 0.35s ease;
}
.card-grid--tools .card__link .card__arrow { background: #fff; transition: background-color 0.35s ease; }
.card-grid--tools .card:hover .card__media,
.card-grid--tools .card:focus-within .card__media { height: 49%; }
.card-grid--tools .card:hover .card__media::after,
.card-grid--tools .card:focus-within .card__media::after { opacity: 0; }
.card-grid--tools .card:hover .card__body,
.card-grid--tools .card:focus-within .card__body { top: 49%; background: #fff; }
.card-grid--tools .card:hover .card__title,
.card-grid--tools .card:hover .card__link,
.card-grid--tools .card:focus-within .card__title,
.card-grid--tools .card:focus-within .card__link { color: #000; }
.card-grid--tools .card:hover .card__link .card__arrow,
.card-grid--tools .card:focus-within .card__link .card__arrow { background: #000; }
.card-grid--tools .card:hover .card__text,
.card-grid--tools .card:focus-within .card__text { max-height: 260px; margin-bottom: 22px; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .card-grid--modes .card__media,
  .card-grid--modes .card__body,
  .card-grid--modes .card__text,
  .card-grid--tools .card__media,
  .card-grid--tools .card__body,
  .card-grid--tools .card__text { transition: none; }
}

/* "Solution fertilisation azotée": bordered boxes, the last one full width. */
.features--boxes .features__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.features--boxes .feature {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px;
  border: 1px solid #d1e8d6;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 12px rgba(13, 46, 23, 0.08);
}
/* Each item sits in its own wrapper, so the count happens on those. */
.features--boxes .features__items > div > div:nth-child(3) .feature { grid-column: 1 / -1; }
/* Icon badge: the artwork comes from the design, one per card. */
.features--boxes .feature__badge {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 13px;
  background: #009933;
}
.features--boxes .feature__badge::before {
  content: "";
  width: 22px; height: 22px;
  background: #fff;
  -webkit-mask: var(--icon-box) center / contain no-repeat;
  mask: var(--icon-box) center / contain no-repeat;
}
.features--boxes .features__items > div > div:nth-child(1) .feature { --icon-box: url("../images/icon-box-1.svg"); }
.features--boxes .features__items > div > div:nth-child(2) .feature { --icon-box: url("../images/icon-box-2.svg"); }
.features--boxes .features__items > div > div:nth-child(3) .feature { --icon-box: url("../images/icon-box-3.svg"); }
.features--boxes .feature__title { margin: 0; font-size: 1.15rem; font-weight: 600; color: #1b3a2a; }
.features--boxes .feature__text { font-size: 0.92rem; line-height: 23.8px; color: #4a6657; }
/* Point lists keep their bullets, as the design draws them. */
.features--boxes .feature__text ul { display: flex; flex-direction: column; gap: 16px; }
.features--boxes .feature__text li { position: relative; padding-left: 20px; }
.features--boxes .feature__text li::before {
  content: "•";
  position: absolute;
  left: 2px;
  color: var(--syn-green-500);
}

/* Lead-gen block: a green panel beside the form. */
.lead-gen { padding-block: var(--section-y); }
.lead-gen__inner {
  display: grid;
  grid-template-columns: minmax(0, 569px) minmax(0, 1fr);
  gap: 66px;
  align-items: start;
}
.lead-gen__panel {
  display: flex;
  flex-direction: column;
  gap: 32px;
  height: 100%;
  padding: 53px 58px;
  border-radius: var(--r-xl);
  background: var(--syn-green-800) center / cover no-repeat;
  color: #fff;
}
.lead-gen__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}
.lead-gen__icon::before {
  content: "";
  width: 23px; height: 23px;
  background: #fff;
  -webkit-mask: var(--icon-download) center / contain no-repeat;
  mask: var(--icon-download) center / contain no-repeat;
}
.lead-gen__panel-text {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  font-weight: 600;
  line-height: 1.35;
}
.lead-gen__eyebrow {
  margin: 0 0 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--syn-orange);
}
.lead-gen__title {
  margin: 0 0 28px;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 600;
  line-height: 1.2;
}

/* Webform fields inside the block. */
.lead-gen__form .webform-submission-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 19px 20px; }
.lead-gen__form .js-form-item { margin: 0; }
.lead-gen__form .js-form-item-culture,
.lead-gen__form .js-form-item-deja-client { grid-column: 1 / -1; }
/* The privacy note sits beside the submit button, as in the design. */
.lead-gen__form .form-item-legal { grid-column: 1 / 2; align-self: center; }
.lead-gen__form .form-item-legal p {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--syn-gray-500);
}
.lead-gen__form .form-actions { grid-column: 2 / -1; justify-content: flex-end; }
.lead-gen__form label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--syn-ink);
}
.lead-gen__form .form-required::after { content: " *"; color: var(--syn-ink); }
.lead-gen__form input[type="text"],
.lead-gen__form input[type="email"],
.lead-gen__form input[type="tel"],
.lead-gen__form select {
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  border: 1px solid #d5e0d1;
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 0.94rem;
  color: var(--syn-ink);
}
.lead-gen__form select {
  padding-right: 40px;
  -webkit-appearance: none;
  appearance: none;
  background: #fff var(--icon-chevron) right 16px center / 16px no-repeat;
}
.lead-gen__form input:focus,
.lead-gen__form select:focus { outline: none; border-color: var(--syn-green-500); }
/* "ha" sits inside the field, as in the design. */
.lead-gen__form .webform-has-field-suffix { position: relative; }
.lead-gen__form .webform-has-field-suffix input { padding-right: 44px; }
.lead-gen__form .webform-has-field-suffix .field-suffix {
  position: absolute;
  right: 16px;
  bottom: 15px;
  font-size: 0.875rem;
  color: var(--syn-gray-500);
}
.lead-gen__form .form-type-checkbox { display: flex; align-items: center; gap: 12px; }
.lead-gen__form .form-type-checkbox label { margin: 0; font-weight: 400; color: var(--syn-gray-500); }
.lead-gen__form .form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0;
}
.lead-gen__form .webform-button--submit {
  min-height: 46px;
  padding: 0 24px;
  border: 0;
  border-radius: 10px;
  background: var(--syn-green-500);
  font: inherit;
  font-size: 0.94rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}
.lead-gen__form .webform-button--submit:hover { background: var(--syn-green-600); }
.lead-gen__legal { margin: 0; max-width: 302px; font-size: 0.8125rem; line-height: 1.5; color: var(--syn-gray-500); }

@media (max-width: 1024px) {
  .card-grid--modes .card-grid__items { grid-template-columns: repeat(2, 1fr); }
  .lead-gen__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 720px) {
  .card-grid--modes .card-grid__items,
  .card-grid--tools .card-grid__items { grid-template-columns: minmax(0, 1fr); }
  .features--boxes .features__items { grid-template-columns: minmax(0, 1fr); }
  .lead-gen__panel { padding: 32px 24px; }
  .lead-gen__form .webform-submission-form { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   Contact page (Figma "Contact Us — Syngenta Maroc", 1139:9835)
   ========================================================================= */
.contact {
  --contact-ink: #17341f;
  --contact-green: #007a33;
  --contact-line: #dde8e1;
  padding-block: 78px 72px;
  background: #f5f9f6;
}
.contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 488px) minmax(0, 640px);
  justify-content: space-between;
  gap: 48px;
  align-items: start;
}
.contact__aside { padding-top: 34px; }
.contact__eyebrow {
  margin: 0 0 14px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 18px;
  text-transform: uppercase;
  color: var(--contact-green);
}
.contact__title {
  margin: 0 0 21px;
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.23;
  color: var(--contact-ink);
}
.contact__title .hl { color: var(--syn-green-500); }
.contact__lede {
  max-width: 470px;
  font-size: 1rem;
  line-height: 26px;
  color: #53665a;
}
.contact__subhead {
  margin: 39px 0 16px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #718078;
}
.contact__details { display: grid; gap: 16px; }
.contact__card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 1px solid #dde9e1;
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
a.contact__card:hover,
a.contact__card:focus-visible {
  /* border-color: var(--syn-green-500);
  box-shadow: var(--shadow-card); */
  text-decoration: none;
}
.contact__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(0, 153, 51, 0.1);
}
.contact__icon--email { background: rgba(77, 135, 200, 0.1); }
.contact__icon--address { background: rgba(231, 140, 34, 0.1); }
.contact__card-text { display: flex; flex-direction: column; min-width: 0; }
.contact__label {
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 16.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6d7e73;
}
.contact__value {
  font-size: 1rem;
  font-weight: 600;
  line-height: 24px;
  color: var(--contact-ink);
  overflow-wrap: anywhere;
}
.contact__card--phone .contact__value { font-size: 1.125rem; line-height: 28px; }
.contact__note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 32px;
  padding: 20px;
  border: 1px solid #d2e6d9;
  border-radius: var(--r-md);
  background: #eaf4ed;
  font-size: 0.875rem;
  line-height: 22.75px;
  color: #385044;
}
.contact__note img { flex: none; margin-top: 2px; }
.contact__note strong { color: var(--contact-ink); }

/* The form card; its heading lives in the webform so editors can change it. */
.contact__form {
  padding: 36px 40px 40px;
  border: 1px solid var(--contact-line);
  border-radius: 22px;
  background: #fff;
}
.contact__form .webform-submission-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 20px;
}
.contact__form .js-form-item { margin: 0; }
.contact__form .form-item-intro,
.contact__form .js-form-item-subject,
.contact__form .js-form-item-message,
.contact__form .js-form-item-consent,
.contact__form .form-actions { grid-column: 1 / -1; }
.contact__form .form-item-intro { margin-bottom: 11px; }
.contact-form__eyebrow {
  margin: 0 0 14px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--contact-green);
}
.contact-form__title {
  margin: 0 0 11px;
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 600;
  line-height: 1.33;
  color: var(--contact-ink);
}
.contact-form__intro { margin: 0; font-size: 0.875rem; line-height: 22px; color: #64756b; }

.contact__form label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 18px;
  color: #314a3a;
}
.contact__form .form-required::after { content: " *"; }
.contact__form input[type="text"],
.contact__form input[type="email"],
.contact__form input[type="tel"],
.contact__form select,
.contact__form textarea {
  width: 100%;
  min-height: 58px;
  padding: 0 15px;
  border: 1px solid #ccdad1;
  border-radius: var(--r-sm);
  background: #fff;
  font: inherit;
  font-size: 0.875rem;
  color: var(--contact-ink);
}
.contact__form textarea {
  display: block;
  min-height: 132px;
  padding: 15px;
  line-height: 21px;
  resize: vertical;
}
.contact__form ::placeholder { color: #8a9990; opacity: 1; }
.contact__form select {
  padding-right: 40px;
  -webkit-appearance: none;
  appearance: none;
  background: #fff var(--icon-chevron) right 15px center / 14px no-repeat;
}
.contact__form select:invalid { color: #8a9990; }
.contact__form input:focus,
.contact__form select:focus,
.contact__form textarea:focus {
  outline: none;
  border-color: var(--syn-green-500);
  box-shadow: 0 0 0 3px rgba(0, 153, 51, 0.12);
}
.contact__form .form-type-checkbox { display: flex; align-items: flex-start; gap: 12px; }
.contact__form input[type="checkbox"] {
  flex: none;
  width: 18px; height: 18px;
  margin: 0;
  border: 1px solid #a9bbb0;
  border-radius: 4px;
  background: #fff center / 12px no-repeat;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.contact__form input[type="checkbox"]:checked {
  border-color: var(--syn-green-500);
  background-color: var(--syn-green-500);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");
}
.contact__form input[type="checkbox"]:focus-visible { outline: 2px solid var(--syn-green-500); outline-offset: 2px; }
.contact__form .form-type-checkbox label {
  margin: -4px 0 0;
  font-weight: 400;
  color: #718078;
  cursor: pointer;
}
/* The consent sentence reads as fine print, not as a required-field label. */
.contact__form .form-type-checkbox .form-required::after { content: none; }
.contact__form .form-actions { margin: 14px 0 0; }
.contact__form .webform-button--submit {
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--syn-green-500);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.contact__form .webform-button--submit:hover,
.contact__form .webform-button--submit:focus-visible { background: var(--syn-green-600); }
.contact__form .webform-confirmation {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--contact-ink);
}

@media (max-width: 1024px) {
  .contact__inner { grid-template-columns: minmax(0, 1fr); }
  .contact__aside { padding-top: 0; }
  .contact__lede { max-width: none; }
}
@media (max-width: 720px) {
  .contact { padding-block: 56px; }
  .contact__form { padding: 28px 20px; }
  .contact__form .webform-submission-form { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   Login page (Figma "Compte — Se connecter", 1139:10000)
   ========================================================================= */
/* No hero photo here, so the header gets the design's solid band. */
.site-header--solid {
  position: relative;
  background: #17341f;
}

.page--auth { background: #f4f8f5; }
/* The card carries the title and the tabs. */
.page--auth #block-syngenta-theme-page-title,
.page--auth #block-syngenta-theme-primary-local-tasks,
.page--auth #block-syngenta-theme-secondary-local-tasks { display: none; }
.page--auth [data-drupal-messages] {
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 32px auto 0;
  padding-inline: var(--gutter);
  font-size: 0.875rem;
  color: #17341f;
}
.page--auth [data-drupal-messages] > div {
  padding: 14px 18px;
  border: 1px solid #cfe3d5;
  border-radius: var(--r-sm);
  background: #fff;
}
.page--auth [data-drupal-messages] [role="alert"] { color: #a4260a; }
.page--auth [data-drupal-messages] > div:has([role="alert"]) { border-color: #f0c4b6; background: #fff6f3; }

.auth { padding-block: 48px 80px; }
.auth__breadcrumb {
  display: flex;
  gap: 8px;
  margin-bottom: 40px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 17px;
  text-transform: uppercase;
  color: #748379;
}
.auth__breadcrumb a { color: inherit; }

.auth__card {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  min-height: 700px;
  border: 1px solid #dce7df;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 14px 17px rgba(20, 46, 28, 0.08);
}

.auth__panel {
  display: flex;
  flex-direction: column;
  margin: -1px 0 -1px -1px;
  padding: 42px 50px 63px 40px;
  border-radius: 22px;
  background: #17341f;
  color: #fff;
}
.auth__accent {
  display: block;
  width: 64px; height: 5px;
  margin-bottom: 37px;
  border-radius: 3px;
  background: #e98a15;
}
.auth__panel-eyebrow {
  margin: 0 0 23px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 17px;
  text-transform: uppercase;
  color: #82d39a;
}
.auth__panel-title {
  margin: 0 0 28px;
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 3vw, 2.375rem);
  font-weight: 600;
  line-height: 1.24;
}
.auth__panel-text { margin: 0; font-size: 0.9375rem; line-height: 25px; color: #d7e7dc; }
.auth__badge {
  margin-top: auto;
  padding: 14px 17px 16px;
  border: 1px solid #315f3c;
  border-radius: 14px;
  background: #214b2e;
}
.auth__badge-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 9px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 20px;
}
.auth__badge-text { margin: 0; font-size: 0.75rem; line-height: 19px; color: #c7dccb; }

.auth__main { padding: 42px 70px 56px 60px; }
.auth__eyebrow {
  margin: 0 0 18px;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 16px;
  text-transform: uppercase;
  color: var(--syn-green-500);
}
.auth__tabs {
  display: flex;
  gap: 8px 40px;
  flex-wrap: wrap;
  margin-bottom: 36px;
  padding-left: 12px;
  border-bottom: 1px solid #e2e9e4;
}
.auth__tab {
  position: relative;
  padding: 0 14px 19px;
  font-size: 0.8125rem;
  line-height: 20px;
  color: #6a7a70;
}
.auth__tab:hover { color: #17341f; text-decoration: none; }
.auth__tab.is-active { font-weight: 600; color: #17341f; }
.auth__tab.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  height: 3px;
  border-radius: 2px;
  background: var(--syn-green-500);
}
.auth__title {
  margin: 0 0 9px;
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 39px;
  color: #17341f;
}
.auth__intro { margin: 0 0 35px; font-size: 0.875rem; line-height: 22px; color: #66766d; }

.auth-form { display: grid; gap: 20px; }
.auth-form .form-item { margin: 0; }
.auth-form label {
  display: block;
  margin-bottom: 7px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 18px;
  color: #304a39;
}
.auth-form .form-required::after { content: " *"; }
.auth-form input[type="text"],
.auth-form input[type="password"] {
  width: 100%;
  height: 56px;
  padding: 0 15px;
  border: 1px solid #cedbd2;
  border-radius: var(--r-sm);
  background: #fff;
  font: inherit;
  font-size: 0.875rem;
  color: #17341f;
}
.auth-form ::placeholder { color: #87968d; opacity: 1; }
.auth-form input:focus {
  outline: none;
  border-color: var(--syn-green-500);
  box-shadow: 0 0 0 3px rgba(0, 153, 51, 0.12);
}
.auth-form input.error { border-color: #d0492a; }

/* Show/hide password: the design's ring-and-pupil eye, added by auth.js. */
.auth-form__password { position: relative; }
.auth-form__password input { padding-right: 50px; }
.auth-form__reveal {
  position: absolute;
  right: 14px;
  /* Label (18px) + gap (7px) + half of the 56px box, less half the button. */
  top: 39px;
  width: 28px; height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: url("../images/icon-auth-eye.svg") center / 18px no-repeat;
  cursor: pointer;
}
.auth-form__reveal::after {
  content: "";
  position: absolute;
  top: 12px; left: 12px;
  width: 4px; height: 4px;
  background: url("../images/icon-auth-pupil.svg") center / contain no-repeat;
}
.auth-form__reveal[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  top: 13px; left: 4px;
  width: 20px; height: 1.5px;
  background: #73847a;
  transform: rotate(-45deg);
}
.auth-form__reveal:focus-visible { outline: 2px solid var(--syn-green-500); outline-offset: 2px; }

.auth-form__options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 7px;
}
.auth-form__options .form-type-checkbox { display: flex; align-items: center; gap: 11px; }
.auth-form__options .form-type-checkbox label {
  margin: 0;
  font-weight: 400;
  line-height: 20px;
  color: #64756b;
  cursor: pointer;
}
.auth-form input[type="checkbox"] {
  flex: none;
  width: 18px; height: 18px;
  margin: 0;
  border: 1px solid #a9bab0;
  border-radius: 4px;
  background: #fff center / 12px no-repeat;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.auth-form input[type="checkbox"]:checked {
  border-color: var(--syn-green-500);
  background-color: var(--syn-green-500);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");
}
.auth-form input[type="checkbox"]:focus-visible { outline: 2px solid var(--syn-green-500); outline-offset: 2px; }
.auth-form__forgot { font-size: 0.75rem; font-weight: 600; line-height: 20px; color: #007a33; }

.auth-form .form-actions { margin: 9px 0 0; }
.auth-form__submit {
  min-width: 220px;
  height: 50px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--syn-green-500);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.auth-form__submit:hover,
.auth-form__submit:focus-visible { background: var(--syn-green-600); }

.auth__switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 60px;
  margin: 29px 0 0;
  font-size: 0.8125rem;
  line-height: 20px;
  color: #66766d;
}
.auth__switch a { font-weight: 600; color: #007a33; }
.auth__switch--back { margin-top: 34px; }

/* Sign-up (1139:10108): name and e-mail, then the two passwords, side by
   side. Drupal nests them in wrappers, which step aside for the grid. */
.auth--register .auth__title { margin-top: -6px; }
.auth--register .auth__intro { margin-bottom: 30px; }
.auth-form--register {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.auth-form--register > .form-wrapper:not(.form-actions),
.auth-form--register .form-type-password-confirm { display: contents; }
.auth-form--register .auth-form__full-name .form-item { order: 1; }
.auth-form--register .form-item-mail { order: 2; }
.auth-form--register .form-item-pass-pass1 { order: 3; }
.auth-form--register .form-item-pass-pass2 { order: 4; }
.auth-form--register .password-suggestions { order: 5; grid-column: 1 / -1; }
.auth-form--register .form-item-consent { order: 6; grid-column: 1 / -1; margin-top: 10px; }
.auth-form--register .form-actions { order: 7; grid-column: 1 / -1; margin-top: 22px; }
.auth-form--register .form-type-password-confirm > .description { display: none; }

/* Core's password helpers: a strength bar under "Mot de passe", the match
   note under "Confirmer", and the tips (shown while the password is weak)
   in a tinted box under both. */
.auth-form .password-strength { margin-top: 8px; }
.auth-form .password-strength__meter {
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: #e2e9e4;
}
.auth-form .password-strength__indicator {
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: #d0492a;
  transition: width 0.2s ease, background-color 0.2s ease;
}
.auth-form .password-strength__indicator.is-fair { background: var(--syn-orange); }
.auth-form .password-strength__indicator.is-good { background: #7cb342; }
.auth-form .password-strength__indicator.is-strong { background: var(--syn-green-500); }
.auth-form .password-strength__title,
.auth-form .password-confirm-message {
  margin-top: 6px;
  font-size: 0.75rem;
  line-height: 18px;
  color: #66766d;
}
.auth-form .password-confirm-message .ok { color: var(--syn-green-500); font-weight: 600; }
.auth-form .password-confirm-message .error { color: #d0492a; font-weight: 600; }
.auth-form .password-suggestions {
  padding: 14px 17px;
  border: 1px solid #d5e5d9;
  border-radius: 14px;
  background: #f0f7f2;
  font-size: 0.75rem;
  line-height: 19px;
  color: #17341f;
  font-weight: 600;
}
.auth-form .password-suggestions:empty,
.auth-form--register:not(.is-typing-password) .password-suggestions { display: none !important; }
.auth-form--register:not(.has-password) .password-strength { display: none; }
.auth-form--register:not(.is-typing-confirm) .password-confirm-message { display: none; }
.auth-form .password-suggestions ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin-top: 6px;
  font-weight: 400;
  color: #65766c;
}
.auth-form .password-suggestions li { position: relative; padding-left: 12px; }
.auth-form .password-suggestions li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--syn-orange);
}
.auth-form input[type="email"] {
  width: 100%;
  height: 56px;
  padding: 0 15px;
  border: 1px solid #cedbd2;
  border-radius: var(--r-sm);
  background: #fff;
  font: inherit;
  font-size: 0.875rem;
  color: #17341f;
}
.auth-form .form-item-consent { display: flex; align-items: center; gap: 11px; }
.auth-form .form-item-consent label {
  margin: 0;
  font-weight: 400;
  line-height: 20px;
  color: #64756b;
  cursor: pointer;
}
.auth-form .form-item-consent .form-required::after { content: none; }

/* Password request (1139:10223). */
.auth--password .auth__intro { max-width: 620px; margin-bottom: 56px; }
.auth-form--password { gap: 25px; }
.auth-form__help {
  margin-top: 5px;
  padding: 15px 17px 16px;
  border: 1px solid #d5e5d9;
  border-radius: 14px;
  background: #f0f7f2;
}
.auth-form__help-title { margin: 0 0 7px; font-size: 0.8125rem; font-weight: 600; line-height: 20px; color: #17341f; }
.auth-form__help-text { margin: 0; font-size: 0.75rem; line-height: 19px; color: #65766c; }

@media (max-width: 1024px) {
  .auth__card { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .auth__panel { margin: -1px -1px 0; padding: 32px 32px 28px; }
  .auth__badge { margin-top: 28px; }
  .auth__main { padding: 36px 32px 44px; }
}
@media (max-width: 720px) {
  .auth { padding-block: 28px 56px; }
  .auth__breadcrumb { margin-bottom: 24px; }
  .auth__main { padding: 28px 20px 36px; }
  .auth__panel { padding: 28px 20px 24px; }
  .auth__tabs { gap: 4px 12px; padding-left: 0; }
  .auth__tab { padding-inline: 4px; }
  .auth-form__submit { width: 100%; }
  .auth-form--register { grid-template-columns: minmax(0, 1fr); }
  .auth--password .auth__intro { margin-bottom: 32px; }
}

/* =========================================================================
   Météo agricole (Figma "Outil — Météo agricole", 1139:8989)
   ========================================================================= */
.meteo {
  --meteo-ink: #2b3024;
  --meteo-muted: #636e78;
  --meteo-line: #e5eaed;
  --meteo-green: #1a570d;
  --meteo-tint: #f6fbf7;
  --meteo-shadow: 0 8px 22px -8px rgba(13, 31, 13, 0.08);
}

/* Search band. */
.meteo__search { padding-block: 88px; background: #fff; text-align: center; }
.meteo__search .eyebrow { margin-bottom: 16px; }
.meteo__title,
.meteo__place {
  margin: 0 0 16px;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 600;
  line-height: 1.33;
  color: var(--meteo-ink);
}
.meteo__intro {
  max-width: 1004px;
  margin: 0 auto 28px;
  font-size: 1.0625rem;
  line-height: 28px;
  color: var(--meteo-muted);
}
.meteo__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  text-align: left;
}
.meteo__field { position: relative; }
.meteo__field-dot {
  position: absolute;
  top: 22px; left: 20px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--syn-orange);
  pointer-events: none;
}
.meteo__field input {
  width: 100%;
  height: 58px;
  padding: 0 20px 0 46px;
  border: 1px solid var(--meteo-line);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: 1rem;
  color: var(--meteo-ink);
}
.meteo__field input::placeholder { color: var(--meteo-muted); opacity: 1; }
.meteo__field input:focus {
  outline: none;
  border-color: var(--syn-orange);
  box-shadow: 0 0 0 3px rgba(235, 130, 0, 0.14);
}
.meteo__suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  z-index: 5;
  padding: 6px;
  border: 1px solid var(--meteo-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 32px -12px rgba(13, 31, 13, 0.2);
}
.meteo__suggestion {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
}
.meteo__suggestion:hover,
.meteo__suggestion[aria-selected="true"] { background: var(--meteo-tint); }
.meteo__suggestion-name { font-weight: 600; color: var(--meteo-ink); }
.meteo__suggestion-region { font-size: 0.875rem; color: var(--meteo-muted); }
.meteo__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  background: var(--syn-orange);
  box-shadow: 0 10px 24px -6px rgba(26, 41, 15, 0.16);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.meteo__submit:hover,
.meteo__submit:focus-visible { background: var(--syn-orange-600); }
.meteo__examples {
  margin: 16px 0 0;
  font-size: 0.875rem;
  line-height: 22px;
  color: var(--meteo-muted);
}
.meteo__example {
  padding: 0 0 0 4px;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.meteo__example:hover,
.meteo__example:focus-visible { color: var(--syn-orange-600); text-decoration: underline; }
.meteo__status { min-height: 22px; margin: 8px 0 0; font-size: 0.875rem; color: var(--meteo-green); }

/* Forecast band. */
.meteo__forecast { padding-block: 88px 96px; background: #f4f7f9; transition: opacity 0.2s ease; }
.meteo__forecast.is-loading .meteo__today,
.meteo__forecast.is-loading .meteo__days { opacity: 0.45; }
.meteo__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}
.meteo__head .eyebrow { margin-bottom: 4px; }
.meteo__place { margin: 0; font-size: clamp(1.6rem, 2.8vw, 2.125rem); line-height: 46px; }
.meteo__note {
  flex: 0 1 400px;
  padding: 16px 18px;
  border: 1px solid #e0ebe3;
  border-radius: 18px;
  background: var(--meteo-tint);
  box-shadow: var(--meteo-shadow);
}
.meteo__note-title { margin: 0 0 4px; font-family: var(--font-heading); font-size: 0.875rem; font-weight: 600; line-height: 20px; color: var(--meteo-green); }
.meteo__note-text { margin: 0; font-size: 0.8125rem; line-height: 20px; color: var(--meteo-muted); }

.meteo__today {
  display: grid;
  grid-template-columns: minmax(0, 300px) repeat(4, minmax(0, 190px));
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 30px;
  padding: 30px 32px;
  border: 1px solid var(--meteo-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--meteo-shadow);
  transition: opacity 0.2s ease;
}
.meteo__now-label { margin: 0 0 4px; font-family: var(--font-heading); font-size: 1.125rem; font-weight: 600; line-height: 26px; color: var(--meteo-ink); }
.meteo__now-temp { margin: 0 0 4px; font-family: var(--font-heading); font-size: 4rem; font-weight: 600; line-height: 72px; color: var(--meteo-ink); }
.meteo__now-sky { margin: 0; font-size: 0.9375rem; line-height: 24px; color: var(--meteo-muted); }
.meteo__tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 18px;
  border-radius: 16px;
  background: var(--meteo-tint);
}
.meteo__dot { width: 18px; height: 18px; border-radius: 50%; background: #1f75b0; }
.meteo__tile--wind .meteo__dot { background: #056673; }
.meteo__tile--humidity .meteo__dot { background: var(--meteo-green); }
.meteo__tile--rain-chance .meteo__dot { background: var(--syn-orange); }
.meteo__tile-label { margin: 0; font-size: 0.8125rem; line-height: 20px; color: var(--meteo-muted); }
.meteo__tile-value { margin: 0; font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 600; line-height: 24px; color: var(--meteo-ink); }

.meteo__days {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: opacity 0.2s ease;
}
.meteo__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 22px 28px;
  border: 1px solid var(--meteo-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  text-align: center;
}
.meteo__day p { margin: 0; }
.meteo__day-name { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 600; line-height: 26px; color: var(--meteo-ink); }
.meteo__day-temp { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; line-height: 28px; color: var(--meteo-ink); }
.meteo__day-meta { font-size: 0.875rem; line-height: 22px; color: var(--meteo-muted); }
.meteo__day-chance { font-size: 0.8125rem; line-height: 20px; color: var(--meteo-green); }
/* Sky dot: the design's sun, recoloured for other skies. */
.meteo__sky { width: 34px; height: 34px; margin-block: 4px; border-radius: 50%; background: #d7dde1; }
.meteo__sky--clear { background: #f5ad1a; }
.meteo__sky--partly { background: linear-gradient(135deg, #f5ad1a 0 50%, #c9d1d6 50% 100%); }
.meteo__sky--cloudy { background: #b4bec5; }
.meteo__sky--rain { background: #1f75b0; }
.meteo__sky--snow { background: #a9cbe3; }
.meteo__sky--storm { background: #3f4d57; }

@media (max-width: 1024px) {
  .meteo__today { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meteo__now { grid-column: 1 / -1; }
  .meteo__days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .meteo__search { padding-block: 56px; }
  .meteo__form { grid-template-columns: minmax(0, 1fr); }
  .meteo__forecast { padding-block: 56px 64px; }
  .meteo__head { flex-direction: column; align-items: stretch; }
  .meteo__note { flex-basis: auto; }
  .meteo__today { padding: 24px 20px; gap: 14px; }
  .meteo__days { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

/* Feature list, "indicators" layout (Météo, "L'essentiel, sans surcharge"):
   centred heading, small cards each marked by a coloured dot. */
.features--indicators { padding-block: 90px 96px; background: #f6fbf7; }
.features--indicators .section__head { justify-content: center; margin-bottom: 30px; text-align: center; }
.features--indicators .section__head-text { max-width: none; }
.features--indicators .section__title,
.features--tools .section__title { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 600; line-height: 1.33; color: #2b3024; }
.features--indicators .features__items { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.features--indicators .feature {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  padding: 28px;
  border: 1px solid #e5eaed;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}
.features--indicators .feature__badge {
  display: block;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #1f75b0;
}
.features--indicators .features__items > :nth-child(4n + 2) .feature__badge { background: #056673; }
.features--indicators .features__items > :nth-child(4n + 3) .feature__badge { background: #1a570d; }
.features--indicators .features__items > :nth-child(4n + 4) .feature__badge { background: var(--syn-orange); }
.features--indicators .feature__title,
.features--tools .feature__title { margin: 0 0 16px; font-size: 1.1875rem; font-weight: 600; line-height: 27px; color: #2b3024; }
.features--indicators .feature__text,
.features--tools .feature__text { font-size: 0.875rem; line-height: 22px; color: #636e78; }

/* Feature list, "tools" layout (Météo, "Passez de la prévision à
   l'action"): bordered cards, photo on top, "Explorer →" link. */
.features--tools { padding-block: 92px 100px; background: #fff; }
.features--tools .section__head { margin-bottom: 30px; }
.features--tools .features__items { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.features--tools .feature {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 22px;
  border: 1px solid #e5eaed;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 8px 22px -8px rgba(13, 31, 13, 0.08);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.features--tools .feature:hover,
.features--tools .feature:focus-within { box-shadow: 0 18px 36px -12px rgba(13, 31, 13, 0.2); transform: translateY(-2px); }
.features--tools .feature__media { height: 180px; overflow: hidden; border-radius: 16px; }
.features--tools .feature__media img { width: 100%; height: 100%; object-fit: cover; }
.features--tools .feature__body { display: flex; flex-direction: column; flex: 1; }
.features--tools .feature__title { margin: 0 0 12px; }
.features--tools .feature__link {
  margin-top: auto;
  padding-top: 12px;
  gap: 8px;
  font-family: var(--font-heading);
  font-size: 0.875rem;
  color: #1a570d;
}
/* The whole card is the link's target. */
.features--tools .feature__link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.features--tools .feature__link .card__arrow { display: none; }
.features--tools .feature__link::after { content: "→"; }

@media (max-width: 1024px) {
  .features--indicators .features__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features--tools .features__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .features--indicators,
  .features--tools { padding-block: 56px 64px; }
  .features--indicators .features__items,
  .features--tools .features__items { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   Crop and product category pages (Figma "Fruits rouges" 1139:5831,
   "Vigne" 1139:6014, "Fongicide" 1139:5923)
   ========================================================================= */
.term-products { padding-block: 100px; background: #fff; }
/* Groups alternate white and light grey, as Fongicides / Insecticides do. */
.term-products + .term-products { background: #f9fafb; }
.term-products + .term-products + .term-products { background: #fff; }
.term-products__title {
  margin: 0 0 32px;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--syn-ink);
}
.term-products__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.term-products__empty { margin: 0; text-align: center; font-size: 1.0625rem; color: var(--syn-body); }

/* Campaign visuals fill the card's panel instead of sitting in it. */
.product-card--visual .product-card__visual { padding: 0; overflow: hidden; }
.product-card--visual .product-card__visual a { display: block; width: 100%; height: 100%; }
.product-card--visual .product-card__visual img { width: 100%; height: 100%; max-height: none; object-fit: cover; }

/* "Demande d'infos" on crop pages (Figma "Vigne", 1139:6099). */
.lead-crop { padding-block: 40px 110px; background: #fff; }
.lead-crop__card {
  display: grid;
  grid-template-columns: minmax(0, 569px) minmax(0, 1fr);
  overflow: hidden;
  border-radius: 26px;
  background: #f9f9f9;
  box-shadow: 0 4px 6.4px rgba(0, 0, 0, 0.17);
}
.lead-crop__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 100%;
  padding: 95px 58px 58px;
  background:
    linear-gradient(180deg, rgba(38, 71, 1, 0.85) 0%, rgba(38, 71, 1, 0.55) 30%, rgba(38, 71, 1, 0) 62%),
    #264701 center / cover no-repeat;
  color: #fff;
}
.lead-crop__badge {
  display: grid;
  place-items: center;
  width: 45px; height: 45px;
  margin-bottom: 30px;
  border: 1px solid rgba(245, 245, 245, 0.22);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.1);
}
.lead-crop__eyebrow {
  margin: 0 0 15px;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #fa0;
}
.lead-crop__title {
  margin: 0 0 28px;
  font-size: clamp(2rem, 3.4vw, 2.95rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.06em;
  color: #fff;
}
.lead-crop__title .hl { display: block; font-weight: 400; color: #7fca3f; }
.lead-crop__text { max-width: 403px; font-family: var(--font-heading); font-size: 1.0625rem; line-height: 26px; color: rgba(255, 255, 255, 0.7); }

.lead-crop__form { padding: 70px 66px 64px; }
.lead-crop__form-eyebrow {
  margin: 0 0 11px;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #df8c24;
}
.lead-crop__form-title {
  margin: 0 0 15px;
  font-size: clamp(2rem, 3.4vw, 3.07rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.06em;
  color: #264600;
}
.lead-crop__form-intro { max-width: 545px; margin: 0 0 34px; font-family: var(--font-heading); font-size: 0.89rem; line-height: 26px; color: #6e827a; }

.lead-crop__form .webform-submission-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 19px;
}
.lead-crop__form .form-item-intro,
.lead-crop__form .lead-crop__options { grid-column: 1 / -1; }
.lead-crop__form .js-form-item { margin: 0; }
.lead-crop__form label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 15.6px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4c7165;
}
.lead-crop__form .form-required::after { content: " *"; color: #df8c24; }
.lead-crop__form input[type="text"],
.lead-crop__form input[type="email"],
.lead-crop__form input[type="tel"],
.lead-crop__form select {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border: 1px solid #d9e6dd;
  border-radius: 19px;
  background: #fff;
  font-family: var(--font-heading);
  font-size: 0.89rem;
  color: #264600;
}
.lead-crop__form ::placeholder { color: #a1b0a8; opacity: 1; }
.lead-crop__form input:focus,
.lead-crop__form select:focus { outline: none; border-color: var(--syn-green-500); box-shadow: 0 0 0 3px rgba(0, 153, 51, 0.12); }
.lead-crop__form select {
  padding-right: 42px;
  -webkit-appearance: none;
  appearance: none;
  background: #fff url("../images/icon-lead-chevron.svg") right 15px center / 16px no-repeat;
}
.lead-crop__form select:invalid { color: #a1b0a8; }
/* Icons inside the e-mail, phone and city boxes. */
.lead-crop__icon input { padding-left: 42px; background: #fff 15px center / 16px no-repeat; }
.lead-crop__icon--mail input { background-image: url("../images/icon-lead-mail.svg"); }
.lead-crop__icon--phone input { background-image: url("../images/icon-lead-phone.svg"); }
.lead-crop__icon--pin input { background-image: url("../images/icon-lead-pin.svg"); }
/* "ha" sits inside the area box. */
.lead-crop__form .webform-has-field-suffix { position: relative; }
.lead-crop__form .webform-has-field-suffix input { padding-right: 44px; }
.lead-crop__form .webform-has-field-suffix .field-suffix {
  position: absolute;
  right: 18px;
  bottom: 17px;
  font-size: 0.71rem;
  font-weight: 500;
  color: #789187;
}

.lead-crop__options {
  display: grid;
  gap: 11px;
  margin-top: 11px;
  padding: 19px;
  border-radius: 15px;
  background: #f0f6ef;
}
.lead-crop__options .form-type-checkbox { display: flex; align-items: flex-start; gap: 11px; }
.lead-crop__options label {
  margin: 0;
  font-size: 0.83rem;
  font-weight: 500;
  line-height: 22.7px;
  letter-spacing: 0;
  text-transform: none;
  color: #48695f;
  cursor: pointer;
}
.lead-crop__options input[type="checkbox"] {
  flex: none;
  width: 19px; height: 19px;
  margin: 2px 0 0;
  border: 1px solid #b7cbbd;
  border-radius: 50%;
  background: #fff center / 11px no-repeat;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
.lead-crop__options input[type="checkbox"]:checked {
  border-color: var(--syn-green-500);
  background-color: var(--syn-green-500);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E");
}
.lead-crop__options input[type="checkbox"]:focus-visible { outline: 2px solid var(--syn-green-500); outline-offset: 2px; }

/* The privacy note sits beside the submit button. */
.lead-crop__form .form-item-legal { align-self: center; margin-top: 8px; }
.lead-crop__form .form-item-legal p { max-width: 302px; margin: 0; font-family: var(--font-heading); font-size: 0.65rem; line-height: 19px; color: #82948c; }
.lead-crop__form .form-actions { display: flex; justify-content: flex-end; align-self: center; margin: 8px 0 0; }
.lead-crop__form .webform-button--submit {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 13px 45px 13px 23px;
  border: 0;
  border-radius: 16px;
  background: var(--syn-green-500) url("../images/icon-lead-arrow.svg") right 22px center / 15px no-repeat;
  box-shadow: 0 9.5px 9.5px rgba(8, 112, 82, 0.18);
  font-family: var(--font-heading);
  font-size: 0.83rem;
  font-weight: 700;
  line-height: 19px;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.lead-crop__form .webform-button--submit:hover,
.lead-crop__form .webform-button--submit:focus-visible { background-color: var(--syn-green-600); }

@media (max-width: 1024px) {
  .lead-crop__card { grid-template-columns: minmax(0, 1fr); }
  .lead-crop__panel { min-height: 420px; padding: 48px 32px; }
  .lead-crop__form { padding: 44px 32px; }
}
@media (max-width: 720px) {
  .lead-crop { padding-block: 24px 64px; }
  .lead-crop__form { padding: 32px 20px; }
  .lead-crop__form .webform-submission-form { grid-template-columns: minmax(0, 1fr); }
  .lead-crop__form .form-actions { justify-content: stretch; }
  .lead-crop__form .webform-button--submit { width: 100%; justify-content: center; }
}

/* Pager (Figma "Fongicide"): square buttons, current page outlined, next in
   solid green. */
.term-products .pager { margin-top: 56px; }
.term-products .pager__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.term-products .pager__item a {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #d9dde1;
  border-radius: 4px;
  background: #fff;
  font-weight: 600;
  color: var(--syn-ink);
}
.term-products .pager__item a:hover { border-color: var(--syn-green-500); text-decoration: none; }
.term-products .pager__item.is-active a { border-color: var(--syn-green-500); color: var(--syn-green-500); }
.term-products .pager__item--next a,
.term-products .pager__item--last a { border-color: var(--syn-green-500); background: var(--syn-green-500); color: #fff; }

@media (max-width: 1024px) {
  .term-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .term-products { padding-block: 56px; }
  .term-products__grid { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   Product page (Figma "Alto Super - Detail produit", 1139:6608)
   ========================================================================= */
.product__intro { padding-block: 64px 0; background: #fff; }
.product__identity {
  display: grid;
  grid-template-columns: minmax(0, 430px) minmax(0, 1fr);
  gap: 100px;
  align-items: center;
}
.product__visual {
  display: grid;
  place-items: center;
  aspect-ratio: 430 / 246;
  padding: 24px;
  border-radius: var(--r-xl);
  background: #f7f9fb;
}
/* Brand logos ship on a white background; multiply drops it into the panel. */
.product__visual img,
.product-card__visual img { width: auto; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.product__chip {
  display: inline-block;
  margin: 0 0 18px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: #e6f6e9;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #007329;
}
.product__name { margin: 0 0 14px; font-size: clamp(1.6rem, 2.6vw, 2rem); font-weight: 600; }
.product__tagline { margin: 0 0 18px; font-size: 0.94rem; color: var(--syn-gray-500); }
.product__summary { font-size: 1.0625rem; line-height: 1.65; color: var(--syn-ink-soft); }

.product__facts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 48px; }
.product__fact {
  flex: 1 1 170px;
  padding: 24px;
  border: 1px solid #eef0f3;
  border-radius: 12px;
  background: #fbfcfd;
}
.product__fact--wide { flex: 2 1 420px; }
.product__fact-label {
  margin: 0 0 12px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--syn-orange);
}
.product__fact--wide .product__fact-label { text-transform: none; }
/* A composition is entered one active ingredient per line. */
.product__fact-value { margin: 0; white-space: pre-line; font-size: 0.94rem; line-height: 1.6; color: var(--syn-ink); }

.product__main { padding-block: 78px 96px; background: #fff; }
.product__columns {
  display: grid;
  grid-template-columns: minmax(0, 753px) minmax(0, 388px);
  justify-content: space-between;
  gap: 60px;
  align-items: start;
}
.product__content { display: flex; flex-direction: column; gap: 64px; }

/* Framed blocks: technical notes and storage. */
.product__card {
  padding: 56px;
  border: 1px solid #d8ead9;
  border-radius: 20px;
  background: #f4fbf5;
}
.product__card h2,
.product__section h2 {
  margin: 0 0 24px;
  font-size: clamp(1.5rem, 2.2vw, 1.75rem);
  font-weight: 600;
  color: var(--syn-ink);
}
.product__card p,
.product__section p { margin: 0 0 18px; font-size: 0.94rem; line-height: 1.75; color: var(--syn-gray-500); }
.product__card p:last-child,
.product__section p:last-child { margin-bottom: 0; }
.product__section { padding-bottom: 64px; border-bottom: 1px solid var(--syn-border); }

.product__table-title {
  margin: 0 0 29px;
  font-family: var(--font-body);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 18px;
  color: var(--syn-orange);
}
/* Only the field wrappers collapse; the rows keep their own grid. */
.product__table > div:not(.product__row),
.product__table > div > div:not(.product__row) { display: contents; }
.product__row {
  display: grid;
  grid-template-columns: 172px 229px 181px minmax(0, 1fr);
  align-items: center;
  min-height: 69px;
  padding: 12px 28px;
  background: rgba(229, 229, 229, 0.35);
}
/* The rows sit in one wrapper per item, so the banding counts those. */
.product__table > div > div:nth-child(odd) .product__row {
  background: #fff;
  border: 1px solid rgba(115, 115, 115, 0.14);
}
.product__table--packaging .product__row { grid-template-columns: 497px minmax(0, 1fr); padding-inline: 54px; }
.product__row--head span,
.product__cell { font-size: 1.125rem; line-height: 25px; color: #737373; }
.product__row--head span:first-child,
.product__cell--key { font-weight: 500; color: #009933; }
.product__cell--key .field,
.product__cell--key a { color: inherit; }

/* Sticky brand panel. */
.product__aside {
  position: sticky;
  top: 24px;
  padding: 24px;
  border: 1px solid var(--syn-border);
  border-radius: var(--r-xl);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.product__brand {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border-radius: var(--r-md);
  background: #f3fbf5;
}
.product__brand-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--syn-orange);
}
.product__brand-chip {
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: #fff;
  letter-spacing: 0.02em;
  color: #009933;
}
.product__brand-name { margin: 0; }
.product__brand-name img { width: auto; max-height: 42px; object-fit: contain; mix-blend-mode: multiply; }
.product__brand-name--text {
  font-family: var(--font-heading);
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 38px;
  color: #2b3024;
}
.product__brand-text { margin: 0; font-size: 0.8125rem; line-height: 18px; color: #737373; }

.product__meta { display: flex; align-items: center; gap: 12px; margin: 22px 0 0; }
.product__meta-icon {
  flex: none;
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: #eaf6ec var(--icon-calendar) center / 20px no-repeat;
}
.product__meta-label { margin: 0; font-size: 0.75rem; color: var(--syn-gray-500); }
.product__meta-value { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--syn-ink); }
.product__docs-count {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  font-size: 0.8125rem;
  color: var(--syn-gray-500);
}
.product__docs-count::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--syn-green-500);
}
.product__docs-action { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--syn-border); }
.product__docs-list { margin: 0 0 16px; font-size: 0.8125rem; color: var(--syn-gray-500); }
.product__docs-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 0 18px;
  border-radius: 12px;
  background: var(--syn-orange);
  font-size: 0.94rem;
  font-weight: 600;
  color: #fff;
}
.product__docs-cta:hover { text-decoration: none; background: var(--syn-orange-600); }
.product__docs-cta span {
  width: 20px; height: 20px;
  background: #fff;
  -webkit-mask: var(--icon-download) center / contain no-repeat;
  mask: var(--icon-download) center / contain no-repeat;
}

/* Downloads band. */
.product__downloads {
  padding: 94px 0 104px;
  border-radius: var(--r-band) var(--r-band) 0 0;
  background: #f4f7f9;
  text-align: center;
}
.product__downloads .eyebrow { margin-bottom: 10px; font-size: 0.8125rem; }
.product__downloads-title {
  margin: 0 0 12px;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  color: var(--syn-ink);
}
.product__downloads-text { margin: 0 0 42px; color: var(--syn-gray-500); }
.product__downloads-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.download-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 315px;
  padding: 24px;
  border-radius: var(--r-md);
  background: #fff;
  text-align: left;
  box-shadow: var(--shadow-card);
}
.download-card:hover { text-decoration: none; box-shadow: var(--shadow-soft); }
.download-card__type {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin-bottom: 8px;
  border-radius: 14px;
  background: #e6f6e9;
  font-size: 0.875rem;
  font-weight: 700;
  color: #007329;
}
.download-card__title { font-size: 1.125rem; font-weight: 700; color: var(--syn-ink); }
.download-card__size { font-size: 0.875rem; color: var(--syn-gray-500); }
.download-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #007a2f;
}
.download-card__icon {
  width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask: var(--icon-download) center / contain no-repeat;
  mask: var(--icon-download) center / contain no-repeat;
}

/* Related products. */
.product__related { padding-block: 92px 112px; background: #fff; }
.product__related-title {
  margin: 0 0 12px;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  color: var(--syn-ink);
}
.product__related-text { margin: 0 0 42px; color: var(--syn-gray-500); }
.product__related-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 31px; }

/* Figma Component 81 (496:3703): a leaf-shaped visual at rest; on hover a
   green bar appears on top, the corners round off and the arrow fills in. */
.product-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid rgba(115, 115, 115, 0.25);
  border-radius: 24px;
  background: #fff;
  transition: box-shadow 0.25s ease;
}
.product-card:hover,
.product-card:focus-within {
  box-shadow: inset 0 4px 0 #009933, 0 4px 13.2px rgba(0, 0, 0, 0.12);
}
.product-card__visual {
  display: grid;
  place-items: center;
  aspect-ratio: 339 / 254;
  padding: 24px;
  border: 1px solid rgba(115, 115, 115, 0.35);
  border-radius: 0 110px 0 110px;
  background: #f9fafb;
  transition: border-radius 0.3s ease;
}
.product-card:hover .product-card__visual,
.product-card:focus-within .product-card__visual { border-radius: 25px; }
.product-card__visual img { width: auto; max-height: 100%; object-fit: contain; }
.product-card__body { display: flex; flex: 1; flex-direction: column; padding: 26px 0 0; }
.product-card__title { margin: 0 0 14px; font-family: var(--font-body); font-size: 1.375rem; font-weight: 600; }
.product-card__title a { color: #2b3024; transition: color 0.2s ease; }
.product-card:hover .product-card__title a,
.product-card:focus-within .product-card__title a { color: #284a00; }
.product-card__text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 0.99rem;
  line-height: 23px;
  color: #737373;
}
.product-card__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 26px;
  font-size: 0.885rem;
  font-weight: 600;
  color: #009933;
}
.product-card__link:hover { text-decoration: none; }
.product-card__arrow {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(39, 111, 124, 0.1) var(--icon-arrow-green) center / 16px no-repeat;
  transition: background-color 0.2s ease;
}
.product-card:hover .product-card__arrow,
.product-card:focus-within .product-card__arrow {
  background-color: #009933;
  background-image: var(--icon-arrow-white);
}
@media (prefers-reduced-motion: reduce) {
  .product-card,
  .product-card__visual,
  .product-card__arrow,
  .product-card__title a { transition: none; }
}

@media (max-width: 1024px) {
  .product__identity { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .product__columns { grid-template-columns: minmax(0, 1fr); }
  .product__aside { position: static; }
  .product__related-items { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .product__intro { padding-top: 40px; }
  .product__facts { margin-top: 32px; }
  .product__fact { flex: 1 1 100%; padding: 18px; }
  .product__main { padding-block: 48px 64px; }
  .product__content { gap: 40px; }
  .product__card { padding: 28px 22px; }
  .product__section { padding-bottom: 40px; }
  /* Tables scroll sideways rather than squeezing their columns. */
  .product__table { overflow-x: auto; }
  .product__row { grid-template-columns: repeat(4, minmax(110px, 1fr)); padding: 16px 18px; }
  .product__table--packaging .product__row { grid-template-columns: repeat(2, minmax(110px, 1fr)); padding-inline: 18px; }
  .product__downloads { padding: 56px 0 64px; }
  .download-card { width: 100%; }
  .product__related { padding-block: 56px 72px; }
  .product__related-items { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   Listing filters (Figma "Rechercher un communiqué", 1139:8002)
   ========================================================================= */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid #d5e0d1;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 30px -12px rgba(5, 20, 8, 0.09);
}
.filters__search { flex: 0 0 320px; }
.filters__search .form-item { margin: 0; }
.filters__search label { display: none; }
.filters__search input {
  width: 100%;
  height: 56px;
  padding: 0 18px 0 47px;
  border: 1px solid #d5e0d1;
  border-radius: 14px;
  background: #f7f9f6 var(--icon-search) 18px center / 19px no-repeat;
  font: inherit;
  font-size: 0.875rem;
  color: var(--syn-ink);
}
.filters__search input::placeholder { color: #636e85; }
.filters__search input:focus { outline: none; border-color: var(--syn-green-500); }

/* Tinted strip holding the filter pills. */
.filters__cluster {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 56px;
  padding: 6px;
  border-radius: 14px;
  background: #f7f9f6;
}
.filters__cluster .form-item { margin: 0; }
.filters__cluster label { display: none; }

.filters__pill,
.filters__cluster select {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  border: 1px solid #d5e0d1;
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #29362b;
  cursor: pointer;
}
.filters__pill:hover,
.filters__cluster select:hover { text-decoration: none; border-color: var(--syn-green-500); }
.filters__pill.is-active {
  border-color: transparent;
  background: #e6f6e9;
  color: #007329;
}

/* The chevron of the design, since the native arrow cannot be styled. */
.filters__cluster select {
  padding-right: 40px;
  -webkit-appearance: none;
  appearance: none;
  background: #fff var(--icon-chevron) right 16px center / 16px no-repeat;
}
.filters__cluster select:focus { outline: none; border-color: var(--syn-green-500); }

/* Kept for visitors without JavaScript, where the form needs a submit. */
.filters__actions .form-actions { margin: 0; }
.filters__actions input[type="submit"] {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--syn-green-500);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}
.filters__actions input[type="submit"]:hover { background: var(--syn-green-600); }
.filters__actions [id*="edit-reset"] { display: none; }
.js .filters__actions { display: none; }

@media (max-width: 720px) {
  .filters { padding: 12px; gap: 12px; }
  .filters__search { flex: 1 1 100%; }
  .filters__cluster { flex: 1 1 100%; }
  .filters__cluster select { flex: 1 1 100%; }
}

/* =========================================================================
   Press releases (Figma "Communiqués de presse", 1139:7964 / 1139:8512)
   ========================================================================= */
.release-page__head { padding-block: 76px 64px; background: #fff; }
.release-page__head .article__crumbs { margin-bottom: 24px; color: #009e30; }
.release-page__head .article__meta { margin-bottom: 24px; }
.release-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 40px;
  border-bottom: 1px solid #dae6d7;
}
.release-page__main { padding-block: 64px 120px; }
.release-page__about {
  padding: 36px;
  border: 1px solid #d1e0d1;
  border-radius: 20px;
  background: #f6faf7;
}
.release-page__about h2 {
  margin: 0 0 14px;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 30px;
  color: #009e30;
}
.release-page__about p { margin: 0; font-size: 1rem; line-height: 26px; color: #737373; }
.release-page__download { width: 100%; min-height: 56px; }
.release-page__related { padding-top: 92px; }

/* One row per release. */
.release-list { display: flex; flex-direction: column; gap: 16px; }
.release-list > div,
.release-list > div > div { display: contents; }
.release {
  position: relative;
  display: grid;
  grid-template-columns: 6px 112px minmax(0, 1fr) 230px;
  gap: 24px;
  align-items: center;
  padding: 24px 30px 24px 0;
  border: 1px solid var(--syn-border);
  border-radius: var(--r-lg);
  background: #fff;
  transition: box-shadow 0.25s ease;
}
.release:hover,
.release:focus-within { box-shadow: var(--shadow-card); }
.release__accent {
  height: 144px;
  border-radius: var(--r-pill);
  background: var(--syn-green-500);
}
.release__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  height: 144px;
  margin: 0;
  border-radius: 13px;
  /* Each row gets its own tint; see the cycle below. */
  background: var(--release-tint, #e5f5e8);
  line-height: 1.1;
}
.release__date-day {
  font-family: var(--font-heading);
  font-size: 2.125rem;
  font-weight: 600;
  line-height: 38px;
  color: #101828;
}
.release__date-month {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #007a55;
}
.release__date-year { font-size: 0.75rem; color: #636e85; }

/* The five tints of the design, picked per release. */
.release--tint-0 { --release-tint: #e5f5e8; }
.release--tint-1 { --release-tint: #fff0d6; }
.release--tint-2 { --release-tint: #e8f2ff; }
.release--tint-3 { --release-tint: #f5ebff; }
.release--tint-4 { --release-tint: #fff2e0; }
.release__meta {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 10px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--syn-orange);
}
.release__meta > * + *::before { content: "·"; margin-inline: 8px; }
.release__title { margin: 0 0 12px; font-size: 1.3rem; font-weight: 700; line-height: 1.35; }
.release__title a { color: var(--syn-ink); }
.release__text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--syn-gray-500);
}
.release__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.release__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #007a55;
}
.release__link:hover { text-decoration: none; }
/* Outlined green pill, like the "PDF · 1,2 Mo" button in the design. */
.release__pdf {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid #009e30;
  border-radius: var(--r-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #009e30;
}
.release__pdf:hover { text-decoration: none; background: #009e30; color: #fff; }
.release__pdf-icon {
  width: 16px; height: 16px;
  background: currentColor;
  -webkit-mask: var(--icon-download) center / contain no-repeat;
  mask: var(--icon-download) center / contain no-repeat;
}

/* "Dernier communiqué" panel: plain on the page, no card around it. */
.latest-release {
  display: grid;
  grid-template-columns: minmax(0, 612px) minmax(0, 540px);
  justify-content: space-between;
  gap: 48px;
  align-items: center;
}
.latest-release__meta {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #007a2f;
}
.latest-release__meta > * + *::before { content: "·"; margin-inline: 8px; }
.latest-release__title {
  margin: 0 0 18px;
  font-size: clamp(1.6rem, 2.7vw, 2.15rem);
  font-weight: 600;
  line-height: 1.22;
}
.latest-release__title a { color: var(--syn-ink); }
.latest-release__text { color: var(--syn-gray-500); font-size: 1rem; line-height: 1.6; }
.latest-release__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 60px;
  margin: 0;
  padding-top: 26px;
  border-top: 1px solid #dfe5e2;
}
.latest-release__facts dt {
  margin: 0 0 6px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--syn-gray-500);
}
.latest-release__facts dd { margin: 0; font-size: 0.94rem; font-weight: 600; color: var(--syn-ink); }
.latest-release__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; }

/* The two pill buttons of the design. */
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 26px;
  border-radius: var(--r-pill);
  font-size: 0.95rem;
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-pill:hover { text-decoration: none; }
.btn-pill--read { background: var(--syn-green-500); color: #fff; }
.btn-pill--read::after {
  content: "";
  width: 24px; height: 24px;
  background: var(--icon-arrow-disc) center / contain no-repeat;
}
.btn-pill--read:hover { background: var(--syn-green-600); color: #fff; }
.btn-pill--pdf { border: 1px solid #009e30; color: #009e30; }
.btn-pill--pdf::before {
  content: "";
  width: 18px; height: 18px;
  background: currentColor;
  -webkit-mask: var(--icon-download) center / contain no-repeat;
  mask: var(--icon-download) center / contain no-repeat;
}
.btn-pill--pdf:hover { background: #009e30; color: #fff; }

.latest-release__visual {
  position: relative;
  align-self: stretch;
  min-height: 500px;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.latest-release__visual > a {
  position: absolute;
  inset: 0;
  background: var(--syn-bg-soft) center / cover no-repeat;
}
/* Caption panel over the bottom of the photo. */
.latest-release__caption {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  padding: 18px 22px;
  border-radius: var(--r-md);
  background: rgba(20, 28, 23, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.latest-release__caption-eyebrow {
  margin: 0 0 6px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--syn-amber);
}
.latest-release__caption-text {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  color: #fff;
}

/* Espace médias. */
.media-space {
  padding: 96px 0 104px;
  border-radius: var(--r-band) var(--r-band) 0 0;
  background: #f4f7f9;
}
.media-space__eyebrow { margin-bottom: 7px; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.1em; color: var(--syn-amber); }
.media-space__title {
  margin: 0 0 22px;
  font-size: clamp(1.75rem, 2.8vw, 2.25rem);
  font-weight: 600;
  line-height: 44px;
  color: #2b3024;
}
.media-space__cards { display: grid; grid-template-columns: 450fr 353fr 353fr; gap: 22px; }
.media-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  border: 1px solid #e5e9ec;
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}
.media-card--contact { gap: 18px; padding: 32px 34px; }

/* Press contact on the listing: dark green gradient card. */
.media-card--dark {
  border-color: rgba(115, 173, 92, 0.35);
  border-radius: 22px;
  background: linear-gradient(90deg, #173803 0%, #2e5703 100%);
  box-shadow: 0 3px 10px -3px rgba(5, 13, 5, 0.04), 0 16px 36px -10px rgba(5, 18, 6, 0.09);
}
.media-card--dark .media-card__icon--contact {
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.12);
}
.media-card--dark .media-card__title { color: #fff; }
.media-card--dark .media-card__text { color: rgba(255, 255, 255, 0.72); }
.media-card--dark .media-card__meta { color: rgba(255, 255, 255, 0.8); }
.media-card--dark .media-card__link { color: #fff; }
.media-card--dark .card__arrow { background: #fff; }
.media-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  border-radius: 14px;
}
.media-card__icon--contact { background: rgba(168, 184, 26, 0.2); }
.media-card__icon--kit { background: #fff0d6; }
.media-card__icon--assets { background: #e5f5e8; }
.media-card__label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--syn-orange);
}
.media-card__title {
  margin: 0;
  font-size: 1.5625rem;
  font-weight: 600;
  line-height: 1.3;
  color: #2b3024;
}
.media-card--contact .media-card__title { font-size: 1.6875rem; line-height: 35px; }
.media-card__text { margin: 0; font-size: 0.875rem; line-height: 22px; color: #2b3024; }
.media-card__meta { margin: 0; font-size: 0.75rem; font-weight: 600; color: #2b3024; }
.media-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--syn-green-500);
}
.media-card__link:hover { text-decoration: none; }

@media (max-width: 1024px) {
  .latest-release { grid-template-columns: minmax(0, 1fr); }
  .latest-release__visual { min-height: 320px; }
  .media-space__cards { grid-template-columns: minmax(0, 1fr); }
  .release { grid-template-columns: 6px 96px minmax(0, 1fr); padding-right: 24px; }
  .release__actions { grid-column: 2 / -1; flex-direction: row; align-items: center; }
}
@media (max-width: 720px) {
  .release-page__head { padding-block: 40px 32px; }
  .release-page__main { padding-block: 40px 64px; }
  .release-page__about { padding: 24px; }
  .release { grid-template-columns: 6px minmax(0, 1fr); gap: 16px; padding: 20px 20px 20px 0; }
  .release__date { flex-direction: row; gap: 6px; align-items: baseline; padding: 10px 14px; }
  .release__date-day { font-size: 1.25rem; }
  .release__actions { grid-column: 2 / -1; flex-wrap: wrap; }
  .media-space { padding: 56px 0 64px; }
}

/* The document actions are page furniture, not part of the printout. */
@media print {
  .site-header,
  .site-footer,
  .release-page__actions,
  .media-space,
  .release-page__related,
  .article__aside { display: none; }
  .hero--article { min-height: 0; padding-block: 0 24px; color: #000; }
  .hero--article .hero__scrim { display: none; }
  .hero--article,
  .hero--article .hero__title,
  .hero--article .hero__subtitle { background: none; color: #000; }
  .article__columns { display: block; }
}

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer {
  padding: 72px 0 28px;
  background: var(--syn-green-800);
  color: rgba(255, 255, 255, 0.85);
  border-radius: var(--r-band) var(--r-band) 0 0;
}
.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 376px) minmax(0, 1fr);
  gap: 48px 110px;
}
.site-footer__brand { display: inline-block; color: #fff; margin-bottom: 28px; }
.site-footer__brand:hover { text-decoration: none; }

.newsletter {
  display: flex;
  align-items: center;
  max-width: 376px;
  padding: 3px;
  background: #fff;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--r-pill);
}
.newsletter__input {
  flex: 1;
  min-width: 0;
  padding: 10px 16px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.9rem;
  color: var(--syn-ink);
}
.newsletter__input::placeholder { color: #9ca3af; }
.newsletter__input:focus { outline: none; }
.newsletter__submit {
  flex: none;
  width: 158px;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--syn-green-500);
  color: #fff;
  font: inherit;
  font-weight: 500;
  font-size: 0.94rem;
  cursor: pointer;
}
.newsletter__submit:hover { background: var(--syn-green-600); }
/* Webform wraps the field and the button; the wrappers must not break the pill. */
.newsletter .form-item,
.newsletter .form-actions { margin: 0; }
.newsletter .js-form-item-email { display: flex; flex: 1; min-width: 0; }
.newsletter .form-actions { flex: none; }
.newsletter .form-item--error-message,
.newsletter .webform-element-description { display: none; }
/* Webform's Ajax reply puts its messages inside the form, i.e. inside the
   white pill; lift them out to sit just under it, on the dark footer. */
.site-footer__newsletter { max-width: 376px; }
.newsletter { position: relative; }
.newsletter [data-drupal-messages] {
  position: absolute;
  top: calc(100% + 8px);
  left: 18px;
  right: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #fff;
}
.newsletter [data-drupal-messages] [role="alert"] { color: #ffc9b8; }
.newsletter [data-drupal-messages] ul { padding-left: 1.2em; list-style: disc; }
/* Room for the message, so it does not run into the tagline. */
.site-footer__newsletter:has([data-drupal-messages]) { margin-bottom: 26px; }
/* Webform puts the thank-you note inside the form, so it fills the white pill. */
.newsletter .webform-confirmation {
  flex: 1;
  min-width: 0;
  padding: 10px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--syn-green-800);
}

.site-footer__tagline {
  margin: 28px 0 38px;
  max-width: 376px;
  font-size: 0.875rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
}

.social { display: flex; gap: 16px; }
.social__link {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
}
.social__link svg {
  width: 16px; height: 16px;
  fill: #fff;
}
.social__link:hover { border-color: #fff; }

.site-footer__menu-col { padding-top: 88px; }
.site-footer__menu-col ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 24px;
  align-content: start;
}
.site-footer__menu-col a {
  color: #fff;
  font-size: 0.875rem;
}
.site-footer__menu-col a:hover { text-decoration: underline; }
.site-footer__menu-col ul ul { display: none; }

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
}
.site-footer__legal-links { display: inline-flex; gap: 24px; }
.site-footer__legal-links a { color: rgba(255, 255, 255, 0.6); }
.site-footer__legal-links a:hover { color: #fff; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1100px) {
  .numbered { grid-template-columns: 1fr; gap: 40px; }
  .numbered__media { min-height: 380px; }
  .numbered__panel { padding-top: 0; }
  .numbered__items { width: auto; margin: 44px 0 0; }
}

@media (max-width: 1024px) {
  :root { --section-y: 72px; }

  .section__head--split,
  .timeline__head { grid-template-columns: 1fr; gap: 24px; }
  .timeline__years { justify-content: flex-start; padding-top: 0; }
  .milestone { min-height: 0; padding: 40px 32px; }
  .milestone__ghost { font-size: 8rem; right: 20px; }

  .card-grid__items,
  .features__items,
  .block-ref__content .views-element-container > div { grid-template-columns: repeat(2, 1fr); gap: 24px; }

  .spotlight { grid-template-columns: 1fr; }
  .spotlight__feature .card { min-height: 480px; }
  .spotlight .card__body { padding: 28px; }

  /* Stacked on tablets and phones, so the widening hover has nothing to do. */
  .media-band--feature .media-band__items { flex-direction: column; }
  .media-band--feature .media-band__item,
  .media-band--feature .media-band__items .media-band__item:hover { flex: none; }
  .media-band--feature .media-tile__media,
  .media-band--feature.media-band--single .media-tile__media { height: auto; aspect-ratio: 16 / 9; }

  .site-footer__inner { grid-template-columns: 1fr; }
  .site-footer__menu-col { padding-top: 0; }
  .site-header__nav ul { justify-content: flex-start; gap: 12px 24px; }
}

/* =========================================================================
   Mobile header: the primary menu collapses behind a hamburger
   ========================================================================= */
@media (max-width: 900px) {
  .site-header__burger { display: inline-flex; }

  .site-header__top-inner {
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    padding-block: 14px;
  }
  /* The utility link reappears inside the open panel. */
  .site-header__global { display: none; }
  .site-header__brand { justify-self: center; }
  .site-header__logo { width: 120px; }
  .site-header__country { text-align: center; }
  .site-header__actions { gap: 12px; }
  .site-header__actions .btn { padding: 8px 14px; font-size: 0.8rem; }

  .site-header__nav {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    max-height: calc(100svh - 100%);
    overflow-y: auto;
    background: var(--syn-green-800);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.25);
  }
  .is-nav-open .site-header__nav { display: block; }
  .site-header__nav > .container > * { border-top: 0; }
  .site-header__nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 0 12px;
  }
  .site-header__nav li { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
  .site-header__nav a,
  .site-header__nav li > span { display: block; padding: 15px 4px; font-size: 1rem; }
  /* In the panel a submenu is always open, indented under its parent. */
  .site-header__nav ul ul {
    position: static;
    display: flex;
    min-width: 0;
    padding: 0 0 8px 16px;
    border: 0;
    box-shadow: none;
    background: none;
  }
  .site-header__nav ul ul li { border-bottom: 0; }
  .site-header__nav ul ul a { padding: 10px 4px; font-size: 0.94rem; opacity: 0.85; }
  /* Beats the block rule the panel applies to its links. */
  .site-header__nav a.site-header__global--in-panel {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0;
    margin: 18px 4px 22px;
  }

  /* Without the nav row the header is shorter, so the hero can start higher. */
  .hero { padding-block: 150px 80px; }
  .hero--center { padding-block: 140px 70px; }
}

@media (max-width: 720px) {
  :root { --gutter: 16px; --section-y: 56px; --r-band: 24px; }

  .hero { min-height: 0; padding-block: 130px 64px; }
  .hero__actions { margin-top: 32px; }
  .hero__actions a { min-height: 48px; padding: 12px 20px; }

  .section__head { flex-direction: column; align-items: flex-start; margin-bottom: 36px; }
  .section__head--centered { align-items: center; }

  .card-grid__items,
  .features__items,
  .numbered__items,
  .block-ref__content .views-element-container > div { grid-template-columns: 1fr; }

  .card-grid__items .card__media { aspect-ratio: 4 / 3; }
  .spotlight .card__title { font-size: 1.5rem; }
  .numbered__media { min-height: 260px; }

  .media-band__head { flex-direction: column; align-items: flex-start; margin-bottom: 36px; }

  .site-footer__menu-col ul { grid-template-columns: 1fr 1fr; }
  .site-footer__legal { flex-direction: column; align-items: flex-start; }

  /* The hover panel's outset padding would push these past the 16px gutter,
     and there is no hover on a phone anyway. */
  .features--media .feature { margin: 0; padding: 0; border-top: 0; }

  /* The newsletter pill has a fixed-width button; let it shrink so the whole
     field stays inside the gutter on phones. */
  .newsletter { max-width: 100%; }
  .newsletter__submit { width: auto; padding: 12px 20px; }
  .newsletter__input { padding: 10px 14px; }
}

/* =========================================================================
   Good Growth Plan (Figma "Good Growth Plan — Nouvelle page", 1139:10325)
   ========================================================================= */
.editorial,
.chapter,
.contact-band {
  --ggp-ink: #17341f;
  --ggp-green: #007a33;
  --ggp-body: #53665a;
  --ggp-tint: #f4f8f5;
  --ggp-line: #d9e6dd;
  --ggp-shadow: 0 18px 20px rgba(18, 53, 31, 0.1);
}

/* Hero: the photo tinted green, a lighter green wash over its lower half. */
.hero--green { min-height: 720px; }
.hero--green .hero__scrim {
  background:
    linear-gradient(180deg, transparent 0%, rgba(11, 111, 56, 0.18) 50%),
    rgba(16, 45, 27, 0.7);
}
.hero--green .hero__inner { max-width: 1048px; }
.hero--green .hero__title {
  margin-bottom: 20px;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  font-weight: 600;
  line-height: 1.18;
}
.hero--green .hero__subtitle {
  max-width: 892px;
  font-size: 1.1875rem;
  line-height: 30px;
  color: rgba(255, 255, 255, 0.92);
}

/* Editorial intro: text on the left, campaign visual on the right. */
.editorial { padding-block: 64px 66px; background: #fff; }
.editorial__inner {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 600px);
  justify-content: space-between;
  gap: 48px;
  align-items: start;
}
.editorial__text { padding-top: 28px; }
.editorial__eyebrow,
.chapter__eyebrow {
  margin: 0 0 16px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 18px;
  text-transform: uppercase;
  color: var(--ggp-green);
}
.editorial__title {
  margin: 0 0 27px;
  font-size: clamp(1.875rem, 3.2vw, 2.625rem);
  font-weight: 600;
  line-height: 1.24;
  color: var(--ggp-ink);
}
.editorial__lead {
  margin-bottom: 19px;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 29px;
  color: #33483a;
}
.editorial__body {
  font-size: 1rem;
  line-height: 26px;
  color: #607067;
}
.editorial__quote {
  position: relative;
  margin: 36px 0 0;
  min-height: 126px;
  padding: 26px 30px 26px 25px;
  border: 1px solid #d8e7dd;
  border-radius: var(--r-md);
  background: #f0f7f2;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 28px;
  color: var(--ggp-ink);
}
.editorial__quote::before {
  content: "";
  position: absolute;
  inset: -1px auto -1px -1px;
  width: 6px;
  border-radius: 6px;
  background: #00a33c;
}

.editorial__visual {
  position: relative;
  aspect-ratio: 600 / 610;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: var(--ggp-shadow);
  background: var(--syn-green-800);
}
.editorial__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.editorial__overlay {
  position: absolute;
  top: 82px;
  left: 0;
  right: 0;
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
}
/* Shade behind the banners and hashtag, fading to the right. */
.editorial__overlay::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  width: 86.7%;
  height: 255px;
  background: linear-gradient(90deg, rgba(13, 46, 32, 0.28), rgba(13, 46, 32, 0));
}
.editorial__banner {
  position: relative;
  width: max-content;
  min-width: 360px;
  max-width: 100%;
  min-height: 68px;
  margin: 0;
  padding: 14px 48px 12px 22px;
  background: url("../images/campaign-banner-1.svg") 0 0 / 100% 100% no-repeat;
  font-size: 1.375rem;
  line-height: 28px;
}
.editorial__banner + .editorial__banner {
  min-width: 500px;
  min-height: 74px;
  margin-top: -8px;
  padding-top: 16px;
  background-image: url("../images/campaign-banner-2.svg");
  font-size: 1.25rem;
  line-height: 27px;
}
.editorial__hashtag {
  position: relative;
  margin: 20px 0 0 94px;
  font-size: 1.75rem;
  line-height: 34px;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.28);
}

/* Numbered section: "01" beside the heading, blocks underneath. */
.chapter { padding-block: 100px 70px; background: #fff; }
.chapter--light { background: var(--ggp-tint); }
.chapter--has-aside { padding-bottom: 86px; }
.chapter__top {
  display: grid;
  grid-template-columns: 130px minmax(0, 920px);
  align-items: start;
}
.chapter--has-aside .chapter__top {
  grid-template-columns: 130px minmax(0, 650px) minmax(0, 350px);
  justify-content: space-between;
}
.chapter__number {
  margin: -6px 0 0;
  font-family: var(--font-heading);
  font-size: 2.875rem;
  font-weight: 600;
  line-height: 55px;
  color: #d5e5da;
}
.chapter--light .chapter__number { color: #c8ddd0; }
.chapter__title {
  max-width: 780px;
  margin: 0 0 30px;
  font-size: clamp(1.875rem, 3.2vw, 2.625rem);
  font-weight: 600;
  line-height: 1.26;
  color: var(--ggp-ink);
}
.chapter--has-aside .chapter__title { margin-bottom: 22px; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.25; }
.chapter__intro {
  font-size: 1rem;
  line-height: 27px;
  color: var(--ggp-body);
}
.chapter--has-aside .chapter__intro { font-size: 1.0625rem; line-height: 29px; }
.chapter__aside { margin-top: -16px; }

.chapter__stats,
.chapter__panel { max-width: 1140px; }
.chapter__top + * { margin-top: 46px; }
.chapter__stats + .chapter__panel { margin-top: 52px; }
.chapter__panel + .chapter__panel { margin-top: 28px; }
.chapter__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.chapter__stats + .chapter__stats { margin-top: 20px; }

/* Key figure card. */
.metric {
  --metric-accent: #00a33c;
  position: relative;
  min-height: 184px;
  padding: 27px 23px 24px;
  border: 1px solid var(--ggp-line);
  border-radius: 18px;
  background: #fff;
}
.metric::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 5px;
  border-radius: 18px;
  background: var(--metric-accent);
}
.metric--amber { --metric-accent: #f49a00; }
.metric--orange { --metric-accent: #e78c22; }
.metric--blue { --metric-accent: #4d87c8; }
.metric--teal { --metric-accent: var(--syn-teal-ink); }
.metric--brick { --metric-accent: var(--syn-brick); }
.metric__value {
  margin: 0 0 10px;
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 600;
  line-height: 40px;
  color: var(--ggp-ink);
}
.metric__label {
  margin: 0 0 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 22px;
  color: #314a3a;
}
.metric__text {
  font-size: 0.8125rem;
  line-height: 20px;
  color: #718078;
}

/* Highlight panels. */
.panel__eyebrow,
.panel__tag-label {
  margin: 0;
  font-weight: 700;
  text-transform: uppercase;
}
.panel__eyebrow { font-size: 0.6875rem; line-height: 17px; }
.panel__tag-label { font-size: 0.625rem; line-height: 15px; }
.panel__title { margin: 0; font-weight: 600; }
.panel__number,
.panel__tag-text {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
}

/* Dark card beside the section text. */
.panel--aside {
  display: flex;
  flex-direction: column;
  min-height: 520px;
  padding: 34px 30px 38px;
  border-radius: 22px;
  background: var(--ggp-ink);
  box-shadow: var(--ggp-shadow);
  color: #dce7e0;
}
.panel--aside .panel__eyebrow { margin-bottom: 25px; color: #f49a00; }
.panel--aside .panel__title { margin-bottom: 2px; font-size: 1.75rem; line-height: 38px; color: #fff; }
.panel--aside .panel__text { font-size: 0.9375rem; line-height: 25px; }
.panel--aside .panel__tag {
  margin-top: 38px;
  padding-top: 29px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.panel--aside .panel__tag-label { margin-bottom: 17px; color: #9ed7ae; }
.panel--aside .panel__tag-text { font-size: 1.25rem; line-height: 30px; color: #fff; }

/* Dark band: key figure, a divider, then the text. */
.panel--band-dark {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  min-height: 220px;
  padding: 34px 34px 38px;
  border-radius: 22px;
  background: var(--ggp-ink);
  color: #d7e5db;
}
.panel--band-dark .panel__number { font-size: 3.125rem; line-height: 58px; color: #fff; }
.panel--band-dark .panel__caption {
  margin: 4px 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 21px;
  color: #bfd5c5;
}
.panel--band-dark .panel__body {
  min-height: 148px;
  padding-left: 43px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.panel--band-dark .panel__eyebrow { margin-bottom: 12px; color: #9ed7ae; }
.panel--band-dark .panel__title { margin-bottom: 18px; font-size: 1.5rem; line-height: 32px; color: #fff; }
.panel--band-dark .panel__text { max-width: 720px; font-size: 0.9375rem; line-height: 25px; }
.panel--band-dark .panel__tag { grid-column: 2; padding-left: 43px; }

/* Light band: text on the left, the tag boxed on the right. */
.panel--band-light {
  display: grid;
  grid-template-columns: minmax(0, 820px) 190px;
  justify-content: space-between;
  align-items: start;
  gap: 32px;
  min-height: 234px;
  padding: 29px 50px 29px 31px;
  border: 1px solid #dde9e1;
  border-radius: var(--r-lg);
  background: #f2f7f3;
}
.panel--band-light .panel__figure { display: none; }
.panel--band-light .panel__eyebrow { margin-bottom: 15px; color: var(--ggp-green); }
.panel--band-light .panel__title { margin-bottom: 16px; font-size: 1.5rem; line-height: 32px; color: var(--ggp-ink); }
.panel--band-light .panel__text { font-size: 0.875rem; line-height: 23px; color: #5d6f64; }
.panel--band-light .panel__tag {
  margin-top: 32px;
  min-height: 86px;
  padding: 16px 17px;
  border: 1px solid #d3e3d8;
  border-radius: 14px;
  background: #fff;
}
.panel--band-light .panel__tag-label { margin-bottom: 11px; color: #f49a00; }
.panel--band-light .panel__tag-text {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 21px;
  color: var(--ggp-ink);
}

/* Contact band: the contact cards in a row. */
.contact-band {
  --contact-ink: var(--ggp-ink);
  padding-block: 101px 150px;
  background: var(--ggp-tint);
}
.contact-band .contact__eyebrow { margin-bottom: 16px; color: var(--ggp-green); }
.contact-band__title {
  margin: 0 0 8px;
  font-size: clamp(1.75rem, 3vw, 2.125rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ggp-ink);
}
.contact-band__intro { font-size: 0.9375rem; line-height: 23px; color: #607067; }
.contact-band__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 26px;
  margin-top: 50px;
}
.contact-band__cards > li { min-width: 0; }
.contact-band .contact__card { height: 100%; }

@media (max-width: 1024px) {
  .editorial__text { padding-top: 0; }
  .editorial__visual { width: 100%; max-width: 600px; }

  .chapter--has-aside .chapter__top { grid-template-columns: 60px minmax(0, 100%) minmax(0, 350px); gap: 25px; }
  .chapter__top { grid-template-columns: 60px minmax(0, 100%); gap: 25px; }
  .chapter__aside { max-width: 560px; margin-top: 40px; }
  .panel--aside { min-height: 0; }
  .panel--band-light { /*grid-template-columns: minmax(0, 1fr); gap: 20px;*/ padding-right: 31px; min-height: 100%; }
  .panel--band-light .panel__tag { margin-top: 0; justify-self: start; min-width: 190px; }
  .contact-band__cards { justify-content: center; }
}


@media (max-width: 870px) {
    .chapter--has-aside .chapter__top { grid-template-columns: 60px minmax(0, 1fr); }
    .chapter__aside { grid-column: 1 / -1; max-width: initial; }
    .chapter__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }



}

@media (max-width: 720px) {
  .editorial { padding-block: 48px; }
  /* .editorial__inner { grid-template-columns: minmax(0, 1fr); } */
  .editorial__overlay { top: 40px; }
  .editorial__overlay::before { top: -12px; height: 190px; }
  .editorial__banner,
  .editorial__banner + .editorial__banner {
    min-width: 0;
    min-height: 0;
    padding: 10px 36px 10px 16px;
    font-size: 1rem;
    line-height: 22px;
  }
  .editorial__banner + .editorial__banner { margin-top: -6px; padding-top: 12px; }
  .editorial__hashtag { margin: 14px 0 0 16px; font-size: 1.375rem; line-height: 28px; }

  .chapter { padding-block: 56px; }
  .chapter__top,
  .chapter--has-aside .chapter__top { grid-template-columns: minmax(0, 1fr); }
  .chapter__number { margin: 0 0 8px; font-size: 2.25rem; line-height: 44px; }
  .chapter__aside { margin-top: 32px; }
  .chapter__top + * { margin-top: 32px; }
  .chapter__stats + .chapter__panel { margin-top: 32px; }
  /* .chapter__stats { grid-template-columns: minmax(0, 1fr); gap: 16px; } */
  .metric { min-height: 0; }

  .panel--aside,
  .panel--band-dark,
  .panel--band-light { padding: 28px 22px; }
  .panel--band-dark { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .panel--band-dark .panel__body { min-height: 0; padding: 20px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
  .panel--band-dark .panel__tag { grid-column: auto; padding-left: 0; }

  .contact-band { padding-block: 56px 72px; }
  /* .contact-band__cards { flex-direction: column; margin-top: 32px; } */
}

@media (max-width: 690px) {
  .editorial__inner { grid-template-columns: minmax(0, 1fr); }
  .editorial__visual { margin-inline: auto; }
  /* .chapter__stats { grid-template-columns: minmax(0, 1fr); gap: 16px; } */
  .contact-band__cards { flex-direction: column; margin-top: 32px; }
  .panel--band-light { grid-template-columns: minmax(0, 1fr); gap: 20px; }

}


@media (max-width: 690px) {
  
}