/* =============================
   🛠️ UTILITAIRES ET PROPRIÉTÉS DIVERSES
   =============================
   Fichier dédié aux propriétés utilitaires qui étaient
   précédemment gérées par des styles inline
*/

/* =============================
   📏 DIMENSIONS ET ESPACEMENT
   ============================= */

/* Largeur dynamique pour barre de progression */
.progress-width-25 { width: 25%; }
.progress-width-50 { width: 50%; }
.progress-width-75 { width: 75%; }
.progress-width-100 { width: 100%; }

/* Classes de largeur pour la barre de progression du slideshow */
.progress-width-20 { width: 20%; }
.progress-width-40 { width: 40%; }
.progress-width-60 { width: 60%; }
.progress-width-80 { width: 80%; }
.progress-width-33 { width: 33.33%; }
.progress-width-66 { width: 66.66%; }

/* =============================
   🎨 COULEURS ET FONDS
   ============================= */

/* Couleurs de fond communes */
.bg-light-gray {
  background-color: #f5f5f5;
}

.bg-white-transparent {
  background-color: rgba(255, 255, 255, 0.6);
}

/* =============================
   🔄 TRANSITIONS ET ANIMATIONS
   ============================= */

/* Transitions personnalisées */
.transition-opacity-fast {
  transition: opacity 200ms ease-in-out;
}

.transition-opacity-medium {
  transition: opacity 500ms ease-in-out;
}

.transition-opacity-slow {
  transition: opacity 800ms ease-in-out;
}

/* =============================
   📱 RESPONSIVE UTILITIES
   ============================= */

@media (max-width: 768px) {
  .progress-width-25 { width: 20%; }
  .progress-width-50 { width: 40%; }
  .progress-width-75 { width: 60%; }
  .progress-width-100 { width: 80%; }
}

@media (max-width: 480px) {
  .progress-width-25 { width: 15%; }
  .progress-width-50 { width: 30%; }
  .progress-width-75 { width: 45%; }
  .progress-width-100 { width: 60%; }
}