/**
 * SYSTÈME D'ANIMATION DE BORDURE PERSONNALISABLE
 * Fichier dédié aux animations de bordure avec ou sans icône locomotive
 * 
 * CLASSES DE BASE (à utiliser seules) :
 * - border-animate-base: Animation avec bordure grise de base (sans icône)
 * - border-animate: Animation complète avec bordure grise et icône locomotive  
 * - border-animate-clean: Animation sans bordure de base (sans icône)
 * - border-animate-clean-icon: Animation sans bordure de base avec icône locomotive
 * - border-static: Bordure statique grise
 * 
 * MODIFICATEURS (à combiner avec les classes de base) :
 * - border-animate-fast: Animation rapide (0.2s) - À COMBINER
 * - border-animate-slow: Animation lente (0.8s) - À COMBINER  
 * - border-spaced: Ajoute espace entre texte et bordure - À COMBINER
 * 
 * EXEMPLES D'USAGE :
 * - border-animate-clean border-animate-fast: Animation clean rapide
 * - border-animate border-animate-slow border-spaced: Animation avec icône, lente et espacée
 * - border-animate-clean-icon border-animate-fast: Animation clean avec icône rapide
 */

/* ===== ANIMATIONS AVEC BORDURE GRISE DE BASE ===== */

/* Classe de base - bordure animée SANS icône */
.border-animate-base {
  position: relative;
  display: inline-block;
  border-bottom: 1px solid var(--color-woodsmoke-1200);
  overflow: visible;
}

.border-animate-base::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0%;
  height: 1px;
  background-color: var(--color-blaze-orange-600);
  transition: width 0.5s ease-in-out;
}

.border-animate-base:hover::before {
  width: 100%;
}

.border-animate-base:not(:hover)::before {
  transform-origin: right;
}

/* Classe complète - bordure animée AVEC icône locomotive */
.border-animate {
  position: relative;
  display: inline-block;
  border-bottom: 1px solid var(--color-woodsmoke-1200);
  overflow: visible;
}

.border-animate::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0%;
  height: 1px;
  background-color: var(--color-blaze-orange-600);
  transition: width 0.5s ease-in-out;
}

.border-animate:hover::before {
  width: 100%;
}

.border-animate:not(:hover)::before {
  transform-origin: right;
}

/* Icône locomotive */
.border-animate::after {
  content: '';
  position: absolute;
  bottom: -12px;
  width: 24px;
  height: 24px;
  background-image: url('../icons/gun-balle.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  left: -24px;
  transition: left 0.5s ease-in-out, opacity 0.1s ease-in-out;
  z-index: 2;
  filter: invert(42%) sepia(95%) saturate(1941%) hue-rotate(4deg) brightness(99%) contrast(94%);
  pointer-events: none;
}

.border-animate:hover::after {
  opacity: 1;
  left: calc(100% - 24px);
}

.border-animate:not(:hover)::after {
  left: -24px;
  opacity: 0;
  transition: left 0.5s ease-in-out, opacity 0.3s ease-in-out 0.2s;
}

/* ===== ANIMATIONS SANS BORDURE DE BASE (CLEAN) ===== */

/* Animation de bordure SANS bordure visible par défaut - SANS icône */
.border-animate-clean {
  position: relative;
  display: inline-block;
  overflow: visible;
}

.border-animate-clean::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0%;
  height: 1px;
  background-color: var(--color-blaze-orange-600);
  transition: width 0.5s ease-in-out;
}

.border-animate-clean:hover::before {
  width: 100%;
}

.border-animate-clean:not(:hover)::before {
  transform-origin: right;
}

/* Animation complète SANS bordure visible par défaut - AVEC icône locomotive */
.border-animate-clean-icon {
  position: relative;
  display: inline-block;
  overflow: visible;
}

.border-animate-clean-icon::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0%;
  height: 1px;
  background-color: var(--color-blaze-orange-600);
  transition: width 0.5s ease-in-out;
}

.border-animate-clean-icon:hover::before {
  width: 100%;
}

.border-animate-clean-icon:not(:hover)::before {
  transform-origin: right;
}

/* Icône locomotive pour version clean */
.border-animate-clean-icon::after {
  content: '';
  position: absolute;
  bottom: -12px;
  width: 24px;
  height: 24px;
  background-image: url('../icons/gun-balle.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  left: -24px;
  transition: left 0.5s ease-in-out, opacity 0.1s ease-in-out;
  z-index: 2;
  filter: invert(42%) sepia(95%) saturate(1941%) hue-rotate(4deg) brightness(99%) contrast(94%);
  pointer-events: none;
}

.border-animate-clean-icon:hover::after {
  opacity: 1;
  left: calc(100% - 24px);
}

.border-animate-clean-icon:not(:hover)::after {
  left: -24px;
  opacity: 0;
  transition: left 0.5s ease-in-out, opacity 0.3s ease-in-out 0.2s;
}

/* ===== VARIANTES STATIQUES ===== */

/* Bordure sans animation - statique */
.border-static {
  border-bottom: 1px solid var(--color-woodsmoke-1200);
}

/* ===== MODIFICATEURS DE VITESSE ===== */
/* Ces classes modifient la vitesse des animations existantes - À COMBINER avec les classes de base */

/* Animation rapide (0.2s) - Spécificité élevée pour surcharger les transitions */

/* Transitions des bordures (::before) pour toutes les classes */
.border-animate-base.border-animate-fast::before,
.border-animate.border-animate-fast::before,
.border-animate-clean.border-animate-fast::before,
.border-animate-clean-icon.border-animate-fast::before {
  transition: width 0.2s ease-in-out !important;
}

/* Transitions des icônes (::after) SEULEMENT pour les classes avec icône */
.border-animate.border-animate-fast::after,
.border-animate-clean-icon.border-animate-fast::after {
  transition: left 0.2s ease-in-out, opacity 0.1s ease-in-out !important;
}

.border-animate.border-animate-fast:not(:hover)::after,
.border-animate-clean-icon.border-animate-fast:not(:hover)::after {
  transition: left 0.2s ease-in-out, opacity 0.1s ease-in-out 0.1s !important;
}

/* Animation lente (0.8s) - Spécificité élevée pour surcharger les transitions */

/* Transitions des bordures (::before) pour toutes les classes */
.border-animate-base.border-animate-slow::before,
.border-animate.border-animate-slow::before,
.border-animate-clean.border-animate-slow::before,
.border-animate-clean-icon.border-animate-slow::before {
  transition: width 0.8s ease-in-out !important;
}

/* Transitions des icônes (::after) SEULEMENT pour les classes avec icône */
.border-animate.border-animate-slow::after,
.border-animate-clean-icon.border-animate-slow::after {
  transition: left 0.8s ease-in-out, opacity 0.1s ease-in-out !important;
}

.border-animate.border-animate-slow:not(:hover)::after,
.border-animate-clean-icon.border-animate-slow:not(:hover)::after {
  transition: left 0.8s ease-in-out, opacity 0.3s ease-in-out 0.2s !important;
}

/* ===== MODIFICATEUR D'ESPACEMENT ===== */

/* Repositionne les bordures pour la classe spaced */
.border-spaced.border-animate-base::before,
.border-spaced.border-animate::before,
.border-spaced.border-animate-clean::before,
.border-spaced.border-animate-clean-icon::before {
  bottom: -7px; /* -1px de base + -6px d'espace */
}

/* Repositionne aussi les icônes pour garder l'alignement */
.border-spaced.border-animate::after,
.border-spaced.border-animate-clean-icon::after {
  bottom: -18px; /* -12px de base + -6px d'espace */
}

/* ===== EXTENSION DU CSS EXISTANT POUR TABS ===== */

/* Quand le button est sélectionné, change la couleur de la bordure du div parent */
.tabs div:has(button[aria-selected="true"]) {
  border-bottom-color: #F3610C !important;
}