/* CSS FORCE MAXIMALE pour Comment s'en servir - Mobile uniquement */
@media (max-width: 768px) {
  
  /* FORCER la section à respecter les mêmes contraintes que les autres */
  html body section.how-to-use {
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 60px 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  /* MASQUER COMPLÈTEMENT la version desktop */
  html body section.how-to-use div.container > div.feasture-card,
  html body section.how-to-use div.container > div.feature-card {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    left: -99999px !important;
    top: -99999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
  
  /* FORCER l'affichage de la version mobile */
  html body section.how-to-use div.how-to-use-mobile {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 999 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 0 20px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  
  /* Structure mobile */
  html body section.how-to-use div.how-to-use-mobile div.how-to-use-content {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Titre et description */
  html body section.how-to-use div.how-to-use-mobile div.how-to-use-fixed {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 0 40px 0 !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }
  
  html body section.how-to-use div.how-to-use-mobile div.how-to-use-fixed h2 {
    font-family: Raleway, sans-serif !important;
    font-size: 48px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #141414 !important;
    margin: 0 0 16px 0 !important;
    text-align: left !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  html body section.how-to-use div.how-to-use-mobile div.how-to-use-fixed p {
    font-size: 16px !important;
    line-height: 1.4 !important;
    color: #6E6E73 !important;
    margin: 0 !important;
    text-align: left !important;
  }
  
  /* Slider container */
  html body section.how-to-use div.how-to-use-mobile div.how-to-use-slider {
    width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  
  /* Slides wrapper - CORRIGER le scroll */
  html body section.how-to-use div.how-to-use-mobile div.slides-wrapper {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    gap: 20px !important;
    padding: 0 0 20px 0 !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    box-sizing: border-box !important;
  }
  
  html body section.how-to-use div.how-to-use-mobile div.slides-wrapper::-webkit-scrollbar {
    display: none !important;
  }
  
  /* Slides individuelles - TAILLE FIXE UNIFIÉE */
  html body section.how-to-use div.how-to-use-mobile div.slide {
    flex: 0 0 320px !important;
    width: 320px !important;
    max-width: 320px !important;
    min-width: 320px !important;
    height: 340px !important;
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    scroll-snap-align: start !important;
    visibility: visible !important;
  }
  
  html body section.how-to-use div.how-to-use-mobile div.slide:first-child {
    margin-left: 0 !important;
  }
  
  html body section.how-to-use div.how-to-use-mobile div.slide:last-child {
    margin-right: 0 !important;
  }
  
  /* Contenu des slides - CONTAINER FIXE UNIFIÉ */
  html body section.how-to-use div.how-to-use-mobile div.slide-content {
    display: flex !important;
    flex-direction: column !important;
    padding: 24px !important;
    gap: 20px !important;
    background: #F8F9FA !important;
    border: 1px solid #E5E5E7 !important;
    border-radius: 16px !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: center !important;
    overflow: hidden !important;
  }
  
  /* Icônes */
  html body section.how-to-use div.how-to-use-mobile div.feature-icon {
    width: 56px !important;
    height: 56px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #E8F4FD !important;
    border-radius: 50% !important;
    margin: 0 0 16px 0 !important;
    flex-shrink: 0 !important;
  }
  
  html body section.how-to-use div.how-to-use-mobile div.feature-icon img {
    width: 28px !important;
    height: 28px !important;
  }
  
  /* Titres des slides - OPTIMISÉ POUR CONTAINER FIXE */
  html body section.how-to-use div.how-to-use-mobile div.slide h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #1D1D1F !important;
    margin: 0 0 10px 0 !important;
    flex-shrink: 0 !important;
  }

  /* Texte des slides - OPTIMISÉ POUR CONTAINER FIXE */
  html body section.how-to-use div.how-to-use-mobile div.slide p {
    font-size: 15px !important;
    line-height: 1.4 !important;
    color: #6E6E73 !important;
    margin: 0 !important;
    flex: 1 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  
  /* Barre de progression - FORCER l'affichage */
  html body section.how-to-use div.how-to-use-mobile div.mobile-progress-bar {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 20px 0 0 0 !important;
    padding: 0 20px !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10 !important;
  }
  
  /* Dots de progression - FORCER l'affichage */
  html body section.how-to-use div.how-to-use-mobile div.mobile-progress-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #D1D5DB !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
  }
  
  html body section.how-to-use div.how-to-use-mobile div.mobile-progress-dot.active {
    background: #3B82F6 !important;
    transform: scale(1.2) !important;
  }
}