/* =========================================================================
   Accueil — section "Service exclusif : Location d'aspiratrice-excavatrice"
   (Figma 4001:2066). Fond blanc, illustration BD à gauche, callout
   parallélogramme jaune-vert à droite avec titre 2 poids.
   ========================================================================= */

.cf-exclusif {
  background: var(--color-white, #fff);
  display: flex;
  justify-content: center;
}

.cf-exclusif__inner {
  padding-inline: var(--page-px);
  display: flex;
  align-items: start;
  max-width: 1228px;
  gap: var(--sp-4); /* 40 → 32 → 32 px aux 3 BP */
}

/* ---- Colonne illustration (Figma : frame 560×700, image 440×500 centrée) */
.cf-exclusif__media {
  width: 50%;
  padding-top: 100px;
  margin: 0;
  flex: 0 1 560px;
  display: flex;
  justify-content: center;
}
.cf-exclusif__image {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
}

/* ---- Colonne callout (parallélogramme tilté) -------------------------- */
/* Vector Figma 4001:2063 — viewBox 669×407, fill #CCD310 (--color-primary).
   Path : M0 250.92 L558.542 406.794 L669 0 L60.86 0.06 Z
   → polygon clockwise from top-left :
     (60.86/669, 0.06/407) → (9.1%, 0)
     (669/669,   0/407)    → (100%, 0)
     (558.54/669, 406.79/407) → (83.5%, 100%)
     (0/669, 250.92/407)   → (0, 61.7%)                                    */
.cf-exclusif__callout {
  width: 50%;
  min-width: 668px;
  flex: 1 1 auto;
  position: relative;
  aspect-ratio: 669 / 407;
  background: var(--color-primary, #ccd310);
  clip-path: polygon(9.1% 0, 100% 0, 83.5% 100%, 0 61.7%);
  /* Padding interne calé sur la position du texte dans Figma :
     text x=95, y=60 dans un callout 668×407 → ~14.2% gauche / ~14.7% haut */
  padding: 60px 70px 180px 95px;
  display: flex;
  align-items: flex-start;
}

.cf-exclusif__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-h2); /* 44 → 32 → 24 aux 3 BP */
  line-height: var(--lh-h2); /* 54 → 42 → 34 */
  color: var(--color-secondary, #1d1d1b);
}

/* Figma styleOverrideTable :
   - "Service exclusif :" → Poppins Black 900
   - "Location d'aspiratrice-excavatrice" → Poppins Regular 400         */
.cf-exclusif__title-strong {
  font-weight: var(--fw-black);
  display: inline; /* le titre reste sur plusieurs lignes naturellement */
}
.cf-exclusif__title-light {
  font-weight: var(--fw-regular);
}

/* ---- Responsive ≤ 1024px : empilement vertical ----------------------- */
@media (max-width: 1024px) {
  .cf-exclusif__inner {
    flex-direction: column-reverse;
    gap: var(--sp-5); /* 40 ≤1024px (cf. basic_style.css cascade) */
  }
  .cf-exclusif__media {
    padding-top: 0;
    flex: 0 0 auto;
    max-width: 380px;
    margin: 0 auto;
  }
  .cf-exclusif__image {
    max-width: 100%;
  }
  .cf-exclusif__callout {
    flex: 0 0 auto;
    align-items: center;
    width: 100%;
    /* Aspect-ratio préservé : le callout grandit avec la largeur dispo. */
  }
}

/* ---- Responsive ≤ 640px : illustration plus petite, padding callout - */
@media (max-width: 640px) {
  .cf-exclusif__media {
    max-width: 260px;
    width: 100%;
  }
  .cf-exclusif__callout {
    /* Sur mobile le texte 24/34 tient en 2-3 lignes : on réduit
       légèrement le padding pour éviter que l'inset ne dévore tout. */
    padding: 12% 10% 31% 13%;
    align-items: flex-start;
    min-width: 0; /* pour éviter que le min-width de 668px ne force une largeur horizontale sur mobile */
  }
}