/**
 * 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: 32px;
  gap: var(--usine-header-layout-gap); /* RC-11: 80px trop large vs maquette, 32px plus fidele */
  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, 32px)) / 2);
  max-width: calc((100% - var(--usine-header-layout-gap, 32px)) / 2);
}

/* 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: center;
  justify-content: center;
  text-align: center;
  position: relative;
  min-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;
  align-items: center;
  max-width: 800px;
  padding: 80px 40px;
}

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

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

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

/* 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: 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;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* 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 .usine-bloc-header-01__image-wrapper:only-child {
  grid-column: 1 / -1;
}

.usine-bloc-header-01__image-wrapper {
  width: 100%;
  height: auto;
  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[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[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--wrapped-shell[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: 16 / 9;
  }
}

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