/* =========================================================================
   Feature lists, "indicators" and "tools" layouts (Figma "Outil — Météo")
   ========================================================================= */
/* 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); }
/* Two indicators (MixSyn "Ce qu'il faut savoir", Figma 1139:9303): two wide
   cards, the effects sought on pale green with a green dot, the risks on
   white with a red dot; the list's items spaced out with bullets. */
.features--indicators .features__items:has(> * > :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.features--indicators .features__items:has(> * > :nth-child(2):last-child) .feature { padding: 32px 30px 36px; }
.features--indicators .features__items:has(> * > :nth-child(2):last-child) > * > :nth-child(1) .feature { background: #eef7f0; }
.features--indicators .features__items:has(> * > :nth-child(2):last-child) > * > :nth-child(1) .feature__badge { background: #16a34a; }
.features--indicators .features__items:has(> * > :nth-child(2):last-child) > * > :nth-child(2) .feature__badge { background: #dc2626; }
.features--indicators .feature__text ul { display: flex; flex-direction: column; gap: 16px; margin: 18px 0 0; padding: 0; list-style: none; }
.features--indicators .feature__text li { position: relative; padding-inline-start: 16px; }
.features--indicators .feature__text li::before { content: ""; position: absolute; top: 0.65em; inset-inline-start: 0; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.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); }
/* Positioned, so the photo (pinned with position: absolute) stays in its
   frame instead of covering the whole card. */
.features--tools .feature__media { position: relative; flex: none; 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) {
  /* The card rows stay side by side, tighter. */
  .features--indicators .features__items { gap: 16px; }
  .features--indicators .feature { padding: 22px; }
  .features--tools .features__items { gap: 16px; }
  .features--tools .feature { padding-inline: 16px; }
  .features--tools .feature__media { height: 160px; }
}
@media (max-width: 720px) {
  .features--indicators,
.features--tools { padding-block: 56px 64px; }
  /* Phones: the indicator cards go two by two, centred heading kept. */
  .features--indicators .features__items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .features--indicators .section__head,
.features--guide .section__head { align-items: center; }
  /* The tool cards become swipeable, each card snapping into place with the
     next one peeking in. */
  .features--tools .features__items {
    display: flex;
    gap: 14px;
    margin: -8px calc(-1 * var(--gutter)) 0;
    padding: 8px var(--gutter) 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .features--tools .features__items::-webkit-scrollbar { display: none; }
  /* Two cards in view, the third peeking in; one on the smallest screens. */
  .features--tools .features__items > * > * { flex: 0 0 calc((100% - 28px) / 2.15); scroll-snap-align: start; }
  .features--tools .feature:hover,
.features--tools .feature:focus-within { transform: none; }
  .features--tools .feature__media { height: 180px; }
}
@media (max-width: 480px) {
  .features--indicators .features__items { grid-template-columns: minmax(0, 1fr); }
  .features--tools .features__items > * > * { flex-basis: 82%; }
}
.features--indicators .section__intro { max-width: 1000px; margin-inline: auto; }

/* MixSyn "Ce qu'il faut savoir" (two indicators), closer to Figma 1139:9303:
   on white, a small Poppins eyebrow, 30px between the heading lines, and
   larger card titles and list items. */
.features--indicators:has(.features__items > * > :nth-child(2):last-child) { padding-block: 92px 96px; background: #fff; }
.features--indicators:has(.features__items > * > :nth-child(2):last-child) .section__head { margin-bottom: 30px; }
.features--indicators:has(.features__items > * > :nth-child(2):last-child) .eyebrow {
  margin-bottom: 30px;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0;
  color: #eb8200;
}
.features--indicators:has(.features__items > * > :nth-child(2):last-child) .section__title { margin-bottom: 30px; line-height: 48px; }
.features--indicators:has(.features__items > * > :nth-child(2):last-child) .section__intro { max-width: 980px; font-size: 1.0625rem; line-height: 28px; color: #636e78; }
.features--indicators .features__items:has(> * > :nth-child(2):last-child) .feature { gap: 16px; padding: 28px; }
.features--indicators .features__items:has(> * > :nth-child(2):last-child) > * > :nth-child(1) .feature { background: #f6fbf7; }
.features--indicators .features__items:has(> * > :nth-child(2):last-child) .feature__badge { width: 26px; height: 26px; }
.features--indicators .features__items:has(> * > :nth-child(2):last-child) > * > :nth-child(1) .feature__badge { background: #298a45; }
.features--indicators .features__items:has(> * > :nth-child(2):last-child) > * > :nth-child(2) .feature__badge { background: #c73326; }
.features--indicators .features__items:has(> * > :nth-child(2):last-child) .feature__title { margin: 0; font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 32px; }
.features--indicators .features__items:has(> * > :nth-child(2):last-child) .feature__text { font-size: 0.9375rem; line-height: 24px; }
/* Recette: more room under the card title and between the items. */
.features--indicators .features__items:has(> * > :nth-child(2):last-child) .feature__text ul { gap: 22px; margin-top: 24px; }
.features--indicators .features__items:has(> * > :nth-child(2):last-child) .feature__text li { padding-inline-start: 18px; }
.features--indicators .features__items:has(> * > :nth-child(2):last-child) .feature__text li::before { width: 4px; height: 4px; top: 10px; opacity: 1; }
@media (max-width: 480px) {
  /* The two MixSyn cards one under the other. */
  .features--indicators .features__items:has(> * > :nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .features--indicators .features__items:has(> * > :nth-child(2):last-child) .feature { padding: 24px 22px; }
}