/* ==========================================================================
   ECOPHOT - UTILITAIRES D'ANIMATIONS
   Classes pour transitions, transformations et animations
   ========================================================================== */

/* ==========================================================================
   TRANSITIONS
   ========================================================================== */

/* Durées de transition */
.transition-none { transition: none !important; }
.transition-all { transition: all 0.3s ease !important; }
.transition { transition: all 0.3s ease !important; }
.transition-colors { transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease !important; }
.transition-opacity { transition: opacity 0.3s ease !important; }
.transition-shadow { transition: box-shadow 0.3s ease !important; }
.transition-transform { transition: transform 0.3s ease !important; }

/* Durées spécifiques */
.duration-75 { transition-duration: 75ms !important; }
.duration-100 { transition-duration: 100ms !important; }
.duration-150 { transition-duration: 150ms !important; }
.duration-200 { transition-duration: 200ms !important; }
.duration-300 { transition-duration: 300ms !important; }
.duration-500 { transition-duration: 500ms !important; }
.duration-700 { transition-duration: 700ms !important; }
.duration-1000 { transition-duration: 1000ms !important; }

/* Courbes de transition */
.ease-linear { transition-timing-function: linear !important; }
.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1) !important; }
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important; }
.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; }

/* Délais de transition */
.delay-75 { transition-delay: 75ms !important; }
.delay-100 { transition-delay: 100ms !important; }
.delay-150 { transition-delay: 150ms !important; }
.delay-200 { transition-delay: 200ms !important; }
.delay-300 { transition-delay: 300ms !important; }
.delay-500 { transition-delay: 500ms !important; }
.delay-700 { transition-delay: 700ms !important; }
.delay-1000 { transition-delay: 1000ms !important; }

/* ==========================================================================
   TRANSFORMATIONS
   ========================================================================== */

/* Scale */
.scale-0 { transform: scale(0) !important; }
.scale-50 { transform: scale(0.5) !important; }
.scale-75 { transform: scale(0.75) !important; }
.scale-90 { transform: scale(0.9) !important; }
.scale-95 { transform: scale(0.95) !important; }
.scale-100 { transform: scale(1) !important; }
.scale-105 { transform: scale(1.05) !important; }
.scale-110 { transform: scale(1.1) !important; }
.scale-125 { transform: scale(1.25) !important; }
.scale-150 { transform: scale(1.5) !important; }

/* Rotate */
.rotate-0 { transform: rotate(0deg) !important; }
.rotate-1 { transform: rotate(1deg) !important; }
.rotate-2 { transform: rotate(2deg) !important; }
.rotate-3 { transform: rotate(3deg) !important; }
.rotate-6 { transform: rotate(6deg) !important; }
.rotate-12 { transform: rotate(12deg) !important; }
.rotate-45 { transform: rotate(45deg) !important; }
.rotate-90 { transform: rotate(90deg) !important; }
.rotate-180 { transform: rotate(180deg) !important; }
.-rotate-180 { transform: rotate(-180deg) !important; }
.-rotate-90 { transform: rotate(-90deg) !important; }
.-rotate-45 { transform: rotate(-45deg) !important; }
.-rotate-12 { transform: rotate(-12deg) !important; }
.-rotate-6 { transform: rotate(-6deg) !important; }
.-rotate-3 { transform: rotate(-3deg) !important; }
.-rotate-2 { transform: rotate(-2deg) !important; }
.-rotate-1 { transform: rotate(-1deg) !important; }

/* Translate */
.translate-x-0 { transform: translateX(0) !important; }
.translate-x-1 { transform: translateX(0.25rem) !important; }
.translate-x-2 { transform: translateX(0.5rem) !important; }
.translate-x-3 { transform: translateX(0.75rem) !important; }
.translate-x-4 { transform: translateX(1rem) !important; }
.translate-x-5 { transform: translateX(1.25rem) !important; }
.translate-x-6 { transform: translateX(1.5rem) !important; }
.-translate-x-1 { transform: translateX(-0.25rem) !important; }
.-translate-x-2 { transform: translateX(-0.5rem) !important; }
.-translate-x-3 { transform: translateX(-0.75rem) !important; }
.-translate-x-4 { transform: translateX(-1rem) !important; }
.-translate-x-5 { transform: translateX(-1.25rem) !important; }
.-translate-x-6 { transform: translateX(-1.5rem) !important; }

.translate-y-0 { transform: translateY(0) !important; }
.translate-y-1 { transform: translateY(0.25rem) !important; }
.translate-y-2 { transform: translateY(0.5rem) !important; }
.translate-y-3 { transform: translateY(0.75rem) !important; }
.translate-y-4 { transform: translateY(1rem) !important; }
.translate-y-5 { transform: translateY(1.25rem) !important; }
.translate-y-6 { transform: translateY(1.5rem) !important; }
.-translate-y-1 { transform: translateY(-0.25rem) !important; }
.-translate-y-2 { transform: translateY(-0.5rem) !important; }
.-translate-y-3 { transform: translateY(-0.75rem) !important; }
.-translate-y-4 { transform: translateY(-1rem) !important; }
.-translate-y-5 { transform: translateY(-1.25rem) !important; }
.-translate-y-6 { transform: translateY(-1.5rem) !important; }

/* Skew */
.skew-x-0 { transform: skewX(0deg) !important; }
.skew-x-1 { transform: skewX(1deg) !important; }
.skew-x-2 { transform: skewX(2deg) !important; }
.skew-x-3 { transform: skewX(3deg) !important; }
.skew-x-6 { transform: skewX(6deg) !important; }
.skew-x-12 { transform: skewX(12deg) !important; }
.-skew-x-12 { transform: skewX(-12deg) !important; }
.-skew-x-6 { transform: skewX(-6deg) !important; }
.-skew-x-3 { transform: skewX(-3deg) !important; }
.-skew-x-2 { transform: skewX(-2deg) !important; }
.-skew-x-1 { transform: skewX(-1deg) !important; }

.skew-y-0 { transform: skewY(0deg) !important; }
.skew-y-1 { transform: skewY(1deg) !important; }
.skew-y-2 { transform: skewY(2deg) !important; }
.skew-y-3 { transform: skewY(3deg) !important; }
.skew-y-6 { transform: skewY(6deg) !important; }
.skew-y-12 { transform: skewY(12deg) !important; }
.-skew-y-12 { transform: skewY(-12deg) !important; }
.-skew-y-6 { transform: skewY(-6deg) !important; }
.-skew-y-3 { transform: skewY(-3deg) !important; }
.-skew-y-2 { transform: skewY(-2deg) !important; }
.-skew-y-1 { transform: skewY(-1deg) !important; }

/* Transform origin */
.origin-center { transform-origin: center !important; }
.origin-top { transform-origin: top !important; }
.origin-top-right { transform-origin: top right !important; }
.origin-right { transform-origin: right !important; }
.origin-bottom-right { transform-origin: bottom right !important; }
.origin-bottom { transform-origin: bottom !important; }
.origin-bottom-left { transform-origin: bottom left !important; }
.origin-left { transform-origin: left !important; }
.origin-top-left { transform-origin: top left !important; }

/* ==========================================================================
   FILTRES
   ========================================================================== */

.filter { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important; }
.filter-none { filter: none !important; }

/* Blur */
.blur-none { filter: blur(0) !important; }
.blur-sm { filter: blur(4px) !important; }
.blur { filter: blur(8px) !important; }
.blur-md { filter: blur(12px) !important; }
.blur-lg { filter: blur(16px) !important; }
.blur-xl { filter: blur(24px) !important; }
.blur-2xl { filter: blur(40px) !important; }
.blur-3xl { filter: blur(64px) !important; }

/* Brightness */
.brightness-0 { filter: brightness(0) !important; }
.brightness-50 { filter: brightness(0.5) !important; }
.brightness-75 { filter: brightness(0.75) !important; }
.brightness-90 { filter: brightness(0.9) !important; }
.brightness-95 { filter: brightness(0.95) !important; }
.brightness-100 { filter: brightness(1) !important; }
.brightness-105 { filter: brightness(1.05) !important; }
.brightness-110 { filter: brightness(1.1) !important; }
.brightness-125 { filter: brightness(1.25) !important; }
.brightness-150 { filter: brightness(1.5) !important; }
.brightness-200 { filter: brightness(2) !important; }

/* Contrast */
.contrast-0 { filter: contrast(0) !important; }
.contrast-50 { filter: contrast(0.5) !important; }
.contrast-75 { filter: contrast(0.75) !important; }
.contrast-100 { filter: contrast(1) !important; }
.contrast-125 { filter: contrast(1.25) !important; }
.contrast-150 { filter: contrast(1.5) !important; }
.contrast-200 { filter: contrast(2) !important; }

/* Grayscale */
.grayscale-0 { filter: grayscale(0) !important; }
.grayscale { filter: grayscale(100%) !important; }

/* Invert */
.invert-0 { filter: invert(0) !important; }
.invert { filter: invert(100%) !important; }

/* Sepia */
.sepia-0 { filter: sepia(0) !important; }
.sepia { filter: sepia(100%) !important; }

/* Saturate */
.saturate-0 { filter: saturate(0) !important; }
.saturate-50 { filter: saturate(0.5) !important; }
.saturate-100 { filter: saturate(1) !important; }
.saturate-150 { filter: saturate(1.5) !important; }
.saturate-200 { filter: saturate(2) !important; }

/* ==========================================================================
   ANIMATIONS KEYFRAMES PERSONNALISÉES
   ========================================================================== */

/* Fade In */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-in-out !important;
}

/* Fade Out */
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.animate-fade-out {
    animation: fadeOut 0.5s ease-in-out !important;
}

/* Slide In */
@keyframes slideInUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.animate-slide-in-up {
    animation: slideInUp 0.5s ease-out !important;
}

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

.animate-slide-in-down {
    animation: slideInDown 0.5s ease-out !important;
}

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

.animate-slide-in-left {
    animation: slideInLeft 0.5s ease-out !important;
}

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

.animate-slide-in-right {
    animation: slideInRight 0.5s ease-out !important;
}

/* Scale In */
@keyframes scaleIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.animate-scale-in {
    animation: scaleIn 0.3s ease-out !important;
}

/* Bounce In */
@keyframes bounceIn {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.05); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
}

.animate-bounce-in {
    animation: bounceIn 0.6s ease-out !important;
}

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

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

/* Ping (pour notifications) */
@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

.animate-ping {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite !important;
}

/* Spin */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite !important;
}

/* Bounce */
@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

.animate-bounce {
    animation: bounce 1s infinite !important;
}

/* Shake */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
    20%, 40%, 60%, 80% { transform: translateX(2px); }
}

.animate-shake {
    animation: shake 0.5s ease-in-out !important;
}

/* Wobble */
@keyframes wobble {
    0% { transform: translateX(0%); }
    15% { transform: translateX(-25%) rotate(-5deg); }
    30% { transform: translateX(20%) rotate(3deg); }
    45% { transform: translateX(-15%) rotate(-3deg); }
    60% { transform: translateX(10%) rotate(2deg); }
    75% { transform: translateX(-5%) rotate(-1deg); }
    100% { transform: translateX(0%); }
}

.animate-wobble {
    animation: wobble 1s ease-in-out !important;
}

/* Flip */
@keyframes flip {
    0% { transform: perspective(400px) rotateY(0); }
    40% { transform: perspective(400px) translateZ(150px) rotateY(-190deg); }
    50% { transform: perspective(400px) translateZ(150px) rotateY(-190deg); }
    80% { transform: perspective(400px) rotateY(0deg); }
    100% { transform: perspective(400px); }
}

.animate-flip {
    animation: flip 1s ease-in-out !important;
}

/* Zoom In */
@keyframes zoomIn {
    from { transform: scale3d(0.3, 0.3, 0.3); opacity: 0; }
    50% { opacity: 1; }
}

.animate-zoom-in {
    animation: zoomIn 0.5s ease-out !important;
}

/* Zoom Out */
@keyframes zoomOut {
    from { opacity: 1; }
    50% { transform: scale3d(0.3, 0.3, 0.3); opacity: 0; }
    to { opacity: 0; }
}

.animate-zoom-out {
    animation: zoomOut 0.5s ease-in !important;
}

/* Float */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.animate-float {
    animation: float 3s ease-in-out infinite !important;
}

/* Glow */
@keyframes glow {
    0%, 100% { box-shadow: 0 0 5px rgba(26, 115, 232, 0.5); }
    50% { box-shadow: 0 0 20px rgba(26, 115, 232, 0.8), 0 0 30px rgba(26, 115, 232, 0.6); }
}

.animate-glow {
    animation: glow 2s ease-in-out infinite !important;
}

/* ==========================================================================
   ANIMATIONS POUR STATES HOVER/FOCUS
   ========================================================================== */

.hover-scale:hover { transform: scale(1.05) !important; }
.hover-scale-sm:hover { transform: scale(1.02) !important; }
.hover-scale-lg:hover { transform: scale(1.1) !important; }

.hover-lift:hover { transform: translateY(-2px) !important; }
.hover-lift-sm:hover { transform: translateY(-1px) !important; }
.hover-lift-lg:hover { transform: translateY(-4px) !important; }

.hover-shadow:hover { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important; }
.hover-shadow-lg:hover { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important; }

.hover-rotate:hover { transform: rotate(5deg) !important; }
.hover-rotate-sm:hover { transform: rotate(2deg) !important; }
.hover-rotate-lg:hover { transform: rotate(12deg) !important; }

.hover-brightness:hover { filter: brightness(1.1) !important; }
.hover-opacity:hover { opacity: 0.8 !important; }

/* ==========================================================================
   ANIMATIONS POUR SCROLL (AOS style)
   ========================================================================== */

.aos-init {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.aos-animate {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ==========================================================================
   ANIMATIONS DE CHARGEMENT
   ========================================================================== */

/* Skeleton loading */
@keyframes skeleton {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200px 100%;
    animation: skeleton 1.2s ease-in-out infinite !important;
}

/* Spinner */
@keyframes spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--primary, #1a73e8);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spinner 1s linear infinite !important;
}

.spinner-sm {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

.spinner-lg {
    width: 60px;
    height: 60px;
    border-width: 6px;
}

/* Dots loading */
@keyframes dots {
    0%, 20% { color: rgba(0, 0, 0, 0); text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0); }
    40% { color: black; text-shadow: 0.25em 0 0 rgba(0, 0, 0, 0), 0.5em 0 0 rgba(0, 0, 0, 0); }
    60% { text-shadow: 0.25em 0 0 black, 0.5em 0 0 rgba(0, 0, 0, 0); }
    80%, 100% { text-shadow: 0.25em 0 0 black, 0.5em 0 0 black; }
}

.dots::after {
    content: " ...";
    animation: dots 1s steps(5, end) infinite !important;
}

/* ==========================================================================
   CONTRÔLES D'ANIMATION
   ========================================================================== */

.animate-none { animation: none !important; }
.animate-paused { animation-play-state: paused !important; }
.animate-running { animation-play-state: running !important; }

/* Direction */
.animate-normal { animation-direction: normal !important; }
.animate-reverse { animation-direction: reverse !important; }
.animate-alternate { animation-direction: alternate !important; }
.animate-alternate-reverse { animation-direction: alternate-reverse !important; }

/* Fill mode */
.animate-fill-none { animation-fill-mode: none !important; }
.animate-fill-forwards { animation-fill-mode: forwards !important; }
.animate-fill-backwards { animation-fill-mode: backwards !important; }
.animate-fill-both { animation-fill-mode: both !important; }

/* Iteration count */
.animate-once { animation-iteration-count: 1 !important; }
.animate-twice { animation-iteration-count: 2 !important; }
.animate-infinite { animation-iteration-count: infinite !important; }

/* ==========================================================================
   RESPONSIVE ANIMATIONS
   ========================================================================== */

/* Reduce motion pour accessibilité */
@media (prefers-reduced-motion: reduce) {
    .animate-spin,
    .animate-ping,
    .animate-pulse,
    .animate-bounce,
    .animate-fade-in,
    .animate-scale-in,
    .animate-slide-in-up,
    .animate-slide-in-down,
    .animate-slide-in-left,
    .animate-slide-in-right {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .transition-all,
    .transition-colors,
    .transition-opacity,
    .transition-shadow,
    .transition-transform {
        transition-duration: 0.01ms !important;
    }
}

/* Animations responsives */
@media (max-width: 768px) {
    .animate-mobile-fade { animation: fadeIn 0.3s ease-in-out; }
    .animate-mobile-slide { animation: slideInUp 0.3s ease-out; }
}

@media (min-width: 768px) {
    .animate-desktop-scale { animation: scaleIn 0.5s ease-out; }
    .animate-desktop-float { animation: float 3s ease-in-out infinite; }
}

/* ==========================================================================
   UTILITAIRES TRANSFORM COMPOSITES
   ========================================================================== */

.transform-gpu {
    transform: translateZ(0) !important;
    will-change: transform !important;
}

.backface-hidden {
    backface-visibility: hidden !important;
}

.backface-visible {
    backface-visibility: visible !important;
}

/* ==========================================================================
   PERFORMANCE ET OPTIMISATION
   ========================================================================== */

.will-change-auto { will-change: auto !important; }
.will-change-scroll { will-change: scroll-position !important; }
.will-change-contents { will-change: contents !important; }
.will-change-transform { will-change: transform !important; }

.contain-none { contain: none !important; }
.contain-strict { contain: strict !important; }
.contain-content { contain: content !important; }
.contain-size { contain: size !important; }
.contain-layout { contain: layout !important; }
.contain-style { contain: style !important; }
.contain-paint { contain: paint !important; }