/**
 * Content Section 6 - Contenu + liste de features avec icônes + image en dessous
 *
 * Layout: Texte + bouton à gauche (col-lg-6) + features avec icônes à droite (col-lg-5 offset-lg-1)
 * Fonctionnalités:
 * - Contenu principal avec surtitre, titre, description et bouton
 * - Liste de features avec icône, titre et description
 * - Image en dessous du contenu
 * - Animation au scroll
 * - Système de couleurs personnalisables
 *
 * @package Dioqa_UI_Kit
 */

/* ============================================
   Section Container
   ============================================ */

.content-section-6 {
  overflow: visible;
}

/* Appliquer le padding dynamique sur la section */
.content-section-6[style*='--padding-top'] {
  padding-top: var(--padding-top);
}

.content-section-6[style*='--padding-bottom'] {
  padding-bottom: var(--padding-bottom);
}

/* Fallback si pas de padding défini */
.content-section-6:not([style*='--padding-top']) {
  padding-top: 5rem;
}

.content-section-6:not([style*='--padding-bottom']) {
  padding-bottom: 5rem;
}

/* Conteneur avec background - padding fixe intérieur */
.content-6-text-wrapper {
  border-radius: 0;
  padding-top: 5rem;
  padding-bottom: 10rem;
}

.content-6-text-wrapper .row {
  align-items: start;
}

/* ============================================
   Left Column - Content Area
   ============================================ */

.content-6-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Surtitre */
.content-6-surtitre {
  font-family: var(--font-body, 'Work Sans', sans-serif);
  font-weight: 600;
  font-size: var(--text-sm, 14px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary, #002baa);
  margin: 0;
}

/* Title */
.content-6-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 600;
  font-size: var(--text-4xl, 40px);
  line-height: 1.2;
  margin: 0;
}

/* Text */
.content-6-text {
  font-family: var(--font-body, 'Work Sans', sans-serif);
  font-weight: 400;
  font-size: var(--text-lg, 18px);
  line-height: 1.6;
  margin: 0;
}

.content-6-text p {
  margin: 0 0 1rem;
}

.content-6-text p:last-child {
  margin-bottom: 0;
}

/* Button Container */
.content-6-button {
  margin-top: 8px;
}

/* ============================================
   Right Column - Features Grid
   ============================================ */

.content-6-features {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Individual Feature */
.content-6-feature {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Animation déclenchée par intersection observer */
.content-6-features.is-visible .content-6-feature {
  opacity: 1;
  transform: translateX(0);
}

/* Délai progressif pour chaque feature - apparition séquentielle */
.content-6-features.is-visible .content-6-feature:nth-child(1) {
  transition-delay: 0s;
}

.content-6-features.is-visible .content-6-feature:nth-child(2) {
  transition-delay: 0.15s;
}

.content-6-features.is-visible .content-6-feature:nth-child(3) {
  transition-delay: 0.3s;
}

.content-6-features.is-visible .content-6-feature:nth-child(4) {
  transition-delay: 0.45s;
}

.content-6-features.is-visible .content-6-feature:nth-child(5) {
  transition-delay: 0.6s;
}

.content-6-features.is-visible .content-6-feature:nth-child(6) {
  transition-delay: 0.75s;
}

/* ============================================
   Feature Icon
   ============================================ */

.content-6-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  margin-right: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background-color: #ffffff;
  border: 1px solid #d5d7da;
  box-shadow: 0px 0px 0px 1px inset rgba(10, 13, 18, 0.18),
    0px -2px 0px 0px inset rgba(10, 13, 18, 0.05);
}

.content-6-icon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* ============================================
   Feature Content (Text Area)
   ============================================ */

.content-6-feature-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Feature Title */
.content-6-feature-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 600;
  font-size: var(--text-lg, 18px);
  line-height: 28px;
  margin: 0;
}

.content-6-feature-title p {
  margin: 0;
}

/* Feature Description */
.content-6-feature-description {
  font-family: var(--font-body, 'Work Sans', sans-serif);
  font-weight: 400;
  font-size: var(--text-base, 16px);
  line-height: 24px;
  margin: 0;
}

.content-6-feature-description p {
  margin: 0 0 0.5rem;
}

.content-6-feature-description p:last-child {
  margin-bottom: 0;
}

/* ============================================
   Image Section (Bottom)
   ============================================ */

.content-6-image-container {
  margin-top: -6rem;
}

.content-6-image {
  width: 100%;
  position: relative;
}

.content-6-image-img {
  width: 100%;
  height: auto;
  max-height: 30rem;
  object-fit: cover;
  display: block;
}

/* ============================================
   Dark Background Adaptation
   ============================================ */

/* Adapter l'icône sur fond sombre - garder le fond blanc mais ajuster la bordure */
.content-6-text-wrapper.bg-primary .content-6-icon,
.content-6-text-wrapper.bg-dark .content-6-icon,
.content-6-text-wrapper.bg-black .content-6-icon,
.content-6-text-wrapper.bg-gray-dark .content-6-icon,
.content-6-text-wrapper.bg-gray-darker .content-6-icon,
.content-6-text-wrapper.bg-gradient-primary-accent .content-6-icon,
.content-6-text-wrapper.bg-gradient-accent-primary .content-6-icon,
.content-6-text-wrapper.bg-gradient-secondary-accent .content-6-icon,
.content-6-text-wrapper.bg-gradient-primary-secondary .content-6-icon,
.content-6-text-wrapper.bg-gradient-primary-accent-v .content-6-icon,
.content-6-text-wrapper.bg-gradient-secondary-accent-v .content-6-icon {
  background-color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0px 0px 0px 1px inset rgba(255, 255, 255, 0.1),
    0px -2px 0px 0px inset rgba(255, 255, 255, 0.05);
}

/* ============================================
   Responsive Design
   ============================================ */

/* Tablet (< 992px) */
@media (max-width: 991.98px) {
  .content-section-6[style*='--padding-top'] {
    padding-top: calc(var(--padding-top) * 0.8);
  }

  .content-section-6[style*='--padding-bottom'] {
    padding-bottom: calc(var(--padding-bottom) * 0.8);
  }

  .content-section-6:not([style*='--padding-top']) {
    padding-top: 4rem;
  }

  .content-section-6:not([style*='--padding-bottom']) {
    padding-bottom: 4rem;
  }

  .content-6-text-wrapper {
    padding-top: 4rem;
    padding-bottom: 8rem;
  }

  .content-6-content {
    gap: 20px;
    margin-bottom: 40px;
  }

  .content-6-title {
    font-size: var(--text-3xl, 32px);
  }

  .content-6-text {
    font-size: var(--text-base, 16px);
  }

  .content-6-features {
    gap: 28px;
  }

  .content-6-icon {
    width: 44px;
    height: 44px;
  }

  .content-6-icon-img {
    width: 22px;
    height: 22px;
  }

  .content-6-feature-content {
    gap: 4px;
  }

  .content-6-feature-title {
    font-size: var(--text-base, 16px);
    line-height: 24px;
  }

  .content-6-feature-description {
    font-size: var(--text-sm, 14px);
    line-height: 20px;
  }

  .content-6-image-img {
    max-height: 25rem;
  }
}

/* Mobile (< 768px) */
@media (max-width: 767.98px) {
  .content-section-6[style*='--padding-top'] {
    padding-top: calc(var(--padding-top) * 0.6);
  }

  .content-section-6[style*='--padding-bottom'] {
    padding-bottom: calc(var(--padding-bottom) * 0.6);
  }

  .content-section-6:not([style*='--padding-top']) {
    padding-top: 3rem;
  }

  .content-section-6:not([style*='--padding-bottom']) {
    padding-bottom: 3rem;
  }

  .content-6-text-wrapper {
    padding-top: 3rem;
    padding-bottom: 6rem;
  }

  .content-6-content {
    gap: 18px;
    margin-bottom: 32px;
  }

  .content-6-title {
    font-size: var(--text-2xl, 28px);
  }

  .content-6-text {
    font-size: var(--text-sm, 14px);
  }

  .content-6-button {
    margin-top: 4px;
  }

  .content-6-features {
    gap: 24px;
  }

  .content-6-icon {
    width: 40px;
    height: 40px;
  }

  .content-6-icon-img {
    width: 20px;
    height: 20px;
  }

  .content-6-feature-content {
    gap: 4px;
  }

  .content-6-feature-title {
    font-size: var(--text-base, 16px);
    line-height: 24px;
  }

  .content-6-feature-description {
    font-size: var(--text-sm, 14px);
    line-height: 20px;
  }

  .content-6-image-container {
    margin-top: -65px;
  }
}

/* Small Mobile (< 576px) */
@media (max-width: 575.98px) {
  .content-6-content {
    gap: 16px;
    margin-bottom: 28px;
  }

  .content-6-title {
    font-size: var(--text-xl, 24px);
  }

  .content-6-features {
    gap: 20px;
  }

  .content-6-icon {
    width: 40px;
    height: 40px;
  }

  .content-6-icon-img {
    width: 20px;
    height: 20px;
  }

  .content-6-feature-content {
    gap: 4px;
  }

  .content-6-image-container {
    margin-top: -65px;
  }
}

/* ============================================
   Accessibility & Motion
   ============================================ */

/* Réduire les animations pour les utilisateurs sensibles */
@media (prefers-reduced-motion: reduce) {
  .content-6-feature {
    opacity: 1 !important;
    transform: translateX(0) !important;
    transition: none !important;
  }
}

/* Focus visible pour accessibilité clavier */
.content-6-feature:focus-within .content-6-icon {
  outline: 2px solid var(--bs-primary, #007bff);
  outline-offset: 2px;
}