/**
 * HOVER EFFECTS - Effets d'illumination
 * Effets de survol premium pour cards, boutons, et éléments interactifs
 */

/* ========================================
   CARDS HOVER EFFECTS
   ======================================== */

.card {
  transition: all 0.3s ease;
  position: relative;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 
    0 20px 60px rgba(217, 93, 78, 0.4),
    0 0 0 1px rgba(217, 93, 78, 0.3) inset;
  border-color: var(--accent-gold);
}

/* Effet de glow sur le thumbnail */
.card .thumb {
  transition: all 0.3s ease;
}

.card:hover .thumb {
  box-shadow: 
    15px 0 30px -6px rgba(217, 93, 78, 0.6),
    0 10px 30px rgba(217, 93, 78, 0.3);
}

/* Effet sur le titre */
.card .title {
  transition: color 0.3s ease;
}

.card:hover .title {
  color: var(--accent-gold);
}

/* ========================================
   BUTTONS HOVER EFFECTS
   ======================================== */

.btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 
    0 10px 30px rgba(217, 93, 78, 0.5),
    0 0 20px rgba(217, 93, 78, 0.3);
}

.btn-outline {
  position: relative;
  overflow: hidden;
}

.btn-outline:hover {
  background: rgba(217, 93, 78, 0.2);
  box-shadow: 0 6px 20px rgba(217, 93, 78, 0.4);
}

/* ========================================
   SOCIAL LINKS HOVER EFFECTS
   ======================================== */

.social-link {
  transition: all 0.3s ease;
}

.social-link:hover {
  transform: translateY(-4px) scale(1.1);
  box-shadow: 
    0 8px 24px rgba(217, 93, 78, 0.5),
    0 0 20px rgba(217, 93, 78, 0.3);
  background: rgba(217, 93, 78, 0.3);
  border-color: var(--accent-gold);
}

/* ========================================
   NAVIGATION LINKS HOVER
   ======================================== */

.nav-links a {
  position: relative;
  transition: all 0.3s ease;
}

.nav-links a:hover {
  background: rgba(217, 93, 78, 0.2);
  border-color: var(--accent-gold);
  box-shadow: 0 4px 12px rgba(217, 93, 78, 0.3);
}

/* Login Lock Icon Hover Effect */
.login-lock-icon:hover {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.login-lock-icon:hover i {
  transform: scale(1.15) rotate(-5deg);
}

/* ========================================
   STAT CARDS HOVER
   ======================================== */

.stat-card {
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 12px 40px rgba(217, 93, 78, 0.3),
    0 0 0 1px rgba(217, 93, 78, 0.2) inset;
}

.stat-card .icon {
  transition: transform 0.3s ease;
}

.stat-card:hover .icon {
  transform: scale(1.1) rotate(5deg);
}

/* ========================================
   INPUT FOCUS GLOW
   ======================================== */

.input:focus,
.form-input:focus,
.form-textarea:focus,
select:focus {
  box-shadow: 
    0 0 0 3px rgba(217, 93, 78, 0.2),
    0 4px 16px rgba(217, 93, 78, 0.3);
}

/* ========================================
   TABLE ROWS HOVER (MODÉRÉ)
   ======================================== */

.table tbody tr {
  transition: all 0.2s ease;
}

.table tbody tr:hover {
  background: rgba(217, 93, 78, 0.05);
  box-shadow: 0 2px 8px rgba(217, 93, 78, 0.2);
}

/* ========================================
   BRAND LOGO & NAME HOVER - EFFET LUMINEUX
   ======================================== */

.brand {
  transition: all 0.3s ease;
}

.brand img {
  transition: all 0.4s ease;
}

.brand .name {
  transition: all 0.4s ease;
  position: relative;
}

/* Effet lumineux au hover sur tout le brand */
.brand:hover {
  filter: drop-shadow(0 0 25px rgba(217, 93, 78, 0.7));
}

/* Logo grossit avec glow doré intense */
.brand:hover img {
  transform: scale(1.15) rotate(-3deg);
  filter: drop-shadow(0 0 30px rgba(217, 93, 78, 0.9))
          drop-shadow(0 0 60px rgba(217, 93, 78, 0.6));
}

/* Nom du site avec effet lumineux */
.brand:hover .name {
  color: #f18268;
  text-shadow: 
    0 0 10px rgba(217, 93, 78, 0.8),
    0 0 20px rgba(217, 93, 78, 0.6),
    0 0 30px rgba(217, 93, 78, 0.4),
    0 0 40px rgba(217, 93, 78, 0.2);
  transform: scale(1.05);
}

/* ========================================
   SECTION TITLE EFFECTS
   ======================================== */

.section-title {
  transition: all 0.3s ease;
  position: relative;
}

.section-title:hover {
  transform: translateX(-4px);
  color: var(--accent-gold);
  text-shadow: 0 0 20px rgba(217, 93, 78, 0.5);
}

/* ========================================
   MODAL HOVER EFFECTS
   ======================================== */

.modal-overlay.active {
  backdrop-filter: blur(8px);
}

.modal {
  transition: all 0.3s ease;
}

/* ========================================
   BADGES HOVER
   ======================================== */

.badge,
.status-badge {
  transition: all 0.3s ease;
}

.badge:hover,
.status-badge:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(217, 93, 78, 0.3);
}

/* ========================================
   ADMIN ACTION BUTTONS HOVER
   ======================================== */

.btn-sm:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.btn-info:hover {
  box-shadow: 0 6px 16px rgba(23, 162, 184, 0.4);
}

.btn-warning:hover {
  box-shadow: 0 6px 16px rgba(255, 193, 7, 0.4);
}

.btn-danger:hover {
  box-shadow: 0 6px 16px rgba(220, 53, 69, 0.4);
}

.btn-success:hover {
  box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4);
}

/* ========================================
   RESPONSIVE - Désactiver sur mobile
   ======================================== */

@media (max-width: 768px) {
  /* Fix header qui couvre le hero */
  main {
    padding-top: 100px !important;
  }
  
  /* Désactiver les transformations trop complexes sur mobile */
  .card:hover,
  .btn:hover,
  .stat-card:hover {
    transform: translateY(-2px);
  }
  
  .social-link:hover {
    transform: translateY(-2px) scale(1.05);
  }
  
  .brand:hover img {
    transform: scale(1.05);
  }
  
  .section-title:hover {
    transform: none;
  }
}