/**
 * Hero 6 Section - Dioqa UI Kit
 *
 * @package Dioqa_UI_Kit
 */

/* Section Container */
.hero-6-section {
  height: var(--section-height, 95vh);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  /* Variables CSS pour l'animation GSAP */
  --svg-translate-x: 0px;
  --svg-translate-y: 0px;
  --svg-rotate: 0deg;
  --svg-scale: 1;
}

/* Forme décorative SVG en background */
.hero-6-section::before {
  content: '';
  position: absolute;
  bottom: -200px;
  right: -200px;
  width: 900px;
  height: 900px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' fill-opacity='0.1' d='M52,-61.8C65.6,-50.6,73.6,-32.5,78,-12.9C82.4,6.6,83.2,27.6,74.3,42.8C65.4,58,46.7,67.4,27.5,73.7C8.2,79.9,-11.5,83,-27.5,76.7C-43.5,70.4,-55.7,54.8,-66.3,37.7C-76.9,20.6,-85.9,1.9,-84.5,-16.4C-83.1,-34.8,-71.3,-52.8,-55.5,-63.6C-39.6,-74.4,-19.8,-77.9,-0.3,-77.5C19.2,-77.2,38.4,-72.9,52,-61.8Z' transform='translate(100 100)' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
  transform: translateX(var(--svg-translate-x))
    translateY(var(--svg-translate-y)) rotate(var(--svg-rotate))
    scale(var(--svg-scale));
  transform-origin: center center;
  transition: transform 0.3s ease;
}

/* Deuxième forme SVG en haut à gauche */
.hero-6-section::after {
  content: '';
  position: absolute;
  top: -200px;
  left: -200px;
  width: 800px;
  height: 800px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' fill-opacity='0.1' d='M40,-56C54.3,-53,70,-46.1,74.9,-34.5C79.8,-22.8,73.9,-6.5,66.8,6.2C59.7,19,51.4,28.2,43.1,36.7C34.7,45.3,26.4,53.3,15.7,59C5,64.7,-8,68.1,-20.7,66.2C-33.3,64.4,-45.7,57.3,-56.7,47.5C-67.7,37.7,-77.3,25.1,-79.9,11.1C-82.5,-2.9,-78,-18.2,-72.4,-34.2C-66.8,-50.1,-60.1,-66.6,-47.9,-70.5C-35.6,-74.4,-17.8,-65.8,-2.5,-61.9C12.9,-58.1,25.7,-59,40,-56Z' transform='translate(100 100)' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: top left;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
  transform: translateX(var(--svg-translate-x))
    translateY(var(--svg-translate-y)) rotate(var(--svg-rotate))
    scale(var(--svg-scale));
  transform-origin: center center;
  transition: transform 0.3s ease;
}

/* Assurer que le contenu est au-dessus des backgrounds SVG */
.hero-6-section > .container {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Wrapper principal avec flexbox pour espacer contenu et image */
.hero-6-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  min-height: 0;
}

.hero-6-content {
  width: 100%;
}

/* Titre */
.hero-6-title {
  text-align: center;
}

.hero-6-title h1,
.hero-6-title h2,
.hero-6-title h3,
.hero-6-title h4,
.hero-6-title h5,
.hero-6-title h6 {
  color: var(--bs-gray-dark);
  font-family: var(--font-heading);
  font-size: var(--display-md);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  margin-bottom: 0;
}

/* Sous-titre */
.hero-6-subtitle {
  text-align: center;
}

.hero-6-subtitle p {
  color: var(--bs-gray-medium);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-style: normal;
  font-weight: 400;
  line-height: 1.875rem;
  margin-bottom: 0;
}

/* Boutons */
.hero-6-buttons {
  margin-top: 2rem;
  margin-bottom: 3.5rem;
}

/* Image wrapper - collée en bas */
.hero-6-image-wrapper {
  margin-top: auto;
  align-self: stretch;
  flex-shrink: 1;
  min-height: 0;
  overflow: hidden;
}

/* Image */
.hero-6-image {
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.hero-6-image img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom center;
  display: block;
  border-radius: 0;
}

/* Styles pour backgrounds sombres */
.hero-6-section.bg-primary .hero-6-title h1,
.hero-6-section.bg-primary .hero-6-title h2,
.hero-6-section.bg-primary .hero-6-title h3,
.hero-6-section.bg-primary .hero-6-title h4,
.hero-6-section.bg-primary .hero-6-title h5,
.hero-6-section.bg-primary .hero-6-title h6,
.hero-6-section.bg-secondary .hero-6-title h1,
.hero-6-section.bg-secondary .hero-6-title h2,
.hero-6-section.bg-secondary .hero-6-title h3,
.hero-6-section.bg-secondary .hero-6-title h4,
.hero-6-section.bg-secondary .hero-6-title h5,
.hero-6-section.bg-secondary .hero-6-title h6 {
  color: var(--color-white);
}

.hero-6-section.bg-primary .hero-6-subtitle p,
.hero-6-section.bg-secondary .hero-6-subtitle p {
  color: rgba(255, 255, 255, 0.9);
}

/* Responsive */
@media (max-width: 991px) {
  /* Appliquer la hauteur tablette si définie */
  .hero-6-section {
    height: var(--section-height-tablet, 80vh);
  }

  .hero-6-content-wrapper {
    padding-top: 2rem;
  }

  .hero-6-title h1,
  .hero-6-title h2,
  .hero-6-title h3,
  .hero-6-title h4,
  .hero-6-title h5,
  .hero-6-title h6 {
    font-size: var(--display-sm);
  }

  .hero-6-subtitle p {
    font-size: var(--text-lg);
  }

  /* SVG backgrounds plus petits sur tablette */
  .hero-6-section::before {
    width: 700px;
    height: 700px;
  }

  .hero-6-section::after {
    width: 600px;
    height: 600px;
  }
}

@media (max-width: 767px) {
  /* Appliquer la hauteur mobile si définie */
  .hero-6-section {
    height: var(--section-height-mobile, 70vh);
  }

  .hero-6-content-wrapper {
    padding-top: 1.5rem;
  }

  .hero-6-title h1,
  .hero-6-title h2,
  .hero-6-title h3,
  .hero-6-title h4,
  .hero-6-title h5,
  .hero-6-title h6 {
    font-size: var(--display-sm-mobile);
  }

  .hero-6-subtitle p {
    font-size: var(--text-base);
  }

  .hero-6-buttons {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
  }

  /* Image full width en mobile - sort du container */
  .hero-6-image-wrapper {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
  }

  .hero-6-image {
    max-width: 100%;
  }

  /* SVG backgrounds encore plus petits sur mobile */
  .hero-6-section::before {
    width: 500px;
    height: 500px;
  }

  .hero-6-section::after {
    width: 450px;
    height: 450px;
  }
}