/**
 * Content Section 11 - Grid 2 colonnes de features avec icônes + image en dessous
 *
 * Layout: Features en grid 2 colonnes (col-lg-6 + col-lg-6)
 * Fonctionnalités:
 * - Grid 2 colonnes de features avec icône, titre et description
 * - Image en dessous du contenu qui chevauche la section
 * - Animation au scroll
 * - Système de couleurs personnalisables
 *
 * @package Dioqa_UI_Kit
 */

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

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

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

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

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

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

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

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

/* ============================================
   Main Title
   ============================================ */

.content-11-main-title-wrapper {
  text-align: center;
  margin-bottom: 4rem;
}

/* Réduire le margin du titre quand il y a une description après */
.content-11-main-title-wrapper:has(+ .content-11-description-wrapper) {
  margin-bottom: 1rem;
}

.content-11-main-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 600;
  font-size: var(--text-2xl, 32px);
  line-height: 1.2;
}

.content-11-main-title p {
  margin: 0;
}

/* ============================================
   Description
   ============================================ */

.content-11-description-wrapper {
  text-align: center;
  margin-bottom: 4rem;
}

.content-11-description {
  font-family: var(--font-body, 'Work Sans', sans-serif);
  font-weight: 400;
  font-size: var(--text-base, 16px);
  line-height: 1.4375; /* 23px / 16px = 143.75% */
  margin: 0 auto;
  max-width: 720px; /* Limite la largeur pour une meilleure lisibilité */
}

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

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

/* ============================================
   Features Grid - 2 Columns
   ============================================ */

.content-11-features-grid {
  display: grid;
  grid-template-columns: 5fr 2fr 5fr; /* col-5, offset-2, col-5 */
  gap: 48px 0; /* Gap vertical, pas horizontal (géré par la colonne du milieu) */
  width: 100%;
}

/* Chaque feature occupe soit la colonne 1, soit la colonne 3 */
.content-11-feature:nth-child(odd) {
  grid-column: 1; /* Colonne gauche */
}

.content-11-feature:nth-child(even) {
  grid-column: 3; /* Colonne droite */
}

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

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

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

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

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

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

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

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

.content-11-features-grid.is-visible .content-11-feature:nth-child(7) {
  transition-delay: 0.9s;
}

.content-11-features-grid.is-visible .content-11-feature:nth-child(8) {
  transition-delay: 1.05s;
}

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

.content-11-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-11-icon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

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

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

/* Feature Title */
.content-11-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-11-feature-title p {
  margin: 0;
}

/* Feature Description */
.content-11-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-11-feature-description p {
  margin: 0 0 0.5rem;
}

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

/* ============================================
   Media Section (Bottom) - Image / Video / Maps
   ============================================ */

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

.content-11-media {
  width: 100%;
  position: relative;
}

/* Image Styles */
.content-11-media-img {
  width: 100%;
  height: auto;
  max-height: 30rem;
  object-fit: cover;
  display: block;
}

/* Video Styles */
.content-11-video-wrapper {
  position: relative;
  width: 100%;
  cursor: pointer;
}

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

.content-11-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 155px;
  height: 155px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 2;
}

.content-11-video-play:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

.content-11-video-play svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

/* Masquer le bouton play quand la vidéo est en lecture */
.content-11-video-wrapper.is-playing .content-11-video-play {
  opacity: 0;
  pointer-events: none;
}

/* Google Maps Styles */
.content-11-map-wrapper {
  width: 100%;
  height: 400px;
  position: relative;
}

.content-11-map-wrapper .acfe-google-map {
  width: 100%;
  height: 100%;
}

/* ============================================
   Media Overlay (Titre + Sous-titre)
   ============================================ */

.content-11-media-overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
  padding: 2rem;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.5) 100%
  );
}

.content-11-media-titre {
  color: #ffffff;
  font-family: var(--font-family-title, Poppins);
  font-size: var(--font-size-display-md, 2.25rem);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin: 0 0 0.5rem 0;
  text-align: left;
}

.content-11-media-titre p,
.content-11-media-titre h1,
.content-11-media-titre h2,
.content-11-media-titre h3,
.content-11-media-titre h4,
.content-11-media-titre h5,
.content-11-media-titre h6 {
  margin: 0;
  color: #ffffff;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.content-11-media-sous-titre {
  color: #ffffff;
  font-family: var(--font-family-body, Roboto);
  font-size: var(--font-size-text-md, 1rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1.4375rem;
  margin: 0;
  text-align: left;
}

.content-11-media-sous-titre p,
.content-11-media-sous-titre h1,
.content-11-media-sous-titre h2,
.content-11-media-sous-titre h3,
.content-11-media-sous-titre h4,
.content-11-media-sous-titre h5,
.content-11-media-sous-titre h6 {
  margin: 0;
  color: #ffffff;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
}

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

/* Adapter l'icône sur fond sombre - garder le fond blanc mais ajuster la bordure */
.content-11-wrapper.bg-primary .content-11-icon,
.content-11-wrapper.bg-dark .content-11-icon,
.content-11-wrapper.bg-black .content-11-icon,
.content-11-wrapper.bg-gray-dark .content-11-icon,
.content-11-wrapper.bg-gray-darker .content-11-icon,
.content-11-wrapper.bg-gradient-primary-accent .content-11-icon,
.content-11-wrapper.bg-gradient-accent-primary .content-11-icon,
.content-11-wrapper.bg-gradient-secondary-accent .content-11-icon,
.content-11-wrapper.bg-gradient-primary-secondary .content-11-icon,
.content-11-wrapper.bg-gradient-primary-accent-v .content-11-icon,
.content-11-wrapper.bg-gradient-secondary-accent-v .content-11-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-11[style*='--padding-top'] {
    padding-top: calc(var(--padding-top) * 0.8);
  }

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

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

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

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

  .content-11-main-title-wrapper {
    margin-bottom: 3rem;
  }

  .content-11-main-title-wrapper:has(+ .content-11-description-wrapper) {
    margin-bottom: 0.75rem;
  }

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

  .content-11-description-wrapper {
    margin-bottom: 3rem;
  }

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

  .content-11-features-grid {
    gap: 40px 0;
  }

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

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

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

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

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

  .content-11-media-img,
  .content-11-video {
    max-height: 25rem;
  }

  .content-11-video-play {
    width: 120px;
    height: 120px;
  }

  .content-11-map-wrapper {
    height: 350px;
  }

  .content-11-media-overlay {
    padding: 1.5rem;
  }

  .content-11-media-titre {
    font-size: 1.75rem;
  }

  .content-11-media-sous-titre {
    font-size: 0.875rem;
  }
}

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

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

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

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

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

  .content-11-main-title-wrapper {
    margin-bottom: 2.5rem;
  }

  .content-11-main-title-wrapper:has(+ .content-11-description-wrapper) {
    margin-bottom: 0.75rem;
  }

  .content-11-main-title {
    font-size: var(--text-lg, 24px);
  }

  .content-11-description-wrapper {
    margin-bottom: 2.5rem;
  }

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

  /* Passer en 1 colonne sur mobile */
  .content-11-features-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .content-11-feature:nth-child(odd),
  .content-11-feature:nth-child(even) {
    grid-column: 1; /* Tous dans la même colonne */
  }

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

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

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

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

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

  .content-11-media-container {
    margin-top: -65px;
  }

  .content-11-video-play {
    width: 100px;
    height: 100px;
  }

  .content-11-map-wrapper {
    height: 300px;
  }

  .content-11-media-overlay {
    padding: 1.25rem;
  }

  .content-11-media-titre {
    font-size: 1.5rem;
    margin-bottom: 0.375rem;
  }

  .content-11-media-sous-titre {
    font-size: 0.875rem;
  }
}

/* Small Mobile (< 576px) */
@media (max-width: 575.98px) {
  .content-11-main-title-wrapper {
    margin-bottom: 2rem;
  }

  .content-11-main-title-wrapper:has(+ .content-11-description-wrapper) {
    margin-bottom: 0.5rem;
  }

  .content-11-main-title {
    font-size: var(--text-lg, 20px);
  }

  .content-11-description-wrapper {
    margin-bottom: 2rem;
  }

  .content-11-description {
    font-size: var(--text-xs, 13px);
    line-height: 1.5;
  }

  .content-11-features-grid {
    gap: 24px;
  }

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

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

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

  .content-11-media-container {
    margin-top: -65px;
  }

  .content-11-video-play {
    width: 90px;
    height: 90px;
  }

  .content-11-map-wrapper {
    height: 280px;
  }

  .content-11-media-overlay {
    padding: 1rem;
  }

  .content-11-media-titre {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
  }

  .content-11-media-sous-titre {
    font-size: 0.8125rem;
  }
}

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

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

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