/* ===========================================================================
* FICHIER : features.css
 ========================================================================== */
/*
* Auteur : Emile SNYERS
* Date : 2025-06-22
----------------------------------------
*
* Emile SNYERS - Tous droits réservés - 2025
*
* 📢Toute utilisation nécessite une autorisation préalable du propriétaire (Emile SNYERS).
* 🚨Usage non commercial uniquement.
*
* Type d'utilisation autorisée: 
*   - Utilisation pour des projets éducatifs ou associatifs.
*   - Ne pas redistribuer sans autorisation.
*
* Critères d'attribution d'une autorisation: 
*   - Contribution à des projets éducatifs ou associatifs.
*   - L'entraide et le partage du savoir.
*   - Contribue à la promotion de l'éducation et de la culture.
*----------------------------------------
* ================================================================================
* Conditions d'utilisation : Uniquement à des fins éducatives ou associatives et non commerciales.
* Contact : emilesnyers@gmail.com
* Description :
*   - Fichier CSS pour la section des caractéristiques du cours.
*   - Utilise un système de variables CSS pour la cohérence des styles.
*   - Inclut des corrections pour les problèmes de couleurs et de responsive design.
*   - Optimisé pour une utilisation sur mobile et desktop.
* ================================================================================
*/

/* ====================================================================
   LISTE DES CARACTÉRISTIQUES DU COURS
==================================================================== */

.course-features {
  background: var(--theme-secondary);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
  margin: var(--spacing-xl) 0;
  box-shadow: var(--theme-section-shadow);
  border-left: 4px solid var(--theme-primary);
  transition: all var(--transition-speed) ease;
}

.course-features:hover {
  transform: translateY(-3px);
  box-shadow: var(--theme-card-shadow);
}

.course-features-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin-bottom: var(--spacing-md);
  color: var(--theme-text);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-md);
}

/* 1. CORRECTION DES FEATURE ITEMS - Ajout de fallbacks et correction hover mobile */
.feature-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  /* CORRECTION: Ajout de fallbacks pour éviter les couleurs noires */
  background-color: var(--theme-tertiary, #fef9e7);
  color: var(--theme-text, #2c3e50);
  border-radius: var(--border-radius-md);
  transition: all var(--transition-speed) ease;
  border: 1px solid var(--theme-secondary, #f2e3b3);
}

/* CORRECTION: Désactiver hover sur mobile et ajouter fallbacks */
.feature-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--theme-section-shadow, 0 2px 5px rgba(0,0,0,0.1));
  background-color: var(--theme-primary, #c39b77);
  /* CORRECTION: Fallback pour éviter le texte noir */
  color: var(--theme-button-primary-text, white);
}

/* 2. CORRECTION DES ICÔNES - S'assurer qu'elles gardent leur couleur */
.feature-icon {
  font-size: var(--font-size-2xl, 1.875rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  /* CORRECTION: Forcer la couleur des icônes */
  color: var(--theme-primary, #c39b77) !important;
}

/* CORRECTION: Maintenir la couleur des icônes même au hover sur desktop */
.feature-item:hover .feature-icon {
  color: var(--theme-button-primary-text, white) !important;
}

/* CORRECTION: Forcer la couleur des icônes sur mobile */
@media (pointer: coarse) {
  .feature-item .feature-icon {
    color: var(--theme-primary, #c39b77) !important;
  }
}

/* 3. CORRECTION DU TEXTE - S'assurer qu'il reste lisible */
.feature-text {
  font-size: var(--font-size-base, 1rem);
  line-height: 1.5;
  /* CORRECTION: Fallback pour le texte */
  color: inherit;
  /* CORRECTION: Centrage vertical du texte */
  display: flex;
  align-items: center;
  min-height: 100%;
}

/* 4. CORRECTION DU CONTENEUR COURSE-FEATURES */
.course-features {
  background: var(--theme-secondary, #f2e3b3);
  border-radius: var(--border-radius-lg, 12px);
  padding: var(--spacing-lg, 1.5rem);
  margin: var(--spacing-xl, 2rem) 0;
  box-shadow: var(--theme-section-shadow, 0 2px 5px rgba(0,0,0,0.1));
  border-left: 4px solid var(--theme-primary, #c39b77);
  transition: all var(--transition-speed, 0.3s) ease;
}

/* CORRECTION: Désactiver l'effet hover du conteneur sur mobile */
@media (pointer: coarse) {
  .course-features:hover {
    transform: none;
    box-shadow: var(--theme-section-shadow, 0 2px 5px rgba(0,0,0,0.1));
  }
}

/* 5. CORRECTION DU TITRE DES FEATURES */
.course-features-title {
  font-size: var(--font-size-xl, 1.5rem);
  font-weight: 600;
  margin-bottom: var(--spacing-md, 1rem);
  /* CORRECTION: Fallback pour la couleur du titre */
  color: var(--theme-text, #2c3e50);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 0.5rem);
}

/* 6. CORRECTIONS SPÉCIFIQUES MOBILE */
@media (max-width: 768px) {
  /* Forcer les couleurs sur mobile pour éviter les problèmes */
  .feature-item {
    background-color: var(--theme-tertiary, #fef9e7) !important;
    color: var(--theme-text, #2c3e50) !important;
    border: 1px solid var(--theme-secondary, #f2e3b3) !important;
  }
  
  .feature-icon {
    color: var(--theme-primary, #c39b77) !important;
  }
  
  .feature-text {
    color: var(--theme-text, #2c3e50) !important;
  }
  
  /* Désactiver toutes les animations sur mobile pour éviter les bugs */
  .feature-item,
  .course-features {
    transition: none !important;
  }
}

/* 7. CORRECTION POUR TRÈS PETITS ÉCRANS */
@media (max-width: 480px) {
  .course-features {
    padding: var(--spacing-md, 1rem);
    margin: var(--spacing-lg, 1.5rem) 0;
  }

  .feature-list {
    grid-template-columns: 1fr;
  }

  .feature-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spacing-sm, 0.5rem);
  }

  .feature-icon {
    margin-bottom: var(--spacing-xs, 0.25rem);
    font-size: var(--font-size-xl, 1.5rem);
  }
}

/* 8. CORRECTION ANTI-DARK MODE FORCÉ */
/* Certains navigateurs mobiles forcent le dark mode, cette règle l'empêche */
@media (prefers-color-scheme: dark) {
  .feature-item {
    background-color: var(--theme-tertiary, #fef9e7) !important;
    color: var(--theme-text, #2c3e50) !important;
  }
  
  .course-features {
    background: var(--theme-secondary, #f2e3b3) !important;
  }
}