/**
 * Planète Jeunesse v2 - Utilities
 * Classes utilitaires
 */

/* =====================================================
   DISPLAY
   ===================================================== */

.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }

/* =====================================================
   VISIBILITÉ RESPONSIVE
   ===================================================== */

/* Mobile only (< 768px) */
@media (min-width: 768px) {
  .d-mobile-only { display: none !important; }
}

/* Desktop only (>= 768px) */
@media (max-width: 767px) {
  .d-desktop-only { display: none !important; }
}

/* =====================================================
   BACKGROUND COLORS
   ===================================================== */

.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-light { background-color: var(--color-bg-secondary) !important; }
.bg-dark { background-color: var(--color-bg-dark) !important; }
.bg-white { background-color: #fff !important; }
.bg-transparent { background-color: transparent !important; }

/* =====================================================
   TEXT UTILITIES
   ===================================================== */

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

.text-break {
  word-wrap: break-word;
  word-break: break-word;
}

.text-nowrap {
  white-space: nowrap;
}

.text-uppercase {
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

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

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

/* =====================================================
   SHADOW
   ===================================================== */

.shadow-none { box-shadow: none !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }

/* =====================================================
   BORDER
   ===================================================== */

.border { border: 1px solid var(--color-border-light) !important; }
.border-0 { border: none !important; }
.border-top { border-top: 1px solid var(--color-border-light) !important; }
.border-bottom { border-bottom: 1px solid var(--color-border-light) !important; }

.rounded { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }
.rounded-0 { border-radius: 0 !important; }

/* =====================================================
   CURSOR
   ===================================================== */

.cursor-pointer { cursor: pointer !important; }
.cursor-not-allowed { cursor: not-allowed !important; }

/* =====================================================
   POINTER EVENTS
   ===================================================== */

.pe-none { pointer-events: none !important; }
.pe-auto { pointer-events: auto !important; }

/* =====================================================
   USER SELECT
   ===================================================== */

.select-none { user-select: none !important; }
.select-all { user-select: all !important; }

/* =====================================================
   OPACITY
   ===================================================== */

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }

/* =====================================================
   TRANSITION
   ===================================================== */

.transition-none { transition: none !important; }
.transition { transition: all var(--transition-normal) !important; }

/* =====================================================
   FLOAT (legacy support)
   ===================================================== */

.float-left { float: left !important; }
.float-right { float: right !important; }
.float-none { float: none !important; }

.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

/* =====================================================
   OBJECT FIT (pour images)
   ===================================================== */

.object-cover { object-fit: cover !important; }
.object-contain { object-fit: contain !important; }
.object-fill { object-fit: fill !important; }

/* =====================================================
   VERTICAL ALIGNMENT
   ===================================================== */

.align-top { vertical-align: top !important; }
.align-middle { vertical-align: middle !important; }
.align-bottom { vertical-align: bottom !important; }

/* =====================================================
   LIST STYLE
   ===================================================== */

.list-none { list-style: none !important; }
.list-disc { list-style: disc !important; }
.list-decimal { list-style: decimal !important; }

/* =====================================================
   ANIMATION
   ===================================================== */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.animate-fade-in {
  animation: fadeIn var(--transition-normal) ease-out;
}

.animate-fade-in-up {
  animation: fadeInUp var(--transition-normal) ease-out;
}

.animate-fade-in-down {
  animation: fadeInDown var(--transition-normal) ease-out;
}

.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* =====================================================
   SCREEN READER ONLY
   ===================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =====================================================
   SKIP LINK (accessibilité)
   ===================================================== */

.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  z-index: var(--z-tooltip);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 0;
}