/* =========================================================================
   Composant Pré-footer Clapasson & Fils
   Variantes Figma : home (4013:758) + engagement (4019:1572)
   Layout 2 colonnes : image gauche (parallélogramme) + contenu droit.
   La partie basse de l'image passe sous la barre de footer (`<footer.cf-footer>`)
   via un margin-bottom négatif (Figma : `mb=-327` sur 1512 → 21.6%).
   ========================================================================= */

.cf-prefooter {
  /* Le bloc tire le footer (.cf-footer) vers le haut pour passer dessous. */
  margin-bottom: var(--cf-prefooter-overlap, -21.6vw);
  position: relative;
  background: var(--color-white, #fff);
  padding-block: var(--section-py); /* 80 → 60 → 40 px */
  /* Hauteur visuelle min cohérente avec Figma (1512 × 838 → ratio constant) */
}

.cf-prefooter__inner {
  margin-inline: auto;
  padding-inline: var(--page-px);
  display: grid;
  grid-template-columns: minmax(0, 784fr) minmax(0, 528fr);
  align-items: flex-start;
  gap: 80px; /* Figma : gap 80 entre les 2 colonnes (Frame 232) */
}

/* ---- Colonne gauche : titre optionnel + image parallélogramme --------- */
.cf-prefooter__left {
  display: flex;
  flex-direction: column;
  gap: 60px; /* Figma Frame 51 gap-60 entre heading et image */
  justify-content: flex-end;
  align-self: end;
}

.cf-prefooter__left-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4); /* 40 → 32 → 32 */
  max-width: 590px; /* Figma Frame 49 width */
}

/* Image (parallélogramme tilté, path Figma 4013:273) */
.cf-prefooter__media {
  margin: 0;
  width: 100%;
}
.cf-prefooter__image {
  display: block;
  width: 100%;
  height: auto;
  /* Path Figma : M0.066 0 L784 0 L784 559.021 L0 368.571 Z
     → (0,0) (100%,0) (100%,100%) (0,65.8%) */
  aspect-ratio: 784 / 559;
  object-fit: cover;
}

/* ---- Colonne droite -------------------------------------------------- */
.cf-prefooter__right {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4); /* 40 desktop → 32 → 32 (Figma Frame 233 gap-40) */
  justify-content: flex-start;
}

/* ---- Titres --------------------------------------------------------- */
.cf-prefooter__title {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-secondary, #1d1d1b);
}

/* Titre gauche : Figma 44/54/regular, amorce en black 900 primary-dark. */
.cf-prefooter__title--left {
  font-size: 44px;
  line-height: 54px;
  font-weight: var(--fw-regular);
}
.cf-prefooter__title-accent {
  font-weight: var(--fw-bold);
  color: var(--color-primary-dark, #8f940c);
}

/* Titre droit — taille variant-specific. */
.cf-prefooter__title--right {
  font-weight: var(--fw-regular);
}
/* Home (4013:234) : 32/normal regular + segment bold 700. */
.cf-prefooter--home .cf-prefooter__title--right {
  font-size: 32px;
  line-height: 1.25;
}
/* Engagement (4019:1668) : H2 44/54 + segment accent Black 900 + primary-dark. */
.cf-prefooter--engagement .cf-prefooter__title--right {
  font-size: var(--fs-h2); /* 44 → 32 → 24 */
  line-height: var(--lh-h2); /* 54 → 42 → 34 */
}
.cf-prefooter__title-bold {
  font-weight: var(--fw-bold);
}
/* `.cf-prefooter__title-accent` est défini plus haut (segment Poppins Black 900
   + primary-dark vert) — partagé entre le titre gauche (variante home) et le
   segment accent du titre droit (variante engagement, Figma 4019:1668). */

/* ---- Triangle accent vert sage (asset triangle-tertiary.svg) --------- */
.cf-prefooter__triangle {
  display: block;
  width: 135px;
  height: 35px;
}

/* ---- Puces (variante home) ------------------------------------------ */
.cf-prefooter__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3); /* 20 px entre puces */
}
.cf-prefooter__bullet {
  display: flex;
  align-items: center;
  gap: var(--sp-3); /* 20 px Figma Frame 47 gap-20 */
}
.cf-prefooter__bullet-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
}
.cf-prefooter__bullet-text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.25;
  font-weight: var(--fw-medium);
  color: var(--color-secondary, #1d1d1b);
}
.cf-prefooter__bullet-strong {
  font-weight: var(--fw-bold);
}

/* ---- Intro + CTA ---------------------------------------------------- */
/* Conteneur multi-paragraphes — chaque <p> empilé verticalement avec gap.
   Variante engagement (Figma 4019:1810, 4019:2378…) : style paragraphe
   16/24 regular. Variante home (Figma 4013:248) : style "p big" 32/regular. */
.cf-prefooter__intro {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3); /* 20 desktop, gap entre paragraphes (Figma) */
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  color: var(--color-secondary, #1d1d1b);
}
.cf-prefooter--home .cf-prefooter__intro {
  font-size: 32px;
  line-height: 1.25;
  gap: var(--sp-4); /* 40 — on garde l'aération large pour le format "p big" */
}
.cf-prefooter--engagement .cf-prefooter__intro {
  font-size: var(--fs-body);  /* 16 */
  line-height: var(--lh-body); /* 24 */
}
.cf-prefooter__intro-paragraph {
  margin: 0;
}
.cf-prefooter__intro-bold,
.cf-prefooter__intro-paragraph strong {
  font-weight: var(--fw-bold);
}

.cf-prefooter__cta {
  /* CTA aligné à droite dans le canvas Figma (button.x=353 → fin de col).
     Sur mobile/tablet on bascule à gauche pour rester lisible. */
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 1536px) {
  .cf-prefooter {
    margin-bottom: var(--cf-prefooter-overlap, -33.6vw);
  }
}
@media (max-width: 1280px) {
  .cf-prefooter {
    margin-bottom: var(--cf-prefooter-overlap, -43.6vw);
  }
}

/* ---- Responsive ≤ 1024px : empile les 2 colonnes -------------------- */
@media (max-width: 1024px) {
  .cf-prefooter__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-5); /* 40 ≤1024 (cf. basic_style.css) */
  }
  .cf-prefooter__title--left {
    font-size: 32px;
    line-height: 42px;
  }
  .cf-prefooter__title--right,
  .cf-prefooter__intro {
    font-size: 24px;
    line-height: 1.3;
  }
  .cf-prefooter__right {
    grid-row-start: 1;
  }
  .cf-prefooter__bullet-text {
    font-size: 18px;
  }
  .cf-prefooter__cta {
    justify-content: flex-start;
  }
}

/* ---- Responsive ≤ 640px : taille mobile + chevauchement réduit ------ */
@media (max-width: 640px) {
  .cf-prefooter {
    /* Overlap proportionnel mais moins agressif (image plus petite, le
       footer mobile occupe relativement plus de hauteur). */
    margin-bottom: var(--cf-prefooter-overlap-mobile, -56vw);
  }
  .cf-prefooter__title--left {
    font-size: 24px;
    line-height: 34px;
  }
  .cf-prefooter__title--right,
  .cf-prefooter__intro {
    font-size: 20px;
  }
  .cf-prefooter__bullet-text {
    font-size: 16px;
  }
  .cf-prefooter__bullet-icon {
    width: 40px;
    height: 40px;
  }
}