/* =========================================================================
   Accueil — section "Présentation aspiratrice-excavatrice" (Figma 4001:2096).
   Fond noir avec coupe diagonale en haut, chevauche la section exclusif
   précédente. Diagonale dérivée du path SVG 4001:2085 :
     M0 518.7 L1858.65 0 L2168 1136.43 L144.288 1136.23 Z
   Section frame x=-307, width=2126 dans Figma → le vector déborde à droite.
   Dans le viewport (1512 wide), la diagonale apparaît :
     - bord gauche viewport : y ≈ 433 (28.6vw)
     - bord droit viewport  : y ≈ 11  (0.7vw)
   Pente constante : on conserve l'angle via unités vw.
   Chevauchement Figma : 270px sur 1512 = 17.86vw → margin-top négatif.
   ========================================================================= */

.cf-presentation {
  position: relative;
  /* Tire la section sur celle d'avant pour reproduire le chevauchement. */
  display: flex;
  justify-content: center;
  margin-top: -10.86vw;
  background: var(--color-secondary, #1d1d1b);
  color: var(--color-white, #fff);
  /* Coupe diagonale en haut. Bord gauche : descend 28.6vw, bord droit : 0.7vw.
     Le triangle "transparent" (au-dessus de la coupe) laisse voir la section
     précédente (exclusif). */
  clip-path: polygon(0 28.6vw, 100% 0.7vw, 100% 100%, 0 100%);
  /* Padding-top : passé sous la diagonale au bord gauche (≈28.6vw) avec marge.
     Figma : contenu à section_y=490 sur section_width=1512 → 32.4vw. */
  padding-top: 32.4vw;
  padding-bottom: var(--section-py); /* 80 → 60 → 40 px aux 3 BP */
}

.cf-presentation__inner {
  /* Figma : contenu à viewport_x=391 sur 1512 → 25.86% du viewport.
     Max-width contenu = 850 / 1512 = 56.2vw. */
  padding-inline: var(--page-px);
  max-width: 850px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4); /* 40 → 32 → 32 px (Figma Frame 28 gap = 40) */
}

.cf-presentation__triangle {
  display: block;
  width: 135px;
  height: 35px;
}

.cf-presentation__title {
  margin: 0;
  font-family: var(--font-sans);
  /* Figma : 32px regular, line-height normal (~1.2 par défaut). */
  font-size: 32px;
  line-height: 1.25;
  font-weight: var(--fw-regular);
  color: var(--color-white, #fff);
}

.cf-presentation__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3); /* 20 px entre paragraphes (Figma : ligne vide ZWSP) */
  font-family: var(--font-sans);
  font-size: var(--fs-body); /* 16px */
  line-height: var(--lh-body); /* 24 */
  color: var(--color-white, #fff);
}
.cf-presentation__body p {
  margin: 0;
}
.cf-presentation__body strong {
  font-weight: var(--fw-bold);
}

.cf-presentation__cta {
  /* Le bouton ne s'étire pas — il prend sa taille naturelle au début. */
  align-self: flex-start;
}

/* ---- Responsive ≤ 1024px : centre le contenu, réduit l'offset ---------- */
@media (max-width: 1024px) {
  .cf-presentation {
    /* Diagonale en vw → angle préservé. Sur tablet (768) :
       28.6vw = 220px, 17.86vw chevauchement = 137px. Lisible. */
    padding-top: 34vw;
    padding-bottom: var(--section-py);
  }
  .cf-presentation__inner {
    margin-inline: auto;
    padding-inline: var(--page-px);
    max-width: 700px;
  }
  .cf-presentation__title {
    font-size: 24px;
  }
}

/* ---- Responsive ≤ 640px : titre plus petit, on garde la diagonale ----- */
@media (max-width: 640px) {
  .cf-presentation {
    /* Chevauchement moins agressif sur mobile (390px viewport) : la section
       exclusif y est empilée verticalement, on évite de masquer son contenu. */
    margin-top: -8vw;
    padding-top: 32vw;
  }
  .cf-presentation__title {
    font-size: 20px;
    line-height: 1.3;
  }
}