/**
 * 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);
  overflow-x: visible;
}

.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: visible;
}

/* Keep slider overflow open: several authored layouts intentionally let adjacent
   cards peek outside the imported container. */
.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;
}

/* FEAT04-SHELL-CONTENT-WIDTH-001: the coloured shell is deliberately full-bleed,
   but its content must sit on the same measure as every other section. The shell's
   own padding is locked by an !important rule in usine-components.css, so the cap
   is applied to the content itself rather than to the shell padding. */
.bloc-features-04--wrapped-shell .bloc-features-04__container > * {
  max-width: var(--section-max-width, 1312px);
  margin-inline: auto;
  width: 100%;
}

/* ============================================
   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: var(--bloc-features-04-header-main-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: end;
}

.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--panel {
  --bloc-features-04-header-main-gap: 24px;
  padding: var(--bloc-features-04-intro-wrapper-padding, 48px);
  gap: 40px;
}

.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: end;
}

/* ============================================
   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: 24px;
}

/* Consecutive zone rows need the same breathing room between them as the cards
   have inside a row — the grid gap only applies within a single grid. */
.bloc-features-04__grid--horizontal + .bloc-features-04__grid--horizontal {
  margin-top: 24px;
}

/* FEAT04-CARD-HOVER-001: a linked card lifts slightly and its media zooms in, to
   signal it is clickable. Suppressed when the visitor prefers reduced motion. */
.bloc-features-04__card--clickable {
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.bloc-features-04__card--clickable .bloc-features-04__card-image > img {
  transition: transform 0.45s ease;
}

.bloc-features-04__card--clickable:hover,
.bloc-features-04__card--clickable:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(87, 69, 56, 0.14);
}

.bloc-features-04__card--clickable:hover .bloc-features-04__card-image > img,
.bloc-features-04__card--clickable:focus-within .bloc-features-04__card-image > img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .bloc-features-04__card--clickable,
  .bloc-features-04__card--clickable .bloc-features-04__card-image > img {
    transition: none;
  }

  .bloc-features-04__card--clickable:hover,
  .bloc-features-04__card--clickable:focus-within,
  .bloc-features-04__card--clickable:hover .bloc-features-04__card-image > img,
  .bloc-features-04__card--clickable:focus-within .bloc-features-04__card-image > img {
    transform: none;
  }
}

.bloc-features-04--stats-strip .bloc-features-04__grid {
  gap: 24px;
  align-items: stretch;
}

.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--vertical.bloc-features-04__card--media-content-gap {
  gap: var(--bloc-features-04-card-media-content-gap, 24px);
}

.bloc-features-04__card--horizontal {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--bloc-features-04-card-media-content-gap, 24px);
}

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

.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% !important;
  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;
}

/* FEAT04-HORIZONTAL-MEDIA-001: the media half fills the card height rather than
   dictating it. The image is taken out of flow so its intrinsic size no longer
   inflates the card; positioned against the wrapper's padding box, it keeps the
   authored inset whatever its value. */
.bloc-features-04__card--horizontal .bloc-features-04__card-image {
  position: relative;
  flex: 1 1 0;
  width: auto;
  height: auto !important;
  min-height: 0;
  align-self: stretch;
  aspect-ratio: auto;
  border-radius: 0;
}

/* Offsets resolve against the wrapper's PADDING BOX, which includes the padding
   area, and a replaced element does NOT stretch to its offsets — with width/height
   auto an <img> keeps its intrinsic size and overflows. Both the position and the
   size are therefore stated explicitly, from the property render.php mirrors from
   the authored padding. */
.bloc-features-04__card--horizontal .bloc-features-04__card-image > img {
  position: absolute;
  top: var(--bloc-features-04-media-pad, 0px);
  left: var(--bloc-features-04-media-pad, 0px);
  width: calc(100% - var(--bloc-features-04-media-pad, 0px) * 2);
  height: calc(100% - var(--bloc-features-04-media-pad, 0px) * 2);
  max-width: none;
  object-fit: cover;
}


.bloc-features-04__card--horizontal .bloc-features-04__card-content {
  flex: 1 1 0;
  min-width: 248px;
  height: 100%;
  padding: var(--bloc-features-04-card-content-pad, 24px);
  justify-content: center;
  gap: 8px;
}

/* FIX-FEAT04-CARD-RADIUS: Image border-radius inherits from card variable */
.bloc-features-04__card-image {
  width: 100%;
  aspect-ratio: 16/9;
  /* No placeholder fill: render.php only outputs this wrapper when the card has
     image data, so a grey backdrop only ever showed through the media inset. */
  background-color: transparent;
  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);
}

/* FEAT04-CARD-MEDIA-BLEED-001: on vertical cards the media spans the full card
   width, cancelling the wrapper padding. The card already clips with overflow
   hidden, so its own border-radius rounds the exposed media corners. */
.bloc-features-04__card--vertical > .bloc-features-04__card-image {
  width: auto;
  margin-inline: calc(var(--bloc-features-04-card-pad, 0px) * -1);
}

.bloc-features-04__card--vertical[data-media-position="top"] > .bloc-features-04__card-image {
  margin-top: calc(var(--bloc-features-04-card-pad, 0px) * -1);
}

.bloc-features-04__card--vertical[data-media-position="bottom"] > .bloc-features-04__card-image {
  margin-bottom: calc(var(--bloc-features-04-card-pad, 0px) * -1);
}

/* FEAT04-MEDIA-ONLY-CARD-002: a card authored with media but no text is a pure
   image tile — the media fills the whole card instead of leaving the wrapper
   background exposed below a fixed-height image. The authored height becomes a
   minimum, so the tile still matches its siblings when the row stretches. */
.bloc-features-04__card--media-only > .bloc-features-04__card-image {
  flex: 1 1 auto;
  height: auto !important;
  aspect-ratio: auto;
  margin-block: calc(var(--bloc-features-04-card-pad, 0px) * -1);
}

.bloc-features-04__card--media-only > .bloc-features-04__card-content {
  display: none;
}

.bloc-features-04__card-image img,
.bloc-features-04__card-image > .usine-image-placeholder {
  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%;
}

/* FEAT04-CONTENT-RHYTHM-001: maquette spacing — 24px inset (supplied by the card
   wrapper when present), 8px between title and description, 32px before the CTA. */
.bloc-features-04__card-content {
  padding: var(--bloc-features-04-card-content-pad, 32px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 8px;
  /* FEAT04-CONTENT-ALIGN-001: children are block boxes in a flex column, so
     text-align alone does not place them — the cross-axis alignment has to follow
     the authored alignment, otherwise left-aligned cards still render centred. */
  align-items: flex-start;
}

.bloc-features-04__card-content[style*="text-align: center"] {
  align-items: center;
}

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

/* FEAT04-STATS-STRIP-OVERRIDE-001: a block whose vertical cards carry no image is
   auto-detected as a "stats strip", a variant that centres its content and forces
   `padding: 0 !important`. Pricing cards (title + description + list) trip that
   heuristic even though they are authored left-aligned, so the authored alignment
   and the card inset are restored here — scoped to left-aligned content, leaving
   genuinely centred cards alone. */
.bloc-features-04__card-content[style*="text-align: left"] {
  align-items: flex-start !important;
  text-align: left;
}

.bloc-features-04--stats-strip .bloc-features-04__card-content[style*="text-align: left"] {
  padding: var(--bloc-features-04-card-content-pad, 24px) !important;
  justify-content: flex-start;
}

/* The CTA follows the description at the maquette's 32px (8px gap + 24px), never
   gets pushed to the card floor when a sibling card is taller, and stays flush
   left with the title and description instead of centring in the card width. */
.bloc-features-04__card-content > .btn {
  margin-top: 24px;
  margin-bottom: 0;
  align-self: flex-start;
  width: auto;
  justify-content: flex-start;
  text-align: left;
}

/* A tertiary CTA is a text link, not a filled button: its button padding would
   indent the label away from the title and description it should line up with. */
.bloc-features-04__card-content > .btn-tertiary {
  padding: 0;
}

.bloc-features-04--stats-strip .bloc-features-04__card-content {
  box-sizing: border-box;
  min-height: 0;
  height: auto;
  justify-content: center;
  align-items: center;
  gap: 24px;
  /* FEAT04-STATS-STRIP-INSET-001 : la variante forçait `padding: 0 !important`,
     pensée pour des cartes dont le cadre porte lui-même le retrait. Sur les
     cartes à icône, le cadre est à zéro : titre, texte et icône se retrouvaient
     collés aux bords arrondis. On respecte désormais le retrait saisi côté
     contenu ; une vraie bande de chiffres qui déclare 0 garde son comportement. */
  padding: var(--bloc-features-04-card-content-pad, 0px) !important;
  text-align: center;
  overflow: visible;
}

.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;
}

/* The content half keeps its full inset next to the media, per the maquette. */
.bloc-features-04__card--horizontal .bloc-features-04__card-image + .bloc-features-04__card-content {
  padding-top: var(--bloc-features-04-card-content-pad, 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;
}

/* FEAT04-NUMBER-BADGE-HUG-001: a textual badge hugs its label instead of
   stretching across the card, so its authored pill background reads as a chip. */
.bloc-features-04__card-number--textual {
  display: inline-block;
  align-self: flex-start;
  max-inline-size: 100%;
  inline-size: auto;
  block-size: auto;
  min-inline-size: 0;
  min-block-size: 0;
  line-height: 1.15;
  margin: 0;
  /* Chip padding — matches the maquette's 8px inset around the label. */
  padding: 8px 12px;
  background-color: transparent;
  border-radius: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.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: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.bloc-features-04__card-details .icon-text {
  width: 100%;
  min-width: 0;
  align-items: center;
}

.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;
  flex: 1 1 auto;
  min-width: 0;
}

.bloc-features-04__card-details .icon-text__text {
  flex: 1 1 auto;
  min-width: 0;
}

/* ============================================
   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: 0;
  padding-bottom: 40px;             /* compact controls row without over-opening the block */
  overflow: visible;
}

.bloc-features-04__slider--on-dark {
  --us-slider-arrow-bg: transparent;
  --us-slider-arrow-bg-hover: rgba(232, 191, 150, 0.12);
  --us-slider-arrow-shadow: none;
  --us-slider-arrow-shadow-hover: none;
  --us-slider-dot-color: rgba(250, 250, 250, 0.24);
  --us-slider-dot-hover-color: rgba(232, 191, 150, 0.72);
  --us-slider-dot-active-color: rgba(250, 250, 250, 0.58);
}

.bloc-features-04--slider-with-intro .bloc-features-04__header {
  margin-bottom: 0;
}

.bloc-features-04--slider-with-intro .bloc-features-04__slider {
  margin-top: 0;
}

.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;
  overflow-x: visible;
  overflow-y: visible;
}

.bloc-features-04__slider--footer-controls.us-slider {
  overflow-x: visible;
  overflow-y: visible;
}

.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 {
  box-sizing: border-box;
  height: auto;
  display: flex;
  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 {
  --us-slider-gap: 24px;
}

.bloc-features-04__slider .bloc-features-04__card--vertical:not([data-media-position="bottom"]) {
  flex-direction: column;
}

.bloc-features-04__slider .bloc-features-04__card--horizontal {
  min-height: 388px;
}

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

.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--horizontal .bloc-features-04__card-image {
  flex: 1 1 0;
  width: auto;
  flex-shrink: 1;
  height: 388px;
  min-width: 200px;
  aspect-ratio: auto;
}

.bloc-features-04__card--media-crop-fallback .bloc-features-04__card-image img {
  transform: scale(1.08);
  transform-origin: center;
}

/* The zoom above compensates for media that cannot crop. Horizontal cards already
   crop with object-fit, so the extra scale would only eat into the authored inset. */
.bloc-features-04__card--horizontal.bloc-features-04__card--media-crop-fallback .bloc-features-04__card-image img {
  transform: none;
}

.bloc-features-04__slider .bloc-features-04__card--horizontal .bloc-features-04__card-content {
  flex: 1 1 0;
}

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

/* 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;
  box-sizing: border-box;
  padding-inline: 2px;
}

.bloc-features-04__slider--no-controls {
  padding-bottom: 0;
}

.bloc-features-04__slider .us-slider__dot {
  background: var(--us-slider-dot-color);
}

.bloc-features-04__slider .us-slider__dot:hover {
  background: var(--us-slider-dot-hover-color);
}

.bloc-features-04__slider .us-slider__dot.is-active {
  background: var(--us-slider-dot-active-color);
}

/* ============================================
   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;
  }
}

/* ==========================================================================
   FEAT04-TABLET-TRIPTYCH-001
   Le palier 1200px rabattait indistinctement les grilles de 3 et de 4 sur deux
   colonnes. Une série de trois y perdait sa lecture : deux cartes alignées et
   la troisième seule sur sa rangée. Sur tablette, un triptyque tient largement
   en trois colonnes — on ne le casse que sur mobile.
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
  .bloc-features-04__grid[data-grid-cols="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* FEAT04-TABLET-HEADER-001
     L'en-tête « titre à gauche / bouton à droite » ne se dépliait qu'en dessous
     de 768px. Sur tablette, le bouton gardait sa largeur naturelle et laissait
     au texte une colonne étroite : le titre passait sur trois lignes et la
     description venait buter contre le bouton. Titre et texte reprennent toute
     la largeur, le bouton passe dessous et s'aligne à gauche avec eux. */
  .bloc-features-04__header--horizontal {
    grid-template-columns: 1fr;
    align-items: start;
    row-gap: 24px;
  }

  .bloc-features-04__header--horizontal > * {
    justify-self: start;
  }
}

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

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

  .bloc-features-04__header-action {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
  }

  .bloc-features-04__header-action .btn {
    width: 100%;
    flex: 1 0 100%;
    min-width: 0;
  }

  .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__card--horizontal,
  .bloc-features-04__slider .bloc-features-04__card--horizontal,
  .bloc-features-04__card--horizontal[data-media-position="right"] {
    flex-direction: column;
    gap: 24px;
    min-height: auto;
  }

  .bloc-features-04__card--horizontal .bloc-features-04__card-image,
  .bloc-features-04__slider .bloc-features-04__card--horizontal .bloc-features-04__card-image {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-width: 0;
  }

  .bloc-features-04__card--horizontal .bloc-features-04__card-content {
    width: 100%;
    min-width: 0;
  }

  .bloc-features-04__slider--no-controls {
    margin-top: 0;
    padding-bottom: 0;
  }

  .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;
  }
}

/* ==========================================================================
   FEAT04-HORIZONTAL-MEDIA-MOBILE-001
   En desktop l'image est sortie du flux (sinon sa hauteur intrinsèque dicte
   celle de la carte). En mobile la carte s'empile : le conteneur média n'avait
   plus rien pour se dimensionner et s'écrasait à zéro — l'image disparaissait.
   On lui donne donc un ratio explicite, l'image conserve son retrait.
   ========================================================================== */
@media (max-width: 768px) {
    .bloc-features-04__card--horizontal > .bloc-features-04__card-image {
        height: auto !important;
        aspect-ratio: 16 / 10;
        width: 100%;
        flex: 0 0 auto;
        align-self: stretch;
    }
}

/* ==========================================================================
   FEAT04-MOBILE-SPACING-001
   Sur mobile la carte horizontale s'empile : l'écart inter-colonnes se
   retrouvait entre l'image et le titre, en plus du retrait du contenu.
   ========================================================================== */
@media (max-width: 768px) {
    .bloc-features-04__card--horizontal {
        flex-direction: column;
        gap: 0;
    }

    .bloc-features-04__card--horizontal > .bloc-features-04__card-content {
        height: auto;
        justify-content: flex-start;
    }
}

/* ==========================================================================
   FEAT04-STATS-STRIP-MOBILE-001
   La variante "stats-strip" (cards sans image) impose `padding: 0 !important`
   au contenu : pensée pour une bande de chiffres en pleine largeur, elle laisse
   le texte toucher — et déborder — les bords de la carte sur petit écran.
   On rétablit un retrait sur mobile, sans toucher au rendu desktop.
   ========================================================================== */
@media (max-width: 768px) {
    .bloc-features-04--stats-strip .bloc-features-04__card-content {
        padding: 20px !important;
        box-sizing: border-box;
        max-width: 100%;
    }

    .bloc-features-04--stats-strip .bloc-features-04__card-description,
    .bloc-features-04--stats-strip .bloc-features-04__card-title {
        max-width: 100%;
        overflow-wrap: break-word;
    }
}

/* ==========================================================================
   FEAT04-TABLET-HORIZONTAL-CARD-001
   Mesuré sur iPad portrait (834px) : dans une grille de deux, chaque carte
   horizontale fait 373px et son média n'en occupait plus que 101, soit 27 %.
   Le visuel se réduisait à un bandeau vertical où l'on ne distinguait plus
   rien, et le texte à côté tombait sur des lignes de trois mots. La carte
   s'empile donc : le média passe au-dessus, en bandeau paysage, et le texte
   récupère toute la largeur.
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
  .bloc-features-04__card--horizontal {
    flex-direction: column;
  }

  .bloc-features-04__card--horizontal > .bloc-features-04__card-image {
    position: relative;
    width: 100%;
    flex: 0 0 auto;
    aspect-ratio: 16 / 9;
  }

  /* Le média est positionné en absolu à l'intérieur de son cadre (voir
     FEAT04-HORIZONTAL-MEDIA-001) : le cadre lui donne désormais sa hauteur. */
  .bloc-features-04__card--horizontal .bloc-features-04__card-image > img {
    height: calc(100% - var(--bloc-features-04-media-pad, 0px) * 2);
  }

  .bloc-features-04__card--horizontal > .bloc-features-04__card-content {
    width: 100%;
  }

  /* Même constat sur les cartes verticales : dans une colonne de 373px, un
     visuel portrait montait à 547px de haut. Une proportion 4/3 le ramène
     autour de 280px et laisse voir la carte suivante dans le même écran. */
  .bloc-features-04__card:not(.bloc-features-04__card--horizontal) .bloc-features-04__card-image {
    aspect-ratio: 4 / 3;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden;
  }

  .bloc-features-04__card:not(.bloc-features-04__card--horizontal) .bloc-features-04__card-img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
  }
}

/* ==========================================================================
   FEAT04-TABLET-CARD-RHYTHM-001
   Une fois la carte empilée, son contenu restait centré verticalement : sur la
   carte la plus courte d'une paire, la hauteur en trop se répartissait autour
   du texte et ouvrait 48px de vide entre le bas de l'image et le titre. Le
   contenu se cale en haut, juste sous l'image.
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Le cadre du media est deja retrait de 24px : ce retrait forme, sous
     l'image, un blanc egal a celui des cotes. Y ajouter un retrait de contenu
     doublait l'ecart avant le titre. Le contenu demarre donc a ras, et c'est le
     retrait du media qui fait respirer — meme valeur en haut, en bas, de cote. */
  /* Mesure avant correction : 72px separaient l'image de son titre, en trois
     couches de 24px empilees — le retrait du cadre media, l'espacement de la
     carte, puis le retrait haut du contenu. Une seule suffit. On garde celle du
     cadre media, qui vaut deja le retrait lateral, et on annule les deux autres.
     Le retrait du contenu est pose par une regle `!important` heritee de la
     variante « bande de chiffres » : il faut la meme arme pour le reprendre. */
  .bloc-features-04__card--horizontal {
    gap: 0;
  }

  /* Uniquement quand un visuel precede le contenu : sur une carte sans image —
     les formules de la page tarifs — annuler le retrait haut collait le texte
     contre le bord superieur de la carte. */
  .bloc-features-04__card--horizontal:has(> .bloc-features-04__card-image)
    > .bloc-features-04__card-content {
    justify-content: flex-start;
    padding-top: 0 !important;
  }
}

/* ==========================================================================
   FEAT04-MOBILE-GALLERY-SWIPE-001
   Une galerie ne se lit pas comme une liste : empilée sur mobile, ses quatre
   visuels imposaient quatre écrans de défilement vertical avant la suite de la
   page. Quand la grille ne contient que des images (cartes `--media-only`),
   elle devient une piste horizontale que l'on fait glisser au doigt, chaque
   image venant se caler d'elle-même grâce à l'accroche de défilement. Les
   retraits de la section sont compensés par une marge négative pour que la
   piste parte du bord de l'écran et laisse deviner l'image suivante.

   La condition porte sur l'absence de carte textuelle, jamais sur la présence
   d'une carte sans texte : une grille de prestations comptant une seule carte
   purement illustrative basculait sinon en piste horizontale et n'affichait
   plus qu'un visuel géant.
   ========================================================================== */
@media (max-width: 768px) {
  .bloc-features-04__grid:not(:has(> .bloc-features-04__card:not(.bloc-features-04__card--media-only))) {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Le doigt continue sa course jusqu'à l'image suivante sans rebond. */
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: var(--section-padding-x, 16px);
    padding-inline: var(--section-padding-x, 16px);
    margin-inline: calc(var(--section-padding-x, 16px) * -1);
    scrollbar-width: none;
  }

  .bloc-features-04__grid:not(:has(> .bloc-features-04__card:not(.bloc-features-04__card--media-only)))::-webkit-scrollbar {
    display: none;
  }

  .bloc-features-04__grid:not(:has(> .bloc-features-04__card:not(.bloc-features-04__card--media-only))) > .bloc-features-04__card {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }
}

/* ==========================================================================
   FEAT04-COMPARAISON-SCHEMA-001
   Comparatif « Luxopuncture® vs acupuncture », aligné sur la maquette
   (Figma 9037-196341) : carte 640 x 642, cadre média 640 x 411, visuel 592 x
   363 inséré à 24px sur les quatre côtés. Le visuel est donc en paysage —
   proportion 1,63 — alors que le fichier source est vertical (0,82) : la
   maquette recadre volontairement le schéma sur la coupe de peau, et c'est ce
   cadrage qui doit être reproduit.

   La proportion est exprimée en ratio plutôt qu'en hauteur fixe, pour que le
   cadre garde le rapport de la maquette à toutes les largeurs. Le retrait de
   24px vient du gabarit ; l'arrondi est porté par le visuel lui-même, le cadre
   restant transparent comme sur la maquette.

   La cible est structurelle — une carte qui porte à la fois un visuel et une
   liste à puces — et ne correspond qu'à ces deux cartes sur l'ensemble du site.
   ========================================================================== */
.bloc-features-04__card:has(.bloc-features-04__card-image):has(.icon-text)
  > .bloc-features-04__card-image {
  /* La hauteur est ecrite en ligne par le gabarit d'apres la taille du fichier
     source : seul `!important` peut la reprendre. */
  aspect-ratio: 640 / 411 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: var(--bloc-features-04-media-pad, 24px);
  box-sizing: border-box;
  background: transparent;
  overflow: visible;
}

.bloc-features-04__card:has(.bloc-features-04__card-image):has(.icon-text)
  > .bloc-features-04__card-image > img {
  position: static;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 32px;
  margin: 0;
}

/* ==========================================================================
   FEAT04-NUMBER-TEXTUAL-ALIGN-001
   L'étiquette textuelle porte un retrait de 12px destiné à la faire lire comme
   une pastille. Quand aucune couleur de fond n'est saisie — cas des cartes
   « hormones » — il n'y a pas de pastille à détacher : ce retrait ne fait que
   décaler le libellé de 12px vers la droite, si bien qu'« Endorphine » ne
   s'alignait plus avec « LE BIEN-ÊTRE » ni avec la description en dessous.

   Le retrait horizontal ne subsiste donc que lorsqu'un fond est effectivement
   déclaré en ligne, ce qui préserve les vraies pastilles (« OFFERT POUR UNE
   CURE DE 10 » sur la page des tarifs).
   ========================================================================== */
.bloc-features-04__card-number--textual:not([style*="background-color"]) {
  padding-inline: 0;
}

/* ==========================================================================
   FEAT04-SHELL-GAP-001
   La coque colorée absorbe le retrait vertical de sa section : le bloc suivant
   venait donc se coller à elle, sans respiration. Mesuré sur « Ce qui guide ma
   pratique » : zéro pixel entre le bas du panneau rose et le panneau brun qui
   suit. Une coque doit se détacher de ce qui l'entoure ; on lui donne une
   marge basse, en marge et non en retrait pour ne pas grandir le panneau.
   ========================================================================== */
.bloc-features-04--wrapped-shell {
  margin-bottom: 40px;
}

/* ==========================================================================
   FEAT04-SHELL-WIDTH-001
   La coque coloree s'etendait sur 1408px — retrait de section reduit a 16px et
   conteneur sans plafond — alors que la pastille de navigation fait 1312px.
   Le panneau depassait donc visiblement la barre, et deux panneaux successifs
   n'avaient pas la meme largeur. La coque revient sur la mesure de reference
   du site, celle de la navbar et de tous les autres blocs.
   ========================================================================== */
.bloc-features-04--wrapped-shell .bloc-features-04__container {
  max-width: var(--section-max-width, 1312px);
  margin-inline: auto;
}