/* =========================================================================
   Accueil — section "Spécialiste des travaux publics" (Figma 4001:1997).
   Fond noir + 4 cards dark en grille 2×2.
   ========================================================================= */

.cf-services {
  background: var(--color-secondary, #1d1d1b);
  color: var(--color-white, #fff);
  padding-block: var(--section-py); /* 80 → 60 → 40 px aux 3 BP */
}

.cf-services__inner {
  padding-inline: var(--page-px);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6); /* 80 → 60 → 40 px (Figma Frame 35 gap=80) */
}

/* ---- Header (Frame 38 : heading 873 + icône 150 sur 1392, horizontal) --- */
.cf-services__header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* heading à gauche, icône poussée à droite */
  gap: var(--sp-5); /* 60 ≈ 58 Figma → scale 60/40/32 aux 3 BP */
}

.cf-services__heading {
  display: flex;
  max-width: 880px;
  flex-direction: column;
  gap: var(--sp-3); /* 20 — gap Figma intra-heading */
  flex: 0 1 auto; /* n'absorbe pas tout l'espace : laisse "space-between" écarter de l'icône */
  min-width: 0;
}

/* ---- Triangle accent (entre H2 et intro, Figma asset) ------------------- */
.cf-services__triangle {
  display: block;
  width: 135px;
  height: 35px;
  margin: 0;
}

.cf-services__title {
  margin: 0;
  font-family: var(--font-sans);
  /* Base black (900) — segments "réguliers" via .cf-services__title-light. */
  font-weight: var(--fw-black);
  font-size: var(--fs-h2); /* 44 → 32 → 24 aux 3 BP */
  line-height: var(--lh-h2);
  color: var(--color-white, #fff);
}
.cf-services__title-light {
  font-weight: var(--fw-regular);
}

.cf-services__intro {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-white, #fff);
}

.cf-services__icon {
  flex-shrink: 0;
  width: 150px;
  height: 150px;
  display: block;
}

/* ---- Grille des 4 cards (2×2) ----------------------------------------- */
/* column-gap horizontal 40 (Figma) ; row-gap vertical large 80 demandé. */
.cf-services__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: center;
  column-gap: var(--sp-4); /* 40 desktop → 32 sous 640px */
  row-gap: var(
    --sp-6
  ); /* 80 desktop → 60 ≤1024 → 40 ≤640 (cf. basic_style.css) */
}

/* ---- Responsive ≤ 1024px ----------------------------------------------- */
@media (max-width: 1024px) {
  .cf-services__header {
    /* Icône plus petite et reste à droite tant que ça rentre. */
    gap: var(--sp-4);
  }
  .cf-services__icon {
    width: 110px;
    height: 110px;
  }
  /* Cards : on garde 2 colonnes mais elles peuvent se serrer. */
}

/* ---- Responsive ≤ 640px : tout en 1 colonne ---------------------------- */
@media (max-width: 640px) {
  .cf-services__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }
  .cf-services__icon {
    width: 88px;
    height: 88px;
  }
  .cf-services__cards {
    grid-template-columns: 1fr;
  }
}