/**
 * Phase 1 - Micro-interactions de Base
 * Hover, Focus, Active states pour tous les éléments interactifs
 * Accessibilité et feedback visuel cohérent
 */

/* === Classes Utilitaires Micro-interactions === */

/* Hover Lift - Élévation au survol */
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--elevation-4);
}

/* Hover Scale - Agrandissement subtil */
.hover-scale {
  transition: transform var(--transition-fast);
}

.hover-scale:hover {
  transform: scale(1.02);
}

.hover-scale:active {
  transform: scale(0.98);
}

/* Focus Ring - Accessibilité clavier */
.focus-ring:focus-visible {
  outline: 2px solid var(--somef-primary, #d22741);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.focus-ring:focus-visible:not(:focus-visible) {
  outline: none;
}

/* === Hover States - Cards === */
.card,
.kpi-card-enhanced,
.feature-card,
.project-card,
.action-card,
.agenda-part-enhanced,
.timeline-content-enhanced {
  transition: all var(--transition-base);
}

.card:hover,
.kpi-card-enhanced:hover,
.feature-card:hover,
.project-card:hover,
.action-card:hover,
.agenda-part-enhanced:hover,
.timeline-content-enhanced:hover {
  transform: translateY(-2px);
  box-shadow: var(--elevation-4);
}

/* === Hover States - Buttons === */
button,
.nav-button,
.timeline-nav-btn,
.btn,
.cta-button {
  transition: all var(--transition-base);
  cursor: pointer;
}

button:hover:not(:disabled),
.nav-button:hover:not(:disabled),
.timeline-nav-btn:hover:not(:disabled),
.btn:hover:not(:disabled),
.cta-button:hover:not(:disabled) {
  transform: scale(1.05);
}

button:active:not(:disabled),
.nav-button:active:not(:disabled),
.timeline-nav-btn:active:not(:disabled),
.btn:active:not(:disabled),
.cta-button:active:not(:disabled) {
  transform: scale(0.98);
}

/* === Focus States - Accessibilité === */
button:focus-visible,
.nav-button:focus-visible,
.timeline-nav-btn:focus-visible,
.btn:focus-visible,
.cta-button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--somef-primary, #d22741);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Focus ring avec ombre */
button:focus-visible,
.nav-button:focus-visible,
.timeline-nav-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(210, 39, 65, 0.1);
}

/* === Active States === */
button:active:not(:disabled),
.nav-button:active:not(:disabled),
.timeline-nav-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.card:active,
.kpi-card-enhanced:active {
  transform: translateY(0);
  box-shadow: var(--elevation-2);
}

/* === Hover States - Links === */
a {
  transition: all var(--transition-fast);
  text-decoration: none;
}

a:hover {
  color: var(--somef-primary, #d22741);
}

a:focus-visible {
  outline: 2px solid var(--somef-primary, #d22741);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Links avec soulignement animé */
a.link-underline {
  position: relative;
}

a.link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--somef-primary, #d22741);
  transition: width var(--transition-base);
}

a.link-underline:hover::after {
  width: 100%;
}

/* === Hover States - Icons === */
.timeline-horizontal-icon-wrapper,
.kpi-icon-wrapper,
.feature-icon,
.agenda-icon-wrapper {
  transition: all var(--transition-base);
}

.timeline-horizontal-item:hover .timeline-horizontal-icon-wrapper,
.kpi-card-enhanced:hover .kpi-icon-wrapper,
.feature-card:hover .feature-icon,
.agenda-part-enhanced:hover .agenda-icon-wrapper {
  transform: scale(1.1);
}

/* Rotation subtile pour certaines icônes */
.icon-rotate:hover {
  transform: rotate(5deg);
}

/* === Hover States - Badges === */
.badge,
.value-badge,
.value-badge-small {
  transition: all var(--transition-fast);
}

.badge:hover,
.value-badge:hover,
.value-badge-small:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* === Hover States - Indicators === */
.indicator,
.timeline-nav-indicator {
  transition: all var(--transition-fast);
}

.indicator:hover,
.timeline-nav-indicator:hover {
  transform: scale(1.2);
}

/* === Disabled States === */
button:disabled,
.nav-button:disabled,
.timeline-nav-btn:disabled,
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* === Loading States === */
.loading,
.skeleton {
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* === Smooth Transitions Globales === */
* {
  /* Transitions par défaut pour les propriétés courantes */
}

.card,
button,
a,
.badge,
.icon {
  transition-property: transform, box-shadow, background-color, color, border-color;
  transition-duration: var(--transition-base);
  transition-timing-function: var(--animation-easing);
}

/* === Micro-animations Subtiles === */

/* Pulse pour éléments importants */
.pulse-subtle {
  animation: pulse-subtle 2s ease-in-out infinite;
}

@keyframes pulse-subtle {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

/* Shimmer pour loading */
.shimmer {
  background: linear-gradient(
    90deg,
    var(--color-gray-200, #e5e7eb) 0%,
    var(--color-gray-100, #f3f4f6) 50%,
    var(--color-gray-200, #e5e7eb) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* === Touch States (Mobile) === */
@media (hover: none) and (pointer: coarse) {
  /* Sur mobile, utiliser :active au lieu de :hover */
  .card:active,
  .kpi-card-enhanced:active,
  .feature-card:active {
    transform: translateY(-2px);
    box-shadow: var(--elevation-4);
  }
  
  button:active:not(:disabled),
  .nav-button:active:not(:disabled) {
    transform: scale(0.95);
  }
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* === Application sur Composants Existants === */

/* KPI Cards */
.kpi-card-enhanced {
  @extend .hover-lift;
}

.kpi-card-enhanced:hover {
  transform: translateY(-4px);
}

/* Timeline Items */
.timeline-horizontal-item {
  transition: all var(--transition-base);
}

.timeline-horizontal-content {
  @extend .hover-lift;
}

/* Agenda Parts */
.agenda-part-enhanced {
  @extend .hover-lift;
}

/* Feature Cards */
.feature-card {
  @extend .hover-lift;
}

/* Project Cards */
.project-card {
  @extend .hover-lift;
}

/* Action Cards */
.action-card {
  @extend .hover-lift;
}

/* === Focus Visible pour Navigation Clavier === */
.slide-navigation button:focus-visible,
.timeline-horizontal-nav button:focus-visible {
  outline: 2px solid var(--somef-primary, #d22741);
  outline-offset: 3px;
  border-radius: 50%;
}

/* === Indicateurs Actifs === */
.indicator.active,
.timeline-nav-indicator.active {
  animation: pulse-subtle 2s ease-in-out infinite;
}