/* =========================================================================
   Composant Feature — section 2 colonnes image + texte.
   Variantes "simples" (titre côté contenu, opposé à l'image) :
     - 4019:1085 (équipe) / 4019:1097 (ancrage)
     - 4019:1109 (moyens) / 4019:1962 (assainissement)
   Variantes "riches" (titre + intro AU-DESSUS de l'image, contenu côté opposé) :
     - 4019:1672 (spécialisation, light)
     - 4019:1992 (matériel de pointe, dark)
     - 4019:2497 (voirie, dark, icon-bullets grid)
     - 4019:2567 (moyens techniques, dark, image seul)
   Image clip-path (mirror selon le côté) issu des vectors Figma 4019:1095 / 4019:1098.
   Thèmes : 'light' (fond blanc) et 'dark' (fond noir).
   ========================================================================= */

.cf-feature {
  padding-block: var(--section-py); /* 80 → 60 → 40 */
}

/* Thèmes -------------------------------------------------------------- */
.cf-feature--theme-light {
  background: var(--color-white, #fff);
  color: var(--color-secondary, #1d1d1b);
}
.cf-feature--theme-dark {
  background: var(--color-secondary, #1d1d1b);
  color: var(--color-white, #fff);
}

/* Alignement vertical des 2 colonnes — pilotable via la variable
   `--feature-align`. Défaut par thème, override possible via classe
   `cf-feature--align-{start|end|stretch|center}` (cf. prop `inner_align`). */
.cf-feature {
  --feature-align: stretch; /* light : étire les 2 cols, image push en bas */
}
.cf-feature--theme-dark.cf-feature--image-column-has-head {
  --feature-align: start; /* dark + head : démarre en haut */
}
.cf-feature--theme-dark:not(.cf-feature--image-column-has-head) {
  --feature-align: end; /* dark sans head : aligne en bas (image isolée) */
}
/* Overrides explicites (priorité maximale via custom property). */
.cf-feature--align-start {
  --feature-align: start;
}
.cf-feature--align-end {
  --feature-align: end !important;
}
.cf-feature--align-stretch {
  --feature-align: stretch;
}
.cf-feature--align-center {
  --feature-align: center;
}

.cf-feature__inner {
  margin-inline: auto;
  padding-inline: var(--page-px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 80px;
  align-items: var(--feature-align);
}

/* Variante "flush bottom" — section sans padding-bottom (collée à la section
   suivante), mais la colonne contenu garde son padding via padding interne. */
.cf-feature--flush-bottom {
  padding-bottom: 0;
}
.cf-feature--flush-bottom .cf-feature__content-col {
  padding-bottom: var(--section-py);
}

/* ---- Image side -------------------------------------------------------- */
.cf-feature--image-right .cf-feature__image-col {
  grid-column: 2;
  grid-row: 1;
}
.cf-feature--image-right .cf-feature__content-col {
  grid-column: 1;
  grid-row: 1;
}
.cf-feature--image-left .cf-feature__image-col {
  grid-column: 1;
  grid-row: 1;
}
.cf-feature--image-left .cf-feature__content-col {
  grid-column: 2;
  grid-row: 1;
}

/* Variante sans image : contenu centré max-width 880 par défaut */
.cf-feature--image-none .cf-feature__inner {
  grid-template-columns: 1fr;
}
.cf-feature--image-none .cf-feature__content-col {
  max-width: 880px;
  margin: 0 auto;
}
/* Override : contenu full-width (pas de max-width, juste la gouttière).
   Section sans padding-block — destinée à se coller à la section qui
   suit (typique d'un "header" intermédiaire avant des iconcards). */
.cf-feature--image-none.cf-feature--content-full-width {
  padding-block: 0;
}
.cf-feature--image-none.cf-feature--content-full-width
  .cf-feature__content-col {
  max-width: none;
  margin: 0;
}

/* ---- Colonne image : flex column, image poussée en bas si head présente */
.cf-feature__image-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
  justify-content: center; /* par défaut image centrée verticalement */
}
.cf-feature--image-column-has-head .cf-feature__image-col {
  justify-content: flex-start;
}
/* Light + head : image poussée en bas (les 2 cols ont la même hauteur,
   image alignée au bas du contenu opposé). En dark, l'image suit
   naturellement le head (pas de margin-top auto). */
.cf-feature--theme-light.cf-feature--image-column-has-head .cf-feature__media {
  margin-top: auto;
}
/* Variante head-below : image en haut, blocs en bas — annule le push-bottom
   sur l'image et pousse plutôt la tête tout en bas du col. */
.cf-feature--image-column-has-head:has(.cf-feature__image-col-head--below)
  .cf-feature__media {
  margin-top: 0;
}
.cf-feature__image-col-head--below {
  margin-top: 0;
}

.cf-feature__image-col-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* ---- Media (image clip-path parallélogramme) -------------------------- */
.cf-feature__media {
  margin: 0;
  width: 100%;
}
.cf-feature__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 676 / 411;
  object-fit: cover;
}
/* Path Figma 4019:1095 (image à droite) : M0 157.505 L564.386 0 L676 411.05 L61.4941 410.989 Z */
.cf-feature--image-right .cf-feature__image {
  clip-path: polygon(0 38.2%, 83.5% 0, 100% 100%, 9.1% 100%);
}
/* Path Figma 4019:1098 (image à gauche, miroir) : M676 157.505 L111.614 0 L0 411.05 L614.506 410.989 Z */
.cf-feature--image-left .cf-feature__image {
  clip-path: polygon(16.5% 0, 100% 38.2%, 90.9% 100%, 0 100%);
}
/* Retourne l'image horizontalement (Figma : scaleX -1 sur le node IMAGE).
   Le clip-path reste celui défini par le côté image_side. */
.cf-feature--image-flip .cf-feature__image {
  transform: scaleX(-1);
}
/* Variante "uncropped" : image rendue telle quelle (sans clip-path
   parallélogramme), max 440px, centrée dans sa colonne. Cf. Figma
   4019:3155 (location départements) — image illustrative naturelle. */
.cf-feature--image-uncropped .cf-feature__image {
  clip-path: none !important;
  aspect-ratio: auto;
  max-width: 440px;
  margin-inline: auto;
  object-fit: contain;
}
.cf-feature--image-uncropped .cf-feature__media {
  display: flex;
  justify-content: center;
}

/* ---- Colonne contenu -------------------------------------------------- */
.cf-feature__content-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
  justify-content: center;
}
/* En dark + head : le contenu se cale en haut (mirror de l'image-col-head) */
.cf-feature--theme-dark.cf-feature--image-column-has-head
  .cf-feature__content-col {
  justify-content: flex-start;
}
/* En dark sans head : le contenu se cale en bas (mirror de l'image isolée) */
.cf-feature--theme-dark:not(.cf-feature--image-column-has-head)
  .cf-feature__content-col {
  justify-content: flex-end;
}

/* ---- Title : accent en bold + primary-dark, reste regular hérite couleur thème */
.cf-feature__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-regular);
  color: inherit;
}
/* Variante H3 (size:'h3') — pour les titres secondaires de section */
.cf-feature__title--h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
}
.cf-feature__title-rest {
  font-weight: var(--fw-regular);
}
.cf-feature__title-accent {
  font-weight: var(--fw-bold);
  color: var(--color-primary-dark, #8f940c);
}
/* En thème dark, le titre reste entièrement blanc — seul le poids change
   sur le segment accent (bold). Pas d'accent primary-dark sur fond noir. */
.cf-feature--theme-dark .cf-feature__title-accent {
  color: var(--color-white, #fff);
}
/* `accent_plain: true` — l'accent reste en bold mais hérite la couleur
   du titre (au lieu de primary-dark vert). Utile sur les pages où on
   ne veut pas la coloration verte. */
.cf-feature--accent-plain .cf-feature__title-accent {
  color: inherit;
}

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

/* ---- Blocs de contenu ----------------------------------------------- */
.cf-feature__paragraph,
.cf-feature__plain-bullets,
.cf-feature__icon-bullets,
.cf-feature__subheading {
  margin: 0;
  font-family: var(--font-sans);
  color: inherit;
}

.cf-feature__paragraph {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
}
.cf-feature__paragraph strong {
  font-weight: var(--fw-bold);
}
/* Variante "lead" — style "p big" Figma : 32/regular (descend à 24 puis 20
   aux 2 BP responsive comme --fs-h3). Souvent utilisé avec <em> pour italique. */
.cf-feature__paragraph--lead {
  font-size: var(--fs-h3);
  line-height: 1.25;
  font-weight: var(--fw-regular);
}
.cf-feature__paragraph--lead em {
  font-style: italic;
}

.cf-feature__subheading {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-bold);
}

/* Plain bullets : puces classiques inline (variante "ancrage chablaisien") */
.cf-feature__plain-bullets {
  list-style: disc;
  padding-left: 1.25em;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
}

/* Icon bullets : cercle vert-jaune + check + texte ; option `columns` */
.cf-feature__icon-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
/* Multi-colonnes : flex-direction row + flex-wrap + justify-content center
   pour qu'une dernière rangée incomplète se centre naturellement (Figma
   4019:2497 — 3 items row 1, 2 items row 2 centrés). Chaque item garde
   sa largeur naturelle (override de la base flex-direction:column).
   Max-width 680px (= Figma Frame 4019:2533 width 676) — la liste reste
   compacte au lieu de s'étaler sur toute la colonne. */
.cf-feature__icon-bullets--cols-2,
.cf-feature__icon-bullets--cols-3 {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--sp-4);
  row-gap: var(--sp-3);
  max-width: 680px;
}
.cf-feature__icon-bullets--cols-2 .cf-feature__icon-bullet,
.cf-feature__icon-bullets--cols-3 .cf-feature__icon-bullet {
  flex: 0 0 auto;
}
.cf-feature__icon-bullets--cols-2 .cf-feature__icon-bullet-text,
.cf-feature__icon-bullets--cols-3 .cf-feature__icon-bullet-text {
  flex: 0 0 auto; /* override la base flex:1 1 auto — texte content-sized */
}
.cf-feature__icon-bullet {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.cf-feature__icon-bullet-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
}
.cf-feature__icon-bullet-text {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.25;
  font-weight: var(--fw-medium);
  color: inherit;
  flex: 1 1 auto;
}
.cf-feature__icon-bullet-text strong {
  font-weight: var(--fw-bold);
}
/* `bold: true` sur le bloc — chaque item est wrappé en <strong> côté PHP
   (cf. feature.php). Cette classe est posée en miroir pour rendre la
   sémantique CSS explicite. */
.cf-feature__icon-bullets--bold .cf-feature__icon-bullet-text {
  font-weight: var(--fw-bold);
}

/* Partners : logos partenaires --------------------------------------- */
.cf-feature__partners {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
}
.cf-feature__partner {
  display: flex;
  align-items: center;
}
.cf-feature__partner-logo {
  display: block;
  max-height: 70px;
  width: auto;
  object-fit: contain;
}

/* CTA --------------------------------------------------------------- */
.cf-feature__cta {
  display: flex;
  align-self: flex-start;
}

/* ---- Callout : encart parallélogramme jaune-vert -------------------- */
/* Path Figma 4062:2615 (viewBox 690×484) :
   M0 155.666 L557.798 0 L690 483.727 L85.3185 484 Z
   → polygon(0 32.16%, 80.84% 0, 100% 100%, 12.37% 100%) */
.cf-feature__callout {
  position: relative;
  background: var(--color-primary, #ccd310);
  clip-path: polygon(0 32.16%, 80.84% 0, 100% 100%, 12.37% 100%);
  display: flex;
  align-items: center;
  /* Texte positionné dans le centre du parallélogramme (Figma : Frame 74
     à x=117, y=170 dans le callout 689×484 → ~17% gauche, ~35% top).
     Padding ratio respecté en partie haute pour laisser la zone tronquée
     visible ; bottom restreint pour adapter à la hauteur du contenu. */
  padding: 22% 16% 8% 18%;
  color: var(--color-secondary, #1d1d1b);
  align-self: end; /* la callout se cale en bas du content col (Figma) */
}
/* Variante "tall" (Figma 4062:2615 — terrassement section 1) — aspect-ratio
   fixe quand on veut le rendu original 690/484. Pas appliqué par défaut. */
.cf-feature__callout--tall {
  aspect-ratio: 690 / 484;
}
.cf-feature__callout-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3); /* 20 entre subheading et paragraphe */
  width: 100%;
}
.cf-feature__callout-subheading {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--fw-bold);
  color: inherit;
}
.cf-feature__callout-paragraph {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  color: inherit;
}
.cf-feature__callout-paragraph strong {
  font-weight: var(--fw-bold);
}
.cf-feature__callout-cta {
  display: flex;
  margin-top: var(--sp-2);
}

/* ---- Responsive ≤ 1024px : empile les colonnes -------------------- */
@media (max-width: 1024px) {
  .cf-feature__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-5); /* 40 ≤1024 */
  }
  /* Contenu au-dessus, image en bas — sauf si la colonne image porte sa propre
     tête (titre + intro), auquel cas on garde l'ordre logique de la maquette. */
  .cf-feature--image-right .cf-feature__content-col,
  .cf-feature--image-left .cf-feature__content-col {
    grid-column: 1;
    grid-row: 2;
  }
  .cf-feature--image-right .cf-feature__image-col,
  .cf-feature--image-left .cf-feature__image-col {
    grid-column: 1;
    grid-row: 1;
  }
  .cf-feature--image-column-has-head .cf-feature__media {
    margin-top: 0;
  }
  /* Multi-col icon-bullets : flex-wrap + justify-center gère déjà le wrap
     naturellement quand la largeur diminue, plus rien à surcharger ici. */
  .cf-feature__icon-bullet-text {
    font-size: 18px;
  }
}

/* ---- Responsive ≤ 640px ----------------------------------------------- */
@media (max-width: 640px) {
  .cf-feature__icon-bullet-text {
    font-size: 16px;
  }
  .cf-feature__icon-bullet-icon {
    width: 40px;
    height: 40px;
  }
  .cf-feature__partner-logo {
    max-height: 50px;
  }
}