/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.highlight-reveal {
  display: inline-block;
  background-image: linear-gradient(120deg, rgba(255, 122, 0, 0.25) 0%, rgba(255, 122, 0, 0.25) 100%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-position: 0 92%;
  transition: background-size 1.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  padding: 0 4px;
  border-radius: 2px;
}

/* On force le reset immédiat quand la question se ferme */
.collapse:not(:has(input[type="radio"]:checked)) .highlight-reveal {
  background-size: 0% 100% !important;
  transition: none !important;
}

/* Déclenchement quand le collapse est ouvert */
.collapse[open] .highlight-reveal,
.collapse-open .highlight-reveal,
.collapse:focus-within .highlight-reveal,
.collapse:has(input[type="radio"]:checked) .highlight-reveal {
  background-size: 100% 100%;
  transition: background-size 1.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition-delay: 0.5s;
}

/* Animation de swipe pour le carousel (doigt qui fait glisser) */
@keyframes swipe-finger {
  0% {
    transform: translateX(5px) rotate(30deg);
    opacity: 0;
  }
  20% {
    transform: translateX(15px) rotate(30deg);
    opacity: 1;
  }
  80% {
    transform: translateX(-15px) rotate(-30deg);
    opacity: 1;
  }
  100% {
    transform: translateX(-15px) rotate(-30deg);
    opacity: 0;
  }
}

.animate-swipe {
  animation: swipe-finger 2.5s ease-in-out infinite;
  transform-origin: bottom center;
}