/**
 * Comfy - Custom CSS
 * Styles additionnels pour les animations et composants avancees
 */

/* Police Google Fonts - Playfair Display et Lato */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Playfair+Display:wght@400;500;600;700&display=swap');

/* Configuration Tailwind via CSS */
:root {
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Styles de base */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typographie */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
}

/* Navigation - Effets de survol */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: currentColor;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.nav-link:hover::after {
  width: 60%;
}

/* Boutons */
.btn-primary {
  @apply bg-stone-800 text-white px-6 py-3 rounded-lg font-medium transition-all duration-300;
}

.btn-primary:hover {
  @apply bg-stone-700 shadow-lg transform -translate-y-0.5;
}

.btn-secondary {
  @apply border-2 border-stone-800 text-stone-800 px-6 py-3 rounded-lg font-medium transition-all duration-300;
}

.btn-secondary:hover {
  @apply bg-stone-800 text-white;
}

/* Cartes produit */
.product-card {
  @apply bg-white rounded-xl overflow-hidden transition-all duration-300;
}

.product-card:hover {
  @apply shadow-xl transform -translate-y-1;
}

.product-card .product-image {
  @apply aspect-[3/4] object-cover transition-transform duration-500;
}

.product-card:hover .product-image {
  @apply scale-105;
}

/* Section Hero Carousel */
.carousel-container {
  @apply relative overflow-hidden h-[60vh] md:h-[70vh];
}

.carousel-slide {
  @apply absolute inset-0 opacity-0 transition-opacity duration-700;
}

.carousel-slide.active {
  @apply opacity-100;
}

.carousel-slide .slide-image {
  @apply w-full h-full object-cover;
}

.carousel-slide .slide-content {
  @apply absolute inset-0 flex items-center justify-center;
}

/* Points de navigation du carrousel */
.carousel-dot {
  @apply w-3 h-3 rounded-full bg-white/50 transition-all duration-300 cursor-pointer;
}

.carousel-dot.active {
  @apply bg-white w-8;
}

/* FAQ Accordéon */
.accordion-button {
  @apply w-full text-left flex justify-between items-center py-4 font-medium transition-colors duration-200;
}

.accordion-button:hover {
  @apply text-stone-800;
}

.accordion-content {
  @apply overflow-hidden max-h-0 transition-max-height duration-300 ease-in-out;
}

.accordion-content.active {
  @apply max-h-screen;
}

/* Animations Fade-in */
.fade-in {
  @apply opacity-0 transform translate-y-8 transition-all duration-700;
}

.fade-in.visible {
  @apply opacity-100 translate-y-0;
}

/* Délais d'animation pour les éléments en cascade */
.fade-in-delay-1 { transition-delay: 100ms; }
.fade-in-delay-2 { transition-delay: 200ms; }
.fade-in-delay-3 { transition-delay: 300ms; }
.fade-in-delay-4 { transition-delay: 400ms; }
.fade-in-delay-5 { transition-delay: 500ms; }
.fade-in-delay-6 { transition-delay: 600ms; }

/* Badge */
.badge {
  @apply inline-block px-3 py-1 text-xs font-medium rounded-full;
}

.badge-new {
  @apply bg-emerald-100 text-emerald-800;
}

.badge-sale {
  @apply bg-rose-100 text-rose-800;
}

.badge-eco {
  @apply bg-amber-100 text-amber-800;
}

/* Images placeholder - Style de base */
.img-placeholder {
  @apply bg-stone-200 flex items-center justify-center text-stone-400;
}

/* Formulaire */
.form-input {
  @apply w-full px-4 py-3 border border-stone-300 rounded-lg focus:outline-none focus:border-stone-500 focus:ring-1 focus:ring-stone-500 transition-colors;
}

.form-input::placeholder {
  @apply text-stone-400;
}

/* Tableau des tailles */
.size-table {
  @apply w-full border-collapse;
}

.size-table th {
  @apply bg-stone-100 px-4 py-3 text-left font-medium text-stone-700;
}

.size-table td {
  @apply px-4 py-3 border-b border-stone-200 text-stone-600;
}

.size-table tr:hover td {
  @apply bg-stone-50;
}

/* Loading spinner */
.spinner {
  @apply animate-spin rounded-full border-2 border-stone-300 border-t-stone-800;
}

/* Sélecteur de taille */
.size-option {
  @apply w-12 h-12 flex items-center justify-center border border-stone-300 rounded-lg cursor-pointer transition-all duration-200;
}

.size-option:hover {
  @apply border-stone-500;
}

.size-option.selected {
  @apply bg-stone-800 text-white border-stone-800;
}

/* Couleurs des variants */
.color-swatch {
  @apply w-8 h-8 rounded-full cursor-pointer border-2 border-transparent transition-all duration-200;
}

.color-swatch:hover {
  @apply transform scale-110;
}

.color-swatch.selected {
  @apply border-stone-800 ring-2 ring-stone-300;
}

/* Responsive utilities supplementaires */
@media (max-width: 640px) {
  .container {
    @apply px-4;
  }
}

/* Animations keyframes */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

.animate-fade-in {
  animation: fadeIn 0.4s ease-out forwards;
}

/* Hover effect pour les cartes de fonctionnalités */
.feature-card {
  @apply p-6 rounded-xl bg-white shadow-sm border border-stone-100 transition-all duration-300;
}

.feature-card:hover {
  @apply shadow-lg transform -translate-y-1;
}

/* Trust signals icons */
.trust-icon {
  @apply w-12 h-12 flex items-center justify-center rounded-full bg-stone-100 text-stone-700 mb-4;
}

/* Navigation breadcrumb */
.breadcrumb {
  @apply flex items-center space-x-2 text-sm text-stone-500;
}

.breadcrumb a {
  @apply hover:text-stone-800 transition-colors;
}

.breadcrumb-separator {
  @apply text-stone-300;
}

/* Pagination */
.pagination {
  @apply flex items-center justify-center space-x-2;
}

.pagination-item {
  @apply w-10 h-10 flex items-center justify-center rounded-lg border border-stone-300 text-stone-600 transition-all duration-200;
}

.pagination-item:hover {
  @apply bg-stone-100 border-stone-400;
}

.pagination-item.active {
  @apply bg-stone-800 text-white border-stone-800;
}

/* Filtres */
.filter-tag {
  @apply px-4 py-2 rounded-full border border-stone-300 text-stone-600 text-sm cursor-pointer transition-all duration-200;
}

.filter-tag:hover,
.filter-tag.active {
  @apply bg-stone-800 text-white border-stone-800;
}

/* Galerie produit */
.gallery-main {
  @apply aspect-[3/4] rounded-xl overflow-hidden bg-stone-100;
}

.gallery-thumbnails {
  @apply grid grid-cols-4 gap-3 mt-4;
}

.gallery-thumbnail {
  @apply aspect-square rounded-lg overflow-hidden cursor-pointer border-2 border-transparent transition-all duration-200;
}

.gallery-thumbnail:hover,
.gallery-thumbnail.active {
  @apply border-stone-800;
}