/**
 * Hero 5 Section - Dioqa UI Kit
 * Hero avec mask diagonal et overlay
 *
 * @package Dioqa_UI_Kit
 */

/* Section Container */
.hero-5-section {
  background-color: #ffffff;
  position: relative;
  overflow: hidden;
}

/* Wrapper principal */
.hero-5-wrapper {
  position: relative;
  min-height: var(--section-height, 95vh);
  display: flex;
  align-items: center;
}

/* Background wrapper avec mask */
.hero-5-bg-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Image de fond avec clip-path diagonal */
.hero-5-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Mask diagonal avec courbe SVG */
  clip-path: url(#hero5Mask);
}

.hero-5-bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay violet/primaire sur l'image */
.hero-5-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bs-primary);
  opacity: 0.85;
}

/* Contenu texte */
.hero-5-content {
  position: relative;
  z-index: 2;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 35px;
  padding-top: var(--padding-top, 5rem);
  padding-bottom: var(--padding-bottom, 5rem);
}

/* Small text */
.hero-5-small-text {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
  color: #ffffff;
  letter-spacing: 0.5px;
}

/* Titre */
.hero-5-title h1,
.hero-5-title h2,
.hero-5-title h3,
.hero-5-title h4,
.hero-5-title h5,
.hero-5-title h6,
.hero-5-title p {
  font-family: var(--font-heading);
  font-size: 54px;
  font-weight: 700;
  line-height: normal;
  color: #ffffff;
  margin: 0;
}

/* Mots en blanc dans le titre */
.hero-5-title .text-white,
.hero-5-title span[style*='color'] {
  color: #ffffff !important;
}

/* Texte descriptif */
.hero-5-text p {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  color: #ffffff;
  margin: 0;
}

/* Bouton */
.hero-5-button {
  display: flex;
  gap: 15px;
}

/* Responsive - Tablette */
@media (max-width: 991.98px) {
  .hero-5-title h1,
  .hero-5-title h2,
  .hero-5-title h3,
  .hero-5-title h4,
  .hero-5-title h5,
  .hero-5-title h6,
  .hero-5-title p {
    font-size: 42px;
  }
}

/* Responsive - Mobile */
@media (max-width: 767.98px) {
  /* Adaptation du padding sur mobile (x0.6) */
  .hero-5-content {
    padding-top: calc(var(--padding-top, 5rem) * 0.6);
    padding-bottom: calc(var(--padding-bottom, 5rem) * 0.6);
    gap: 25px;
  }

  .hero-5-small-text {
    font-size: 14px;
  }

  .hero-5-title h1,
  .hero-5-title h2,
  .hero-5-title h3,
  .hero-5-title h4,
  .hero-5-title h5,
  .hero-5-title h6,
  .hero-5-title p {
    font-size: 32px;
  }

  .hero-5-text p {
    font-size: 14px;
  }
}