/* ===============================================
   ANIMATIONS COMMUNES - MODERNES ET PROFESSIONNELLES
   =============================================== */

/* Courbe de Bézier premium pour toutes les animations */
:root {
  --animation-curve: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --animation-duration-fast: 0.6s;
  --animation-duration-medium: 0.8s;
  --animation-duration-slow: 1.2s;
  --tertiary-color: #8B4513;
}

/* ===============================================
   PRÉVENTION SCROLL HORIZONTAL SEULEMENT
   =============================================== */
html, body {
}

/* ===============================================
   ANIMATIONS DE BASE - RÉUTILISABLES
   =============================================== */

/* Fade in avec translation verticale */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: all var(--animation-duration-medium) var(--animation-curve);
}

.fade-in-up.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Fade in left - CORRIGÉ pour éviter le scroll horizontal */
.fade-in-left {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: all var(--animation-duration-slow) var(--animation-curve);
}

.fade-in-left.animate-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Fade in right - CORRIGÉ pour éviter le scroll horizontal */
.fade-in-right {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: all var(--animation-duration-slow) var(--animation-curve);
}

.fade-in-right.animate-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Fade in avec scale */
.fade-in-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: all var(--animation-duration-medium) var(--animation-curve);
}

.fade-in-scale.animate-in {
  opacity: 1;
  transform: scale(1);
}

/* ===============================================
   ANIMATIONS SPÉCIFIQUES - HERO BANNER
   =============================================== */

.hero-title,
.hero-title-desktop {
  opacity: 0;
  transform: translateY(30px);
  transition: all var(--animation-duration-medium) var(--animation-curve);
}

.hero-title.animate-in,
.hero-title-desktop.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Hero image - CORRIGÉ */
.hero-image {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: all 1s var(--animation-curve);
  transition-delay: 0.2s;
}

.hero-image.animate-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.hero-text {
  opacity: 0;
  transform: translateY(20px);
  transition: all var(--animation-duration-medium) var(--animation-curve);
  transition-delay: 0.4s;
}

.hero-text.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Hero secondary - CORRIGÉ */
.hero-secondary {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: all 1s var(--animation-curve);
  transition-delay: 0.3s;
}

.hero-secondary.animate-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.hero-overlay {
  opacity: 0;
  transform: translateY(20px);
  transition: all var(--animation-duration-medium) var(--animation-curve);
  transition-delay: 0.6s;
  background-color: transparent !important;
  grid-column-start: unset !important;
  grid-row-start: unset !important;
}

.hero-overlay.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* ===============================================
   ANIMATIONS SPÉCIFIQUES - CONTACT SECTION
   =============================================== */

/* Contact image - CORRIGÉ */
.contact-image {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: all var(--animation-duration-slow) var(--animation-curve);
}

.contact-image.animate-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Contact form - CORRIGÉ */
.contact-form {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: all var(--animation-duration-slow) var(--animation-curve);
  transition-delay: 0.3s;
}

.contact-form.animate-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.contact-heading {
  opacity: 0;
  transform: translateY(-30px);
  transition: all var(--animation-duration-medium) var(--animation-curve);
  transition-delay: 0.5s;
}

.contact-heading.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.contact-description {
  opacity: 0;
  transform: translateY(20px);
  transition: all var(--animation-duration-medium) var(--animation-curve);
  transition-delay: 0.7s;
}

.contact-description.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* ===============================================
   ANIMATIONS SPÉCIFIQUES - WORK SECTION
   =============================================== */

/* Work image - CORRIGÉ */
.work-image {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: all var(--animation-duration-slow) var(--animation-curve);
}

.work-image.animate-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Work content - CORRIGÉ */
.work-content {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: all var(--animation-duration-slow) var(--animation-curve);
  transition-delay: 0.2s;
}

.work-content.animate-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.work-heading {
  opacity: 0;
  transform: translateY(-25px);
  transition: all var(--animation-duration-medium) var(--animation-curve);
  transition-delay: 0.4s;
}

.work-heading.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.work-text {
  opacity: 0;
  transform: translateY(25px);
  transition: all var(--animation-duration-medium) var(--animation-curve);
  transition-delay: 0.6s;
}

.work-text.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* ===============================================
   ANIMATIONS FORMULAIRES
   =============================================== */

.form-field {
  opacity: 0;
  transform: translateY(30px);
  transition: all var(--animation-duration-fast) var(--animation-curve);
  position: relative;
}

.form-field:nth-child(1) {
  transition-delay: 0.9s;
}

.form-field:nth-child(2) {
  transition-delay: 1.1s;
}

.form-field:nth-child(3) {
  transition-delay: 1.3s;
}

.form-field.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.form-button {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: all var(--animation-duration-fast) var(--animation-curve);
  transition-delay: 1.5s;
}

.form-button.animate-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ===============================================
   ANIMATIONS POUR CONTENU DYNAMIQUE
   =============================================== */

/* Effet de staggered pour les paragraphes */
.work-text :deep(p),
.hero-text :deep(p),
.contact-description :deep(p) {
  opacity: 0;
  transform: translateY(15px);
  transition: all var(--animation-duration-fast) var(--animation-curve);
}

.work-text.animate-in :deep(p:nth-child(1)),
.hero-text.animate-in :deep(p:nth-child(1)),
.contact-description.animate-in :deep(p:nth-child(1)) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.7s;
}

.work-text.animate-in :deep(p:nth-child(2)),
.hero-text.animate-in :deep(p:nth-child(2)),
.contact-description.animate-in :deep(p:nth-child(2)) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.8s;
}

.work-text.animate-in :deep(p:nth-child(3)),
.hero-text.animate-in :deep(p:nth-child(3)),
.contact-description.animate-in :deep(p:nth-child(3)) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.9s;
}

.work-text.animate-in :deep(p:nth-child(n+4)),
.hero-text.animate-in :deep(p:nth-child(n+4)),
.contact-description.animate-in :deep(p:nth-child(n+4)) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1s;
}

/* Animation pour les éléments de liste - CORRIGÉ */
.work-text :deep(ul li),
.work-text :deep(ol li) {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s var(--animation-curve);
}

.work-text.animate-in :deep(ul li),
.work-text.animate-in :deep(ol li) {
  opacity: 1;
  transform: translateY(0);
}

.work-text.animate-in :deep(ul li:nth-child(1)),
.work-text.animate-in :deep(ol li:nth-child(1)) {
  transition-delay: 0.8s;
}

.work-text.animate-in :deep(ul li:nth-child(2)),
.work-text.animate-in :deep(ol li:nth-child(2)) {
  transition-delay: 0.9s;
}

.work-text.animate-in :deep(ul li:nth-child(3)),
.work-text.animate-in :deep(ol li:nth-child(3)) {
  transition-delay: 1s;
}

.work-text.animate-in :deep(ul li:nth-child(n+4)),
.work-text.animate-in :deep(ol li:nth-child(n+4)) {
  transition-delay: 1.1s;
}

/* ===============================================
   EFFETS INTERACTIFS
   =============================================== */

/* Effets sur les liens */
.hero-title a,
.hero-title-desktop a {
  position: relative;
  overflow: hidden;
  transition: color 0.3s ease;
}

.hero-title a::after,
.hero-title-desktop a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 0.3s ease;
}

.hero-title a:hover::after,
.hero-title-desktop a:hover::after {
  width: 100%;
}

/* Effets sur les images */
.hero-image img,
.hero-secondary img,
.work-image img {
  transition: filter 0.3s ease;
}




/* Effets sur les inputs */
.form-field input,
.form-field textarea {
  transition: all 0.3s var(--animation-curve);
}




/* Effets sur les boutons */
.form-button button {
  position: relative;
  overflow: hidden;
  transition: all 0.3s var(--animation-curve);
}

.form-button button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.form-button button:hover::before {
  left: 100%;
}

.form-button button:hover {
  transform: translateY(-2px);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ===============================================
   ANIMATIONS RESPONSIVES
   =============================================== */

@media (max-width: 1024px) {
  .hero-image {
    transform: translateY(30px) scale(0.95);
  }
  
  .hero-image.animate-in {
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 768px) {
  .contact-image,
  .work-image {
    transform: translateY(40px) scale(0.95);
  }
  
  .contact-image.animate-in,
  .work-image.animate-in {
    transform: translateY(0) scale(1);
  }
  
  .contact-form,
  .work-content {
    transform: translateY(40px) scale(0.95);
  }
  
  .contact-form.animate-in,
  .work-content.animate-in {
    transform: translateY(0) scale(1);
  }
}

/* ===============================================
   ACCESSIBILITÉ
   =============================================== */

/* Réduction de mouvement pour l'accessibilité */
@media (prefers-reduced-motion: reduce) {
  .hero-title,
  .hero-title-desktop,
  .hero-image,
  .hero-text,
  .hero-secondary,
  .hero-overlay,
  .contact-image,
  .contact-form,
  .contact-heading,
  .contact-description,
  .work-image,
  .work-content,
  .work-heading,
  .work-text,
  .form-field,
  .form-button,
  .work-text :deep(p),
  .work-text :deep(ul li),
  .work-text :deep(ol li) {
    transform: none !important;
    transition: opacity 0.3s ease !important;
  }
}

/* Focus pour l'accessibilité */
.work-image:focus-within,
.work-content:focus-within {
  outline: 2px solid rgba(139, 69, 19, 0.5);
  outline-offset: 4px;
  border-radius: 8px;
}

/* ===============================================
   ANIMATIONS SPÉCIALES
   =============================================== */

/* Effet de pulse subtil sur les inputs requis */
.form-field input:invalid,
.form-field textarea:invalid {
  animation: subtle-pulse 2s infinite;
}

@keyframes subtle-pulse {
  0% { border-color: inherit; }
  50% { border-color: rgba(239, 68, 68, 0.3); }
  100% { border-color: inherit; }
}

/* Animation pour les titres rotatés */
.titlerotate,
.titlerotate2 {
  transition: all var(--animation-duration-medium) var(--animation-curve);
  transition-delay: 0.5s;
}

/* Effet de parallaxe subtil - CORRIGÉ */
.work-image,
.work-content {
  perspective: 1000px;
}

.work-image .bg-no-repeat,
.work-content .bg-no-repeat {
  transition: transform var(--animation-duration-fast) var(--animation-curve);
}