/* ==========================================================================
   Sections
   ========================================================================== */

.section {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(66px, 8vw, 124px) var(--gutter);
}

/* Deux sections voisines ne portent jamais le même fond, c'est la couleur qui les
   sépare et plus un filet. Fond pleine largeur, contenu toujours aligné sur la
   même colonne.

   L'alternance se compte depuis la fin : la dernière section reste ainsi
   toujours sur le papier, et le pied de page, teinté, s'en détache sans avoir
   besoin d'être bordé. Le compte porte sur les sections réellement rendues, un
   bloc vide ne décale donc rien. */
main > .section:nth-last-of-type(even) {
  --surface-hover: #d0e7dc;
  --tint: #d0e7dc;

  background: var(--green-soft);
  box-shadow: 0 0 0 100vmax var(--green-soft);
  clip-path: inset(0 -100vmax);
}

.section-tight {
  padding-top: clamp(44px, 5vw, 70px);
  padding-bottom: clamp(44px, 5vw, 70px);
}

.section-head {
  max-width: 68ch;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.section-head p {
  max-width: 56ch;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 1.04rem;
}

.section-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(28px, 3.4vw, 46px);
}

.split {
  display: grid;
  gap: clamp(30px, 5vw, 84px);
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.split-center {
  align-items: center;
}

.split .section-head {
  margin-bottom: 0;
}

.split .section-head .button {
  margin-top: 26px;
}

/* ==========================================================================
   Chiffres clés
   ========================================================================== */

/* Les chiffres clés tiennent par leur seule bande teintée, ils étaient pris
   entre un filet en haut, un filet en bas et la coupure de section. */
.figure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.figure {
  display: grid;
  gap: 8px;
  padding: 6px 26px 6px 0;
}

.figure-value {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  letter-spacing: -0.02em;
  line-height: 0.9;
  color: var(--green-dark);
}

.figure-label {
  max-width: 24ch;
  color: var(--muted);
  font-family: var(--font-label);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
}