/**
 * Bloc Features 04 - Figma Design Match
 *
 * BEM Convention: .bloc-features-04__element
 *
 * Figma reference: https://figma.com/design/I6wtq12NH17BottRCSlGff/?node-id=9048:9132
 * Primary color: #2464D1
 * Text color: #232425
 * Background: #FFFFFF
 *
 * Structure:
 * - Header: tagline, headline, description, button
 * - Featured card: horizontal layout
 * - Grid: 4 vertical cards
 *
 * @package Usine
 * @version 1.0.0
 */

/* ============================================
   ROOT BLOCK
   ============================================ */

.bloc-features-04 {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding-inline: var(--section-padding-x, 64px);
  /* VIS-013: Prevent horizontal overflow from slider cards */
  overflow-x: clip;
}

.bloc-features-04--wrapped-shell {
  padding-inline: 16px;
}

/* ============================================
   CONTAINER
   ============================================ */

/* FEAT04-2-03: Rounded container — vertical spacing via section inline ACF only */
.bloc-features-04__container {
  max-width: var(--section-max-width, 1312px);
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  border-radius: 16px;
  overflow: clip;
}

/* FIX-TROLILI03-FEAT04-DOTS-CLIP: keep the menu slider clipped when only dots are
   present. Dots already live inside the slider bottom padding, so they do not need the
   parent container to open its overflow. Retain the escape hatch only for arrow-based
   layouts that may still position controls on the container edge. */
.bloc-features-04__container:has(.us-slider[data-show-arrows="1"]) {
  overflow: visible;
}

.bloc-features-04--wrapped-shell .bloc-features-04__container {
  max-width: none;
  width: 100%;
  padding-inline: 64px;
}

/* ============================================
   HEADER
   ============================================ */

/* FEAT04-1-04: Header — default left, inline style from ACF overrides when present */
.bloc-features-04__header {
  text-align: left;
  max-width: 100%;
  margin: 0 0 40px;                 /* FIX: reduced title-grid spacing */
  display: flex;
  flex-direction: column;
  gap: 16px;                        /* FIX: tighter header internal spacing */
}

.bloc-features-04__header-main {
  display: flex;
  flex-direction: column;
  gap: inherit;
  min-width: 0;
}

.bloc-features-04__header--horizontal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 32px;
  row-gap: 24px;
  align-items: center;
}

.bloc-features-04__tagline {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: inherit;
  margin: 0;
}

.bloc-features-04__headline {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 48px;
  line-height: 1.2;
  color: inherit;
  margin: 0;
}

.bloc-features-04__description {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: inherit;
  margin: 0;
  /* RC-11: no max-width — description uses full header width per maquette */
}

.bloc-features-04__header[style*="text-align: center"] {
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

.bloc-features-04__header[style*="text-align: center"] .bloc-features-04__description {
  margin-left: auto;
  margin-right: auto;
}

.bloc-features-04__header--wrapped {
  padding: var(--bloc-features-04-intro-wrapper-padding, 24px);
}

.bloc-features-04__header-action {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}

.bloc-features-04__header[style*="text-align: center"] .bloc-features-04__header-action {
  justify-content: center;
}

.bloc-features-04__header[style*="text-align: right"] .bloc-features-04__header-action {
  justify-content: flex-end;
}

.bloc-features-04__header--horizontal .bloc-features-04__header-action {
  justify-content: flex-end;
  align-self: center;
}

/* ============================================
   BUTTONS
   ============================================ */

.bloc-features-04__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 8px 24px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  box-sizing: border-box;
}

.bloc-features-04__btn--secondary {
  background-color: #FFFFFF;
  border: 1px solid #3C0314;
  color: #3C0314;
}

.bloc-features-04__btn--secondary:hover {
  background-color: #232425;
  color: #FFFFFF;
}

/* ============================================
   FEATURED CARD (Horizontal)
   ============================================ */

.bloc-features-04__featured {
  margin-bottom: 32px;
}

/* FIX: Featured card with light background + shadow, no border */
/* FIX-FEAT04-CARD-BG: Use CSS variable so usine_auto_styles inline wins; transparent fallback */
/* FIX-FEAT04-CARD-RADIUS: Use CSS variable so inline border-radius wins */
.bloc-features-04__card--featured {
  display: flex;
  flex-direction: row;
  background-color: var(--card-bg, transparent);
  border: none;
  border-radius: var(--card-border-radius, 12px);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.bloc-features-04__card--featured .bloc-features-04__card-image {
  width: 50%;
  flex-shrink: 0;
}

.bloc-features-04__card--featured .bloc-features-04__card-content {
  width: 50%;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ============================================
   GRID - 4 Columns
   ============================================ */

/* FIX-FEAT04-GRID-4COL: Figma shows a 4-column grid for vertical cards.
   auto-fill with minmax(280px) resolves to 3 columns in a 1184px content area. */
.bloc-features-04__grid {
  display: grid;
  gap: 32px;
}

.bloc-features-04__grid[data-grid-cols="1"] {
  grid-template-columns: 1fr;
}

.bloc-features-04__grid[data-grid-cols="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bloc-features-04__grid[data-grid-cols="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bloc-features-04__grid[data-grid-cols="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ============================================
   CARD (Vertical)
   ============================================ */

/* FIX: cards with light background + subtle shadow, no border */
/* FIX-FEAT04-CARD-BG: Use CSS variable so usine_auto_styles inline wins; transparent fallback */
/* FIX-FEAT04-CARD-RADIUS: Use CSS variable so inline border-radius wins */
.bloc-features-04__card {
  background-color: var(--card-bg, transparent);
  border: none;
  border-radius: var(--card-border-radius, 12px);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease;
  position: relative;
}

.bloc-features-04__card-hitarea {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  border-radius: inherit;
}

.bloc-features-04__card .btn {
  position: relative;
  z-index: 2;
}

.bloc-features-04__card--clickable:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
}

.bloc-features-04__card--vertical {
  display: flex;
  flex-direction: column;
}

.bloc-features-04__card[data-media-position="bottom"] {
  flex-direction: column-reverse;
}

.bloc-features-04__card[data-media-position="background"] {
  position: relative;
  min-height: clamp(320px, 34vw, 480px);
}

.bloc-features-04__card[data-media-position="background"] .bloc-features-04__card-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  height: 100%;
  aspect-ratio: auto;
  border-radius: inherit;
}

.bloc-features-04__card[data-media-position="background"] .bloc-features-04__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bloc-features-04__card[data-media-position="background"] .bloc-features-04__card-content {
  position: relative;
  z-index: 1;
  min-height: 100%;
  justify-content: flex-end;
}

.bloc-features-04__card[data-media-position="background"] .bloc-features-04__card-image + .bloc-features-04__card-content {
  padding-top: 32px;
}

/* FIX-FEAT04-CARD-RADIUS: Image border-radius inherits from card variable */
.bloc-features-04__card-image {
  width: 100%;
  aspect-ratio: 16/9;
  background-color: #E6E7E7;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--card-border-radius, 12px) var(--card-border-radius, 12px) 0 0;
}

.bloc-features-04__card[data-media-position="bottom"] .bloc-features-04__card-image {
  border-radius: 0 0 var(--card-border-radius, 12px) var(--card-border-radius, 12px);
}

.bloc-features-04__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.bloc-features-04__card-image-placeholder {
  width: 48px;
  height: 48px;
  color: #999;
}

.bloc-features-04__card-image-placeholder svg {
  width: 100%;
  height: 100%;
}

.bloc-features-04__card-content {
  padding: 32px;                     /* FIX: increased internal padding */
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bloc-features-04__card-content[style*="text-align: center"] .bloc-features-04__card-standalone-icon {
  margin-inline: auto;
}

.bloc-features-04__card-content:empty {
  display: none;
}

/* FIX-F04-R4: Breathing room between card image and card text content */
.bloc-features-04__card-image + .bloc-features-04__card-content {
  padding-top: 24px;
}

/* FIX-FEAT04-CARD-ICON: Standalone icon container (circular bg, above title) */
.bloc-features-04__card-standalone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: inherit;
  width: var(--us-icon-size, 40px);
  height: var(--us-icon-size, 40px);
  object-fit: contain;
}

.bloc-features-04__card-standalone-icon svg {
  width: 100%;
  height: 100%;
}

/* On dark sections, cards should be transparent (no white box on dark bg) */
.bloc-features-04__card--on-dark {
  background-color: transparent;
  border-color: transparent;
}

/* On dark cards, icon color should be white by default */
.bloc-features-04__card--on-dark .bloc-features-04__card-standalone-icon,
.bloc-features-04__card--on-dark .bloc-features-04__card-standalone-icon svg {
  color: #ffffff;
}

.bloc-features-04__card-icon {
  width: 40px;
  height: 40px;
  color: inherit;
}

.bloc-features-04__card-icon img,
.bloc-features-04__card-icon svg {
  width: 100%;
  height: 100%;
}

.bloc-features-04__card-number {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: max(48px, calc(1em + 16px));
  block-size: max(48px, calc(1em + 16px));
  min-inline-size: 48px;
  min-block-size: 48px;
  background-color: #f3f4f6;         /* FIX: light gray background behind number */
  border-radius: 6px;
  flex-shrink: 0;
}

.bloc-features-04__card-title {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.4;
  color: inherit;
  margin: 0;
}

.bloc-features-04__card-description {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: inherit;
  margin: 0;
}

/* ============================================
   DETAILS
   ============================================ */

.bloc-features-04__card-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bloc-features-04__detail-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.bloc-features-04__detail-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: inherit;
}

.bloc-features-04__detail-icon img,
.bloc-features-04__detail-icon svg {
  width: 100%;
  height: 100%;
}

.bloc-features-04__detail-text {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: inherit;
}

/* ============================================
   CARD LINK
   ============================================ */

.bloc-features-04__card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #3C0314;
  text-decoration: none;
  margin-top: auto;
}

.bloc-features-04__card-link:hover {
  color: #2a020e;
}

.bloc-features-04__card-link-icon {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}

.bloc-features-04__card-link-icon svg {
  width: 100%;
  height: 100%;
}

.bloc-features-04__card-link:hover .bloc-features-04__card-link-icon {
  transform: translateX(4px);
}

/* ============================================
   SLIDER MODE (us-slider integration)
   ============================================ */

/* Slider wrapper: contained within the block container */
/* FIX-FEAT04-SLIDER-VISIBLE: overflow:visible so slider arrows are not clipped */
.bloc-features-04__slider {
  margin-top: 24px;
  padding-bottom: 40px;             /* compact controls row without over-opening the block */
  overflow: visible;
}

.bloc-features-04__slider--footer-controls {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas:
    "track track track"
    "dots prev next";
  column-gap: 16px;
  row-gap: 24px;
  align-items: center;
  padding-bottom: 0;
}

.bloc-features-04__slider--footer-controls .us-slider__track {
  grid-area: track;
}

/* Slider cards keep the same vertical composition as the design cards. */
/* FIX-FEAT04-CARD-BG + FIX-FEAT04-CARD-RADIUS: Slider cards use same CSS variables */
.bloc-features-04__slider .bloc-features-04__card {
  margin: 0 16px;
  box-sizing: border-box;
  height: auto;
  display: flex;
  flex-direction: column;
  background-color: var(--card-bg, transparent);
  border: none;
  border-radius: var(--card-border-radius, 12px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.bloc-features-04__slider .bloc-features-04__card--vertical {
  flex-direction: column;
}

.bloc-features-04__slider .bloc-features-04__card-image {
  width: 100%;
  flex-shrink: 0;
  aspect-ratio: 16/10;
}

.bloc-features-04__slider .bloc-features-04__card-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* First/last card margin adjustments */
.bloc-features-04__slider .us-slider__track > :first-child {
  margin-left: 0;
}
.bloc-features-04__slider .us-slider__track > :last-child {
  margin-right: 0;
}

/* FIX: Arrows at bottom right, outline style */
.bloc-features-04__slider .us-slider__prev,
.bloc-features-04__slider .us-slider__next {
  top: auto;
  bottom: 0;
  transform: none;
  background: var(--us-slider-arrow-bg, transparent);
  border: var(--us-slider-arrow-border-width, 1px) solid var(--us-slider-arrow-border-color, #e6e7e7);
  border-radius: var(--us-slider-arrow-radius, 999px);
  box-shadow: none;
}

.bloc-features-04__slider .us-slider__prev:hover,
.bloc-features-04__slider .us-slider__next:hover {
  background: var(--us-slider-arrow-bg-hover, #f5f6f6);
  box-shadow: none;
}

.bloc-features-04__slider .us-slider__prev {
  left: auto;
  right: 88px;
}

.bloc-features-04__slider .us-slider__next {
  right: 16px;
}

.bloc-features-04__slider--footer-controls .us-slider__prev,
.bloc-features-04__slider--footer-controls .us-slider__next {
  position: static;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  transform: none;
  margin: 0;
}

.bloc-features-04__slider--footer-controls .us-slider__prev {
  grid-area: prev;
}

.bloc-features-04__slider--footer-controls .us-slider__next {
  grid-area: next;
}

.bloc-features-04__slider .us-slider__prev svg,
.bloc-features-04__slider .us-slider__next svg {
  color: var(--us-slider-arrow-icon-color, #9ca3af);
}

/* FIX: Dots aligned bottom left */
.bloc-features-04__slider .us-slider__dots {
  margin-top: 16px;
  justify-content: flex-start;
}

.bloc-features-04__slider--footer-controls .us-slider__dots {
  grid-area: dots;
  align-self: center;
  margin-top: 0;
  min-width: 40px;
  width: auto;
}

.bloc-features-04__slider .us-slider__dot {
  background: #e5e7eb;
}

.bloc-features-04__slider .us-slider__dot:hover {
  background: #cbd5e1;
}

.bloc-features-04__slider .us-slider__dot.is-active {
  background: #cbd5e1;
}

/* ============================================
   RESPONSIVE - Tablet (1200px)
   ============================================ */

@media (max-width: 1200px) {
  .bloc-features-04__header--horizontal {
    column-gap: 24px;
  }

  .bloc-features-04__container {
    padding: 0;
  }

  .bloc-features-04--wrapped-shell .bloc-features-04__container {
    padding-inline: 32px;
  }

  .bloc-features-04__grid[data-grid-cols="1"] {
    grid-template-columns: 1fr;
  }

  .bloc-features-04__grid[data-grid-cols="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bloc-features-04__grid[data-grid-cols="3"],
  .bloc-features-04__grid[data-grid-cols="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bloc-features-04__headline {
    font-size: 40px;
  }
}

/* ============================================
   RESPONSIVE - Mobile (768px)
   ============================================ */

@media (max-width: 768px) {
  .bloc-features-04__header--horizontal {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }

  .bloc-features-04__header--horizontal .bloc-features-04__header-action {
    justify-content: flex-start;
  }

  .bloc-features-04__container {
    padding: 0;
  }

  .bloc-features-04--wrapped-shell .bloc-features-04__container {
    padding-inline: 20px;
  }

  .bloc-features-04__header {
    margin-bottom: 48px;
  }

  .bloc-features-04__headline {
    font-size: 32px;
  }

  .bloc-features-04__card--featured {
    flex-direction: column;
  }

  .bloc-features-04__card--featured .bloc-features-04__card-image {
    width: 100%;
  }

  .bloc-features-04__card--featured .bloc-features-04__card-content {
    width: 100%;
    padding: 24px;
  }

  .bloc-features-04__grid,
  .bloc-features-04__grid[data-grid-cols="1"],
  .bloc-features-04__grid[data-grid-cols="2"],
  .bloc-features-04__grid[data-grid-cols="3"],
  .bloc-features-04__grid[data-grid-cols="4"] {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   ACCESSIBILITY - Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .bloc-features-04__btn,
  .bloc-features-04__card-link-icon {
    transition: none;
  }
}