/**
 * Bloc Header 01 - Complete Styles
 *
 * Hero section with CTA buttons, reviews, and main image.
 * All Figma values hardcoded for pixel-perfect rendering.
 *
 * Figma reference: https://figma.com/design/I6wtq12NH17BottRCSlGff/?node-id=176:31367
 * Brand primary: #3C0314
 * Text color: #232425
 * Background: #FFFFFF
 *
 * @package Usine
 * @version 2.1.0 - Corrected Figma values
 */

/* ============================================
   ROOT BLOCK
   Figma: bloc_header_01 (root)
   ============================================ */

.usine-bloc-header-01 {
  position: relative;
  width: 100%;
  background-color: #FFFFFF;          /* Figma: bg white */
  padding: 80px var(--section-padding-x, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  overflow: visible;                   /* RC-26: was clip, clipped review badge shadow */
}

.usine-bloc-header-01--banner-mode {
  padding: 0;
  background-color: transparent;
}

/* ============================================
   CONTAINER / LAYOUT
   Figma: contai_container
   ============================================ */

.usine-bloc-header-01__layout {
  display: flex;
  flex-direction: row;                /* Content left, media right (default) */
  flex-wrap: nowrap;                  /* NEVER wrap on desktop */
  align-items: stretch;              /* RC-11: both halves fill full height */
  --usine-header-layout-gap: 48px;
  gap: var(--usine-header-layout-gap);
  max-width: var(--section-max-width, 1312px);
  width: 100%;
  min-height: 420px;                 /* RC-11: ensure split is visible */
  overflow: visible;                  /* RC-HEADER-CLIP: was clip, but cuts review shadow and review badge */
}

.usine-bloc-header-01__layout--content-panel {
  --usine-header-layout-gap: 0px;
  gap: 0;                            /* RC-11: no gap between colored panel and image */
}

/* Layout modifier: media on left (content first in DOM, reverse so media appears left) */
.usine-bloc-header-01__layout--media-left {
  flex-direction: row-reverse;
}

/* Layout modifier: media on right (default — content first in DOM, natural order) */
.usine-bloc-header-01__layout--media-right {
  flex-direction: row;
}

/* Keep a true half/half split on lateral header variants instead of letting
   intrinsic media width compress the image side. */
.usine-bloc-header-01__layout--media-left > .usine-bloc-header-01__content,
.usine-bloc-header-01__layout--media-left > .usine-bloc-header-01__media,
.usine-bloc-header-01__layout--media-right > .usine-bloc-header-01__content,
.usine-bloc-header-01__layout--media-right > .usine-bloc-header-01__media {
  flex: 0 0 calc((100% - var(--usine-header-layout-gap, 48px)) / 2);
  max-width: calc((100% - var(--usine-header-layout-gap, 48px)) / 2);
}

.usine-bloc-header-01__layout--without-media > .usine-bloc-header-01__content {
  flex-basis: 100%;
  max-width: 100%;
}

.usine-bloc-header-01__layout--without-media {
  min-height: 360px;
}

.usine-bloc-header-01__layout--source-sized-media {
  min-height: 0;
  align-items: center;
}

.usine-bloc-header-01__layout--source-sized-media > .usine-bloc-header-01__media {
  min-height: var(--usine-header-lateral-source-height, auto);
}

.usine-bloc-header-01__layout--source-sized-media.usine-bloc-header-01__layout--long-copy {
  min-height: max(var(--usine-header-lateral-source-height, 0px), 468px);
}

.usine-bloc-header-01--title-only .usine-bloc-header-01__layout {
  min-height: 0;
}

.usine-bloc-header-01--title-only .usine-bloc-header-01__content {
  gap: 0;
}

/* Layout modifier: media on top */
.usine-bloc-header-01__layout--media-top {
  flex-direction: column-reverse;
}

/* Layout modifier: media on bottom */
.usine-bloc-header-01__layout--media-bottom {
  flex-direction: column;
}

/* ============================================
   BANNER MODE (media_position = "background")
   Full-width banner with image as background,
   text overlaid and centered, border-radius on
   the entire banner container.
   ============================================ */

.usine-bloc-header-01__layout--media-background {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  min-height: var(--usine-header-banner-source-height, 480px);
  max-width: 100%;
  border-radius: var(--usine-header-banner-radius, 0px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  gap: 0;
}

/* Banner overlay must be source-driven; do not darken the image by default. */
.usine-bloc-header-01__layout--media-background::before {
  content: none;
}

/* Content sits above overlay */
.usine-bloc-header-01__layout--media-background .usine-bloc-header-01__content {
  position: relative;
  z-index: 2;
  inline-size: 100%;
  max-width: var(--section-max-width, 1312px);
  margin-inline: 0;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 80px 64px;
}

.usine-bloc-header-01__layout--media-background .usine-bloc-header-01__inner-wrapper {
  align-items: flex-start;
}

.usine-bloc-header-01__layout--media-background .usine-bloc-header-01__text-group {
  align-items: flex-start;
}

/* Override text colors to white for banner mode */
.usine-bloc-header-01__layout--media-background .usine-bloc-header-01__tagline,
.usine-bloc-header-01__layout--media-background .usine-bloc-header-01__title,
.usine-bloc-header-01__layout--media-background .usine-bloc-header-01__description,
.usine-bloc-header-01__layout--media-background .usine-bloc-header-01__feature-text,
.usine-bloc-header-01__layout--media-background .usine-bloc-header-01__review-score,
.usine-bloc-header-01__layout--media-background .usine-bloc-header-01__review-count {
  color: #FFFFFF;
}

/* Buttons centered in banner */
.usine-bloc-header-01__layout--media-background .usine-bloc-header-01__buttons {
  justify-content: flex-start;
}

/* Primary button white on dark background */
.usine-bloc-header-01__layout--media-background .usine-bloc-header-01__btn--primary {
  background-color: #FFFFFF;
  color: #232425;
}

/* Secondary button white outline */
.usine-bloc-header-01__layout--media-background .usine-bloc-header-01__btn--secondary {
  background-color: transparent;
  color: #FFFFFF;
  border-color: #FFFFFF;
}

/* Features row centered in banner */
.usine-bloc-header-01__layout--media-background .usine-bloc-header-01__features {
  justify-content: flex-start;
}

/* Center-authored banner variants keep the centered composition expected by the source. */
.usine-bloc-header-01__layout--media-background .usine-bloc-header-01__content[style*="text-align: center"] {
  margin-inline: auto;
  align-items: center;
  justify-content: center;
}

.usine-bloc-header-01__layout--media-background .usine-bloc-header-01__content[style*="text-align: center"] .usine-bloc-header-01__inner-wrapper,
.usine-bloc-header-01__layout--media-background .usine-bloc-header-01__content[style*="text-align: center"] .usine-bloc-header-01__text-group {
  align-items: center;
}

.usine-bloc-header-01__layout--media-background .usine-bloc-header-01__content[style*="text-align: center"] .usine-bloc-header-01__buttons,
.usine-bloc-header-01__layout--media-background .usine-bloc-header-01__content[style*="text-align: center"] .usine-bloc-header-01__features {
  justify-content: center;
}

/* Review badge on banner */
.usine-bloc-header-01__layout--media-background .usine-bloc-header-01__review {
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
}

/* Banner responsive - tablet */
@media (max-width: 1024px) {
  .usine-bloc-header-01__layout--media-background {
    min-height: 400px;
  }
  .usine-bloc-header-01__layout--media-background .usine-bloc-header-01__content {
    padding: 60px 32px;
  }
}

/* Banner responsive - mobile */
@media (max-width: 768px) {
  .usine-bloc-header-01__layout--media-background {
    min-height: 320px;
  }
  .usine-bloc-header-01__layout--media-background .usine-bloc-header-01__content {
    padding: 48px 20px;
  }
  .usine-bloc-header-01__layout--media-background .usine-bloc-header-01__title {
    font-size: 32px;
  }
}

/* ============================================
   CONTENT COLUMN
   Figma: comp_content_header_group
   ============================================ */

.usine-bloc-header-01__content {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;           /* RC-11: vertically center text in its half */
  gap: 40px;                         /* FIX: reduced from 56px to tighten content spacing */
}

/* RC-HEADER-RADIUS: border-radius only when content-panel has its own bg distinct
   from the image side. When the bg is continuous (same as section bg), radius breaks
   the visual continuity that the maquette expects. The radius comes from ACF
   inline styles via usine_auto_styles when explicitly set. */
.usine-bloc-header-01__content--panel {
  align-self: stretch;
  justify-content: center;
  padding: 48px 56px;
  border-radius: 0;
  box-sizing: border-box;
}

/* Wrapped-shell heroes visually keep a narrow image inset inside the colored
   shell, while the text column uses slightly tighter horizontal padding. */
.usine-bloc-header-01--wrapped-shell .usine-bloc-header-01__content--panel {
  padding-inline: 48px;
}

.usine-bloc-header-01--wrapped-shell .usine-bloc-header-01__layout--media-right > .usine-bloc-header-01__media {
  padding: 16px 16px 16px 0;
  box-sizing: border-box;
}

.usine-bloc-header-01--wrapped-shell .usine-bloc-header-01__layout--media-left > .usine-bloc-header-01__media {
  padding: 16px 0 16px 16px;
  box-sizing: border-box;
}

/* Inner wrapper: content_all + actions + review */
.usine-bloc-header-01__inner-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* P11: when content has text-align center (from ACF), center flex children too */
.usine-bloc-header-01__content[style*="text-align: center"] .usine-bloc-header-01__inner-wrapper {
  align-items: center;
}
.usine-bloc-header-01__content[style*="text-align: center"] .usine-bloc-header-01__buttons {
  justify-content: center;
}

/* Text group: tagline + headline + description */
.usine-bloc-header-01__text-group {
  display: flex;
  flex-direction: column;
  gap: 20px;                         /* RC-26: increased from 16px for better title/desc/CTA spacing */
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

/* Tagline - Figma: Texte/P3_bold (16px, 700, Roboto) */
.usine-bloc-header-01__tagline {
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: inherit;
  margin: 0;
}

/* Title - Figma: Title Desktop/H1 (52px, 500, Bricolage Grotesque) */
.usine-bloc-header-01__title {
  font-family: var(--usine-font-family-heading, 'Bricolage Grotesque', sans-serif);
  font-weight: 500;
  font-size: 52px;
  line-height: 1.0;                  /* Figma token: lineHeight 100% */
  letter-spacing: 0;
  color: inherit;
  margin: 0;
  /* HEADER01-WORDBREAK-001 : `break-word` coupait au milieu des mots
     ("Luxopuncture ®"). `overflow-wrap` suffit : il ne casse que les mots
     réellement plus longs que la ligne. */
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

/* Description - Figma: Texte/P2_reg (18px, 400, Roboto) */
.usine-bloc-header-01__description {
  font-family: inherit;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: inherit;
  margin: 0;
}

.usine-bloc-header-01__description p {
  margin: 0 0 16px 0;
}

.usine-bloc-header-01__description p:last-child {
  margin-bottom: 0;
}

/* ============================================
   BUTTONS
   Figma: el_primary_button, el_secondary_button
   ============================================ */

.usine-bloc-header-01__buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 16px;                         /* Figma: gap-16px */
  /* P11: respect parent text-align center for CTA alignment */
  justify-content: inherit;
}

/* Button base */
.usine-bloc-header-01__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;                      /* Figma: h-48px */
  padding: 8px 24px;                 /* Figma: py-8px px-24px */
  font-family: inherit;
  font-weight: 400;
  font-size: 20px;                   /* Figma: 20px */
  line-height: 1.5;
  text-decoration: none;
  border-radius: inherit;
  cursor: pointer;
  box-sizing: border-box;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
}

/* Primary button — inline styles from usine_render_button pilot colors */
.usine-bloc-header-01__btn--primary {
  background-color: inherit;
  color: inherit;
  border: none;
}

/* Secondary button — inline styles pilot colors */
.usine-bloc-header-01__btn--secondary {
  background-color: transparent;
  color: inherit;
  border: 1px solid currentColor;
}

/* Button hover effects */
.usine-bloc-header-01__btn:hover,
.usine-bloc-header-01__btn:focus {
  transform: translateY(-2px);
}

.usine-bloc-header-01__btn:active {
  transform: translateY(0);
}

/* Button focus (accessibility) */
.usine-bloc-header-01__btn:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Button icons */
.usine-bloc-header-01__btn .btn-icon-left,
.usine-bloc-header-01__btn .btn-icon-right {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ============================================
   REVIEW - Figma: subcomp_review
   ============================================ */

.usine-bloc-header-01__review {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: none;
  border-radius: 9999px;
  background-color: #F9FAFB;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  width: fit-content;
}

/* Legacy .review class (for render.php usine_render_review) */
.usine-bloc-header-01__review .review {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 16px;
  padding: 0;
  border: none;
}

.usine-bloc-header-01__review-logo {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.usine-bloc-header-01__review-logo svg,
.usine-bloc-header-01__review-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.usine-bloc-header-01__review-score {
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  color: inherit;
}

.usine-bloc-header-01__review-stars {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 2px;                          /* Figma: gap-2px */
}

/* Legacy selector */
.review__stars {
  display: flex;
  gap: 2px;
}

.usine-bloc-header-01__review-star {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Legacy selector */
.review__stars .star-icon {
  width: 24px;
  height: 24px;
}

.usine-bloc-header-01__review-count {
  font-family: inherit;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  color: inherit;
}

/* ============================================
   FEATURES / ICON+TEXT - Figma: layout_spacer_repeater
   ============================================ */

.usine-bloc-header-01__features {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px 32px;                    /* Figma: row-gap 16px, col-gap 32px */
  align-items: flex-start;
  align-content: flex-start;
  width: 100%;
}

.usine-bloc-header-01__features--surface {
  padding: 16px 24px;
  border-radius: 8px;
  background-color: #F7F6F2;
}

/* Legacy class */
.usine-bloc-header-01__icon-texts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  width: 100%;
}

.usine-bloc-header-01__feature {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 8px;                          /* Figma: gap-8px */
  width: 228px;                      /* Figma: w-228px */
  max-width: 100%;
}

.usine-bloc-header-01__features--surface .usine-bloc-header-01__feature {
  width: auto;
  flex: 0 1 auto;
}

/* Legacy class */
.icon-text {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 228px;
  max-width: 100%;
}

.usine-bloc-header-01__feature-icon {
  width: 24px;                       /* Figma: 24x24 */
  height: 24px;
  flex-shrink: 0;
}

/* Legacy class */
.icon-text__icon {
  width: var(--us-icon-size, 24px);
  height: var(--us-icon-size, 24px);
  flex-shrink: 0;
  box-sizing: border-box;
}

.icon-text__icon.icon--wrapped {
  box-sizing: content-box;
}

.usine-bloc-header-01__feature-text {
  font-family: inherit;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  color: inherit;
}

/* ============================================
   MEDIA (IMAGE) - Figma: subcomp_placeholder_square
   ============================================ */

.usine-bloc-header-01__media {
  flex: 1 1 0%;                      /* RC-11: true 50/50 split with content */
  min-width: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.usine-bloc-header-01__media--source-sized {
  align-content: center;
}

.usine-bloc-header-01__media .usine-bloc-header-01__image-wrapper:only-child {
  grid-column: 1 / -1;
}

.usine-bloc-header-01__image-wrapper {
  width: 100%;
  height: var(--usine-header-image-source-height, auto);
  aspect-ratio: var(--usine-header-image-aspect-ratio, 1 / 1);
  overflow: hidden;
}

.usine-bloc-header-01__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 0;                  /* Figma: no border-radius */
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.usine-bloc-header-01__image.is-loaded {
  opacity: 1;
  transform: scale(1);
}

/* Placeholder (empty state) */
.usine-bloc-header-01__placeholder {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at top left, rgba(36, 100, 209, 0.18), transparent 38%),
    linear-gradient(135deg, #f8fafc 0%, #e7edf6 100%);
  border: 1px solid #d7e0ea;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.usine-bloc-header-01__placeholder-icon {
  width: 64px;
  height: 64px;
  opacity: 0.62;
  color: #5f6f86;
}

/* ============================================
   ALIGNMENTS (WordPress support)
   ============================================ */

.usine-bloc-header-01.alignwide {
  max-width: 1400px;
}

.usine-bloc-header-01.alignfull {
  max-width: none;
}

.usine-bloc-header-01.alignfull .usine-bloc-header-01__layout {
  max-width: none;
}

/* RC-26 THG-26/31: edge-to-edge sections may intentionally zero both axes, but
   wrapped-shell heroes still need horizontal breathing room on the outer shell. */
.usine-bloc-header-01:not(.usine-bloc-header-01--wrapped-shell)[style*="padding-top: 0"][style*="padding-bottom: 0"] {
  padding-inline: 0;
}

/* Some exports zero the section vertical padding while still authoring a
   wrapped inner shell. Preserve a visible outer frame around that shell. */
.usine-bloc-header-01--wrapped-shell-padding-absorbed[style*="padding-top: 0"][style*="padding-bottom: 0"] {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
  padding-inline: 32px;
}

/* ============================================
   RESPONSIVE - TABLET (max-width: 1024px)
   ============================================ */

@media (max-width: 1024px) {
  .usine-bloc-header-01 {
    padding: 64px var(--section-padding-x, 64px);
  }

  .usine-bloc-header-01--wrapped-shell-padding-absorbed[style*="padding-top: 0"][style*="padding-bottom: 0"] {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
    padding-inline: 24px;
  }

  .usine-bloc-header-01__layout {
    --usine-header-layout-gap: 48px;
    gap: 48px;
  }

  .usine-bloc-header-01__layout--content-panel {
    gap: 0;
  }

  .usine-bloc-header-01__content {
    max-width: 100%;
  }

  .usine-bloc-header-01__feature,
  .icon-text {
    width: 100%;
  }
}

/* ============================================
   RESPONSIVE - MOBILE (max-width: 768px)
   ============================================ */

@media (max-width: 768px) {
  .usine-bloc-header-01 {
    padding: 48px var(--section-padding-x, 64px);
  }

  .usine-bloc-header-01.usine-bloc-header-01--banner-mode {
    padding: 0;
  }

  .usine-bloc-header-01--banner-mode .usine-bloc-header-01__layout--media-background {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 !important;
  }

  .usine-bloc-header-01--wrapped-shell-padding-absorbed[style*="padding-top: 0"][style*="padding-bottom: 0"] {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    padding-inline: 20px;
  }

  .usine-bloc-header-01__layout {
    flex-direction: column;
    --usine-header-layout-gap: 24px;
    gap: 24px;
    min-height: 0;                   /* RC-11: no forced min-height when stacked */
  }

  .usine-bloc-header-01__layout--media-left > .usine-bloc-header-01__content,
  .usine-bloc-header-01__layout--media-left > .usine-bloc-header-01__media,
  .usine-bloc-header-01__layout--media-right > .usine-bloc-header-01__content,
  .usine-bloc-header-01__layout--media-right > .usine-bloc-header-01__media {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
  }

  .usine-bloc-header-01__layout--content-panel {
    gap: 0;
  }

  .usine-bloc-header-01__content--panel {
    padding: 32px 24px;
  }

  .usine-bloc-header-01--wrapped-shell .usine-bloc-header-01__layout--media-right > .usine-bloc-header-01__media,
  .usine-bloc-header-01--wrapped-shell .usine-bloc-header-01__layout--media-left > .usine-bloc-header-01__media {
    padding: 0;
  }

  .usine-bloc-header-01__content {
    gap: 32px;
  }

  .usine-bloc-header-01__inner-wrapper {
    gap: 24px;
  }

  .usine-bloc-header-01__text-group {
    gap: 16px;
  }

  .usine-bloc-header-01__title {
    font-size: 36px;
  }

  .usine-bloc-header-01__buttons {
    flex-direction: column;
    width: 100%;
  }

  .usine-bloc-header-01__btn,
  .usine-bloc-header-01 .btn {
    width: 100%;
    justify-content: center;
  }

  .usine-bloc-header-01__review {
    flex-wrap: wrap;
  }

  .usine-bloc-header-01__features,
  .usine-bloc-header-01__icon-texts {
    flex-direction: column;
    gap: 16px;
  }

  .usine-bloc-header-01__media {
    width: 100%;
    order: -1;
  }

  .usine-bloc-header-01__image-wrapper {
    height: auto;
    aspect-ratio: auto;
  }

  .usine-bloc-header-01__image {
    height: auto;
  }

  .usine-bloc-header-01__media--source-sized .usine-bloc-header-01__image-wrapper {
    height: auto !important;
    aspect-ratio: var(--usine-header-image-mobile-aspect-ratio, 640 / 453);
    border-radius: var(--usine-header-image-mobile-border-radius, inherit) !important;
  }

  .usine-bloc-header-01__media--source-sized .usine-bloc-header-01__image,
  .usine-bloc-header-01__media--source-sized .usine-image-placeholder {
    width: 100%;
    height: 100% !important;
    border-radius: var(--usine-header-image-mobile-border-radius, inherit) !important;
    object-fit: cover;
  }
}

@media (max-width: 480px) {
  .usine-bloc-header-01__content--panel {
    padding: 24px 20px;
  }

  .usine-bloc-header-01--wrapped-shell .usine-bloc-header-01__content--panel {
    padding-inline: 20px;
  }
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.usine-bloc-header-01.animate-in {
  animation: fadeInUp 0.8s ease forwards;
}

/* Sequential child animations */
.usine-bloc-header-01.animate-in .usine-bloc-header-01__tagline {
  animation: fadeInUp 0.8s ease 0.1s backwards;
}

.usine-bloc-header-01.animate-in .usine-bloc-header-01__title {
  animation: fadeInUp 0.8s ease 0.2s backwards;
}

.usine-bloc-header-01.animate-in .usine-bloc-header-01__description {
  animation: fadeInUp 0.8s ease 0.3s backwards;
}

.usine-bloc-header-01.animate-in .usine-bloc-header-01__buttons {
  animation: fadeInUp 0.8s ease 0.4s backwards;
}

.usine-bloc-header-01.animate-in .usine-bloc-header-01__review {
  animation: fadeInUp 0.8s ease 0.5s backwards;
}

.usine-bloc-header-01.animate-in .usine-bloc-header-01__features,
.usine-bloc-header-01.animate-in .usine-bloc-header-01__icon-texts {
  animation: fadeInUp 0.8s ease 0.6s backwards;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .usine-bloc-header-01 {
    page-break-inside: avoid;
  }

  .usine-bloc-header-01__btn,
  .usine-bloc-header-01 .btn,
  .usine-bloc-header-01__image {
    box-shadow: none !important;
  }
}

/* ============================================
   REDUCED MOTION (accessibility)
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .usine-bloc-header-01,
  .usine-bloc-header-01 * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .usine-bloc-header-01__btn:hover,
  .usine-bloc-header-01 .btn:hover {
    transform: none;
  }
}

/* ==========================================================================
   HEADER01-MOBILE-001 : héros sur mobile
   Constats mesurés avant correction (écran 430px) :
   - le média portait `order: -1` : l'image passait avant le titre
   - trois retraits imbriqués (section 16px + layout 24px + contenu 20px)
     mangeaient 120px de largeur utile
   - le bloc média faisait 637px de haut pour une image de 348px, le reste
     étant du vide (`align-content: center` sur une piste plus haute)
   - le titre à 42px cassait "Luxopuncture®" en deux lignes
   ========================================================================== */
@media (max-width: 1024px) {
    /* Aligné sur les autres blocs : ceux-ci n'ont qu'un seul retrait, celui de
       la section (16px). Le héros en cumulait trois (section + layout + panneau),
       ce qui décalait son texte de 40px au lieu de 16px. */
    .usine-bloc-header-01 {
        padding: 24px 16px;
    }

    /* Le texte d'abord, l'image ensuite. */
    .usine-bloc-header-01__media {
        order: 1;
        width: 100%;
        padding: 0;
        align-content: start;
        min-height: 0;
    }

    .usine-bloc-header-01__content {
        order: 0;
    }

    .usine-bloc-header-01__layout {
        padding: 0 !important;
        gap: 24px;
    }

    .usine-bloc-header-01--wrapped-shell .usine-bloc-header-01__layout--media-right > .usine-bloc-header-01__media,
    .usine-bloc-header-01--wrapped-shell .usine-bloc-header-01__layout--media-left > .usine-bloc-header-01__media {
        padding: 0;
    }

    /* Trois retraits s'additionnaient (section + layout + panneau) : le texte
       se retrouvait tassé au centre alors qu'il restait de la place de chaque
       côté. Un seul retrait utile est conservé. */
    .usine-bloc-header-01__content--panel,
    .usine-bloc-header-01--wrapped-shell .usine-bloc-header-01__content--panel {
        padding: 24px 0;
        gap: 20px;
    }

    /* HEADER01-MOBILE-PANEL-001
       Sauf en variante panneau : là, le bloc coloré est le cadre lui-même, et
       un retrait horizontal nul collait titre, texte et bouton contre son bord
       arrondi, des deux côtés. Le retrait passe donc sur le panneau, à la
       valeur mobile déjà déclarée par le gabarit, et le contenu repart de zéro
       pour ne pas le cumuler. `!important` est requis : le retrait de la mise
       en page est verrouillé plus haut dans ce même palier. */
    .usine-bloc-header-01__layout--content-panel {
        padding: var(--usine-wrapper-container-mobile-padding, 24px) !important;
        gap: 24px;
    }

    .usine-bloc-header-01__layout--content-panel > .usine-bloc-header-01__content--panel {
        padding: 0 !important;
    }

    .usine-bloc-header-01__inner-wrapper {
        gap: 16px;
    }

    /* Le média épouse l'image au lieu de réserver une piste plus haute. */
    .usine-bloc-header-01__media--source-sized {
        align-content: start;
    }

    .usine-bloc-header-01__media--source-sized .usine-bloc-header-01__image-wrapper {
        height: auto !important;
        aspect-ratio: var(--usine-header-image-mobile-aspect-ratio, 4 / 3);
    }

    .usine-bloc-header-01__image-wrapper .usine-bloc-header-01__image,
    .usine-bloc-header-01__image-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* La taille du titre principal est fixee par assets/css/joallya-typography.css,
       chargee en dernier : elle doit rester la seule source pour l'echelle des
       H1 et H2 sur mobile et tablette. */
}

/* HEADER01-MOBILE-002 : la hauteur de source réservée au média (utile en
   deux colonnes sur desktop) laissait ~280px de vide sous l'image une fois
   la mise en page empilée. */
@media (max-width: 1024px) {
    .usine-bloc-header-01__layout > .usine-bloc-header-01__media,
    .usine-bloc-header-01__layout--source-sized-media > .usine-bloc-header-01__media,
    .usine-bloc-header-01__layout--media-right > .usine-bloc-header-01__media,
    .usine-bloc-header-01__layout--media-left > .usine-bloc-header-01__media {
        min-height: 0 !important;
        height: auto !important;
    }
}

/* ==========================================================================
   HEADER01-MOBILE-003
   1) Le visuel du héros porte un pillarbox blanc intégré au fichier source
      (mesuré : 118px à gauche, 120px à droite sur 768px de large, soit ~16%
      de chaque côté ; rien en haut ni en bas). Aucun réglage CSS ne peut
      l'effacer : on le recadre. Le correctif durable reste de réexporter
      l'image sans ses marges — retirer alors ce bloc.
   2) `text-wrap: balance` répartit les mots du titre sur les lignes au lieu de
      laisser un « la » seul avant un mot long.
   ========================================================================== */
@media (max-width: 1024px) {
    .usine-bloc-header-01__image-wrapper {
        overflow: hidden;
    }

    /* Le pillarbox blanc a ete retire du fichier source lui-meme : le
       recadrage CSS qui vivait ici n'a plus lieu d'etre. L'image remplit son
       cadre normalement. */

    .usine-bloc-header-01__headline {
        text-wrap: balance;
    }
}

/* ==========================================================================
   HEADER01-TABLET-001
   Les règles d'empilement ci-dessus valaient jusqu'à 768px seulement : sur un
   iPad portrait (820 à 1024px) le héros restait en deux colonnes, avec une
   colonne de texte si étroite que « Luxopuncture® » se coupait en trois. Elles
   couvrent désormais toute la plage tablette ; il reste à leur redonner l'air
   qu'un mobile n'a pas : retraits plus larges, titre plus généreux, et une
   ligne de texte qui ne dépasse pas la longueur confortable de lecture.
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
    .usine-bloc-header-01 {
        padding: 48px 40px;
    }

    /* C'est `flex-direction: column` qui empile réellement, et il vivait dans le
       palier 768px : sans lui, changer l'ordre ne faisait que permuter deux
       colonnes qui restaient côte à côte. */
    .usine-bloc-header-01__layout {
        flex-direction: column;
        min-height: 0;
        gap: 40px;
    }

    .usine-bloc-header-01__layout--media-left > .usine-bloc-header-01__content,
    .usine-bloc-header-01__layout--media-left > .usine-bloc-header-01__media,
    .usine-bloc-header-01__layout--media-right > .usine-bloc-header-01__content,
    .usine-bloc-header-01__layout--media-right > .usine-bloc-header-01__media {
        flex: 1 1 auto;
        width: 100%;
        max-width: none;
    }

    /* Les deux boutons débordaient de la colonne : ils gardent leur largeur
       naturelle et passent à la ligne si besoin, plutôt que d'être rognés. */
    .usine-bloc-header-01__buttons {
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }

    .usine-bloc-header-01__btn,
    .usine-bloc-header-01 .btn {
        width: auto;
    }

    /* Le panneau coloré portait `padding: 0` : titre, texte et bouton venaient
       buter contre son bord arrondi, et le média débordait de l'arrondi à
       droite. Le retrait est repris sur le panneau lui-même, à la valeur
       tablette déjà déclarée par le gabarit. `!important` est nécessaire : le
       palier mobile pose `padding: 0 !important` sur la mise en page. */
    .usine-bloc-header-01__layout--content-panel {
        padding: var(--usine-wrapper-container-padding-tablet, 48px) !important;
        gap: 32px;
    }

    /* Le retrait vit sur le panneau, pas sur le contenu : le cumuler décalerait
       le texte deux fois. */
    .usine-bloc-header-01__layout--content-panel > .usine-bloc-header-01__content--panel {
        padding: 0 !important;
    }

    .usine-bloc-header-01__content--panel {
        gap: 24px;
    }

    /* La taille du titre principal est fixee par assets/css/joallya-typography.css,
       chargee en dernier : elle doit rester la seule source pour l'echelle des
       H1 et H2 sur mobile et tablette. */

    /* Au-delà d'environ 70 caractères par ligne, l'œil perd le début de la
       ligne suivante : on borne la mesure sans centrer le bloc. */
    .usine-bloc-header-01__tagline,
    .usine-bloc-header-01__title,
    .usine-bloc-header-01__description {
        max-width: 34em;
    }

    /* L'image reprend une proportion paysage : en 4/3 pleine largeur elle
       occupait la moitié de la hauteur d'écran à elle seule. */
    .usine-bloc-header-01__media--source-sized .usine-bloc-header-01__image-wrapper,
    .usine-bloc-header-01__image-wrapper {
        aspect-ratio: 16 / 10;
        height: auto !important;
        min-height: 0 !important;
    }

    /* L'image garde sinon la hauteur du fichier source (653px ici) et déborde
       par le bas de son cadre : le sujet se retrouve rogné d'un seul côté au
       lieu d'être centré. */
    .usine-bloc-header-01__image-wrapper .usine-bloc-header-01__image,
    .usine-bloc-header-01__image-wrapper img,
    .usine-bloc-header-01__media--source-sized .usine-bloc-header-01__image {
        height: 100% !important;
        object-fit: cover;
        object-position: center;
    }
}

/* ==========================================================================
   HEADER01-PANEL-RADIUS-MOBILE-001
   Le panneau coloré est saisi avec un rayon de 64px, calibré sur sa largeur
   desktop. Réduit à la largeur d'un téléphone, le même arrondi mange une part
   trop visible des angles et arrondit le bloc au point de lui faire perdre son
   assise. On lui retire 16px sur mobile ; le réglage saisi reste la référence
   pour les écrans plus larges.
   ========================================================================== */
@media (max-width: 768px) {
    .usine-bloc-header-01__layout--content-panel {
        border-radius: 48px !important;
    }
}

/* ==========================================================================
   HEADER01-LAYOUT-PADDING-001
   Le retrait vertical du conteneur venait du drapeau « wrapper » : celui-ci
   emettait les variables --usine-wrapper-container-padding-*, qui valaient
   64px sur desktop. Le wrapper etant retire sur tous les heros, le conteneur
   se retrouvait sans aucun retrait, texte et image colles aux bords de la
   section. On lui rend une respiration fixe de 32px en haut et en bas.
   ========================================================================== */
.usine-bloc-header-01__layout {
    padding-block: 32px;
}

/* ==========================================================================
   HEADER01-PANEL-INSET-001
   Dans la variante panneau, le visuel venait buter contre le bord du bloc
   coloré tandis que le texte, lui, portait son propre retrait de 48 par 56px :
   deux marges différentes dans un même cadre, et une image collée au bord.

   Sur desktop, une seule valeur gouverne tout — 32px de retrait autour du
   panneau et 32px entre l'image et le texte. Le retrait propre au contenu est
   neutralisé pour ne pas s'ajouter à celui du panneau. Les paliers mobile et
   tablette gardent leurs propres réglages, définis plus haut.
   ========================================================================== */
@media (min-width: 1025px) {
    .usine-bloc-header-01__layout--content-panel {
        padding: 32px;
        --usine-header-layout-gap: 32px;
        gap: 32px;
    }

    .usine-bloc-header-01__layout--content-panel > .usine-bloc-header-01__content--panel {
        padding: 0;
    }
}

/* ==========================================================================
   HEADER01-LAYOUT-PADDING-002
   Le retrait vertical du conteneur vaut 32px sur tous les formats. Les paliers
   tablette et mobile posent leur retrait avec le raccourci `padding`, en
   !important : cette règle vient donc en dernier pour trancher l'axe vertical,
   sans toucher aux valeurs latérales, ajustées séparément pour chaque format
   (32px desktop, 48px tablette, 24px mobile).
   ========================================================================== */
.usine-bloc-header-01__layout,
.usine-bloc-header-01__layout--content-panel {
    padding-block: 32px !important;
}