/* ================================================================================
   UTILITIES - Classes Réutilisables Optimisées
   ================================================================================

   Système de classes utilitaires pour maximiser la réutilisabilité CSS
   Conçu pour réduire la duplication et améliorer les performances

   SECTIONS :
   1. Glassmorphism
   2. Boutons
   3. Layout & Flexbox
   4. Espacement
   5. Transitions & Animations
   6. États Interactifs
   7. Scrollbars
   8. Bordures
   9. Focus & Accessibilité
   10. Typographie
   11. Backgrounds
   12. Shadows

   ================================================================================ */

/* ========================================
   1. GLASSMORPHISM
   ======================================== */

.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.glass-hover:hover {
  background: var(--glass-bg-hover);
  box-shadow: var(--glass-shadow-hover);
}

/* Gradient overlay pour effet glass avancé */
.glass-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0.05) 50%,
      rgba(255, 255, 255, 0.1) 100%);
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

/* Effet de lumière supérieure */
.glass-light::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.8) 50%,
    transparent 100%);
  z-index: 1;
}

/* ========================================
   2. BOUTONS
   ======================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
}

.btn-primary {
  background: var(--accent-secondary);
  color: var(--text-inverse);
  border-color: var(--accent-secondary);
}

.btn-primary:hover {
  background: var(--accent-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-primary);
  border-color: rgba(0, 0, 0, 0.15);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 1);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  justify-content: center;
  background: transparent;
  border: none;
}

.btn-icon:hover {
  background: rgba(0, 0, 0, 0.05);
  transform: scale(1.05);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ========================================
   3. LAYOUT & FLEXBOX
   ======================================== */

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }

.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-1 { flex: 1; }
.flex-auto { flex: auto; }
.flex-shrink-0 { flex-shrink: 0; }

.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }

/* ========================================
   4. ESPACEMENT
   ======================================== */

/* Padding */
.p-0 { padding: 0; }
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }
.p-2xl { padding: var(--spacing-2xl); }

/* Padding horizontal/vertical */
.px-sm { padding-left: var(--spacing-sm); padding-right: var(--spacing-sm); }
.px-md { padding-left: var(--spacing-md); padding-right: var(--spacing-md); }
.px-lg { padding-left: var(--spacing-lg); padding-right: var(--spacing-lg); }

.py-sm { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }

/* Margin */
.m-0 { margin: 0; }
.m-auto { margin: auto; }
.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }

/* Margin horizontal/vertical */
.mx-auto { margin-left: auto; margin-right: auto; }
.mx-sm { margin-left: var(--spacing-sm); margin-right: var(--spacing-sm); }
.mx-md { margin-left: var(--spacing-md); margin-right: var(--spacing-md); }
.mx-lg { margin-left: var(--spacing-lg); margin-right: var(--spacing-lg); }

.my-sm { margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
.my-md { margin-top: var(--spacing-md); margin-bottom: var(--spacing-md); }
.my-lg { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-lg); }

/* Margin bottom seulement */
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

/* ========================================
   5. TRANSITIONS & ANIMATIONS
   ======================================== */

.transition-fast { transition: all var(--transition-fast); }
.transition-normal { transition: all var(--transition-normal); }
.transition-slow { transition: all var(--transition-slow); }

.transition-transform { transition: transform var(--transition-fast); }
.transition-opacity { transition: opacity var(--transition-fast); }
.transition-colors { transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); }

/* ========================================
   6. ÉTATS INTERACTIFS
   ======================================== */

/* Hover lift effect */
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Hover scale */
.hover-scale:hover {
  transform: scale(1.05);
}

/* Hover glow */
.hover-glow:hover {
  box-shadow: 0 8px 32px rgba(249, 228, 121, 0.3);
}

/* Hover opacity */
.hover-opacity:hover {
  opacity: 0.8;
}

/* Cursor */
.cursor-pointer { cursor: pointer; }
.cursor-grab { cursor: grab; }
.cursor-grabbing { cursor: grabbing; }
.cursor-move { cursor: move; }
.cursor-not-allowed { cursor: not-allowed; }

/* User select */
.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }

/* ========================================
   7. SCROLLBARS
   ======================================== */

.scrollbar-default::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scrollbar-default::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
}

.scrollbar-default::-webkit-scrollbar-thumb {
  background: rgba(47, 47, 46, 0.2);
  border-radius: 3px;
}

.scrollbar-default::-webkit-scrollbar-thumb:hover {
  background: rgba(47, 47, 46, 0.3);
}

.scrollbar-gold::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scrollbar-gold::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.scrollbar-gold::-webkit-scrollbar-thumb {
  background: rgba(249, 228, 121, 0.3);
  border-radius: 3px;
}

.scrollbar-gold::-webkit-scrollbar-thumb:hover {
  background: rgba(249, 228, 121, 0.5);
}

.scrollbar-thin::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.scrollbar-hidden {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

/* ========================================
   8. BORDURES
   ======================================== */

.border { border: 1px solid var(--border-color); }
.border-strong { border: 1px solid var(--border-color-strong); }
.border-none { border: none; }

.border-t { border-top: 1px solid var(--border-color); }
.border-b { border-bottom: 1px solid var(--border-color); }
.border-l { border-left: 1px solid var(--border-color); }
.border-r { border-right: 1px solid var(--border-color); }

/* Border radius */
.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ========================================
   9. FOCUS & ACCESSIBILITÉ
   ======================================== */

.focus-visible:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

.focus-ring:focus {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ========================================
   10. TYPOGRAPHIE
   ======================================== */

.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-md { font-size: var(--font-size-md); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }

.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-inverse { color: var(--text-inverse); }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

.italic { font-style: italic; }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ========================================
   11. BACKGROUNDS
   ======================================== */

.bg-transparent { background: transparent; }
.bg-main { background: var(--bg-main); }
.bg-sidebar { background: var(--bg-sidebar); }
.bg-card { background: var(--bg-card); }
.bg-input { background: var(--bg-input); }

.bg-primary { background: var(--accent-primary); }
.bg-secondary { background: var(--accent-secondary); }

/* ========================================
   12. SHADOWS
   ======================================== */

.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); }
.shadow { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.shadow-md { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
.shadow-lg { box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15); }
.shadow-xl { box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25); }

.shadow-glass { box-shadow: var(--glass-shadow); }
.shadow-glass-hover { box-shadow: var(--glass-shadow-hover); }

/* ========================================
   13. POSITION & Z-INDEX
   ======================================== */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

.z-base { z-index: var(--z-base); }
.z-sidebar { z-index: var(--z-sidebar); }
.z-fixed { z-index: var(--z-fixed); }
.z-dropdown { z-index: var(--z-dropdown); }
.z-overlay { z-index: var(--z-overlay); }
.z-modal { z-index: var(--z-modal); }
.z-toast { z-index: var(--z-toast); }

.inset-0 { inset: 0; }

/* ========================================
   14. DISPLAY
   ======================================== */

.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.hidden { display: none; }

.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }

/* ========================================
   15. WIDTH & HEIGHT
   ======================================== */

.w-full { width: 100%; }
.h-full { height: 100%; }

.w-auto { width: auto; }
.h-auto { height: auto; }

.min-w-0 { min-width: 0; }
.min-h-0 { min-height: 0; }

/* ========================================
   16. PERFORMANCE
   ======================================== */

.gpu-accelerated {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

.will-change-transform { will-change: transform; }
.will-change-opacity { will-change: opacity; }

/* ========================================
   17. DARK MODE UTILITIES
   ======================================== */

[data-theme="dark"] .glass {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow);
}

[data-theme="dark"] .glass-hover:hover {
  background: var(--glass-bg-hover);
  box-shadow: var(--glass-shadow-hover);
}

[data-theme="dark"] .glass-gradient::before {
  background: linear-gradient(135deg,
      rgba(249, 228, 121, 0.1) 0%,
      rgba(249, 228, 121, 0.02) 50%,
      rgba(249, 228, 121, 0.05) 100%);
}

[data-theme="dark"] .glass-light::after {
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(249, 228, 121, 0.3) 50%,
      transparent 100%);
}

[data-theme="dark"] .btn-secondary {
  background: var(--bg-card);
  border-color: var(--border-color);
}

[data-theme="dark"] .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .btn-icon:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ========================================
   FIN DU FICHIER UTILITIES

   Ces classes peuvent maintenant être utilisées partout dans le projet
   pour réduire la duplication et améliorer la maintenabilité.
   ======================================== */