/* =========================================================================
   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);
}
/* Recette: the links line up along the bottom of the row. */
.features--cards .feature__body { display: flex; flex: 1; flex-direction: column; }
.features--cards .feature__link { align-self: flex-start; margin-top: auto; padding-top: 28px; }
.features--media .feature:hover,
.features--media .feature:focus-within,
.features--cards .feature:hover,
.features--cards .feature:focus-within,
.features--media .feature.is-inview {
  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;
  /* The design's 110px corners on a 343 x 256 photo, kept in proportion so
     narrower photos (medium screens) keep the same leaf. */
  border-radius: 0 32% 0 32% / 0 43% 0 43%;
  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,
.features--media .feature.is-inview .feature__media { border-radius: 16px; }

.features--media .feature__body { padding-top: 28px; }

/* Figma Component 60: Poppins SemiBold title, light warm-grey text, and the
   links lined up along the foot of the row whatever the text length. */
.features--media .features__items > * > * { display: flex; }
.features--media .feature { display: flex; flex: 1; flex-direction: column; }
.features--media .feature__body { display: flex; flex: 1; flex-direction: column; }
.features--media .feature__title {
  margin-bottom: 12px;
  color: #2b3024;
  font-size: 1.39rem;
  font-weight: 600;
  line-height: 1.364;
}
.features--media .feature__text {
  margin-bottom: 24px;
  color: #8c7a6b;
  font-size: 0.884rem;
  font-weight: 300;
  line-height: 1.5;
}
.features--media .feature__link {
  margin-top: auto;
  font-size: 0.884rem;
  color: #276f7c;
}
.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,
.features--media .feature.is-inview .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,
.features--media .feature.is-inview .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,
.features--media .feature.is-inview .card__arrow::after { background-color: #fff; }

/* The first photo card rests in its hover look until the pointer (or a tap)
   moves onto the row (Figma 1139:4815 shows card 1 "on"), at every width:
   the others light up on hover or tap only, never all at once. */
.features--media .features__items:not(:hover) > * > :first-child .feature {
  border-top-color: var(--syn-green-500);
  background: #fff;
  box-shadow: 0 18px 40px rgba(17, 24, 39, 0.1);
}
.features--media .features__items:not(:hover) > * > :first-child .feature__media { border-radius: 16px; }
.features--media .features__items:not(:hover) > * > :first-child .feature__link { color: #276f7c; }
.features--media .features__items:not(:hover) > * > :first-child .card__arrow { background-color: #276f7c; }
.features--media .features__items:not(:hover) > * > :first-child .card__arrow::after { background-color: #fff; }

/* More than three photo cards: three in view, the rest scroll sideways
   behind an arrow (Figma Component 72). The track's padding gives the hover
   panel room; the negative margin keeps the cards on the grid. */
.features__scroller { position: relative; }
.features__scroller .features__items {
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * 64px) / 3);
  margin: -20px;
  padding: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 20px;
  scrollbar-width: none;
}
.features__scroller .features__items::-webkit-scrollbar { display: none; }
.features__scroller .feature { scroll-snap-align: start; }
.features__prev,
.features__next {
  position: absolute;
  top: 226px;
  inset-inline-end: -40px;
  width: 28px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.features__prev { inset-inline-end: auto; inset-inline-start: -40px; }
.features__prev[hidden],
.features__next[hidden] { display: none; }
/* The Figma chevron points left; it is mirrored on the next arrow. */
.features__prev::after,
.features__next::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../../images/icon-chevron-green.svg") center / 14px 25px no-repeat;
  transform: scaleX(-1);
  transition: transform 0.2s ease;
}
.features__prev::after { transform: none; }
.features__next:hover::after { transform: scaleX(-1) translateX(-3px); }
.features__prev:hover::after { transform: translateX(-3px); }
.features__prev:focus-visible,
.features__next:focus-visible { outline: 2px solid var(--syn-green-500); outline-offset: 2px; }
/* Without room beside the row, the arrow sits on the peeking card in a disc. */
@media (max-width: 1280px) {
  .features__prev,
  .features__next {
    inset-inline-end: 8px;
    width: 44px;
    height: 44px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(17, 24, 39, 0.18);
  }
  .features__prev { inset-inline-end: auto; inset-inline-start: 8px; }
  .features__prev::after,
  .features__next::after { background-size: 10px 18px; }
}
@media (max-width: 1024px) {
  .features__scroller .features__items { grid-template-columns: none; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px; }
}
@media (max-width: 720px) {
  /* Room above and below the cards, so the active card's shadow is not cut
     off by the scrolling row. */
  .features__scroller .features__items {
    /* Recette: two cards in view. */
    grid-auto-columns: calc((100% - 12px) / 2);
    grid-template-columns: none;
    gap: 12px;
    margin: -16px 0 -32px;
    padding: 16px 0 48px;
    scroll-padding-inline: 0;
  }
  /* Recette: the arrows stay on phones, centred on the photo. The
     scroller is a size container, so the photo height follows its width:
     card padding 16px, photo ratio 343 / 256. */
  .features__scroller { container-type: inline-size; }
  .features__prev,
  .features__next { top: calc(16px + ((100cqw - 12px) / 2 - 32px) * 0.3732 - 22px); }
  /* A gentler leaf on the smaller photos. */
  .features--media .feature__media { border-radius: 0 64px 0 64px; }
}
@media (max-width: 480px) {
  /* Recette (Mobile L and below): one card in view. */
  .features__scroller .features__items { grid-auto-columns: 100%; }
  .features__prev,
  .features__next { top: calc(16px + (100cqw - 32px) * 0.3732 - 22px); }
}

@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; inset-inline-start: 0; inset-inline-end: 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,
.features--icons .feature.is-inview { box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); }
.features--icons .feature:hover::before,
.features--icons .feature:focus-within::before,
.features--icons .feature.is-inview::before { opacity: 1; }
.features--icons .feature:hover .feature__title,
.features--icons .feature:focus-within .feature__title,
.features--icons .feature.is-inview .feature__title { color: var(--syn-green-leaf); }
.features--icons .feature:hover .feature__media,
.features--icons .feature:focus-within .feature__media,
.features--icons .feature.is-inview .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,
  .features--icons .feature__media,
  .features--icons .feature__link .card__arrow { 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); }
/* The body fills the card so every link sits on the same bottom line,
   whatever the text length. */
.features--icons .feature__body { display: flex; flex: 1; flex-direction: column; align-items: center; width: 100%; }
.features--icons .feature__link { margin-top: auto; padding-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;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
/* The arrow glides on when the card is hovered (transform animates; the old
   right offset jumped from auto). */
.features--icons .feature:hover .feature__link .card__arrow,
.features--icons .feature:focus-within .feature__link .card__arrow { transform: translateX(8px); }
.features--icons .feature__link .card__arrow::after { content: none; }