/* Conteneur */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Texte */
.text-center { text-align: center; }
.text-gold { color: var(--gold); }
.text-gold-light { color: var(--gold-light); }
.text-dark { color: var(--dark); }
.text-gray { color: var(--gray); }
.text-white { color: white; }
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-5xl { font-size: 3rem; }

/* Backgrounds */
.bg-gold { background-color: var(--gold); }
.bg-gold-light { background-color: var(--gold-light); }
.bg-gold-dark { background-color: var(--gold-dark); }
.bg-white { background-color: var(--white); }
.bg-off-white { background-color: var(--off-white); }
.bg-dark { background-color: var(--dark); }
.bg-gold\/10 { background-color: rgba(212, 175, 55, 0.1); }
.bg-white\/90 { background-color: rgba(255, 255, 255, 0.9); }
.bg-black\/50 { background-color: rgba(0, 0, 0, 0.5); }

/* Bordures */
.border-gold { border-color: var(--gold); }
.border-gold\/20 { border-color: rgba(212, 175, 55, 0.2); }
.border-white\/20 { border-color: rgba(255, 255, 255, 0.2); }

/* Arrondis */
.rounded-full { border-radius: 9999px; }
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }

/* Ombres */
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
.shadow-gold { box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2); }
.hover\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); }

/* Transitions */
.transition { transition: all 0.3s ease; }
.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:bg-gold-dark:hover { background-color: var(--gold-dark); }
.hover\:bg-gold-light:hover { background-color: var(--gold-light); }
.hover\:text-gold:hover { color: var(--gold); }

/* Layout & espacement */
.min-h-screen { min-height: 100vh; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.pt-20 { padding-top: 5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-12 { margin-top: 3rem; }
.space-y-4 > * + * { margin-top: 1rem; }

/* Flexbox */
.flex { display: flex; }
.inline-block { display: inline-block; }
.flex-col { flex-direction: column; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.items-center { align-items: center; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }

/* Grid */
.grid { display: grid; }
.md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Positionnement */
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.top-0 { top: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.bottom-6 { bottom: 1.5rem; }
.right-6 { right: 1.5rem; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }

/* Effets visuels */
.backdrop-blur-sm { backdrop-filter: blur(4px); }
.backdrop-blur-md { backdrop-filter: blur(12px); }
.overflow-hidden { overflow: hidden; }
.object-cover { object-fit: cover; }

/* Responsive */
@media (min-width: 768px) {
  .md\:text-2xl { font-size: 1.5rem; }
  .md\:text-4xl { font-size: 2.25rem; }
  .md\:text-7xl { font-size: 4.5rem; }
  .md\:flex { display: flex; }
  .md\:hidden { display: none; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .lg\:text-8xl { font-size: 6rem; }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Animations globales */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes bounce-arrow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-fadeIn {
  animation: fadeIn 1s ease-out;
}

.animate-slideUp {
  animation: slideUp 0.8s ease-out forwards;
}

.animation-delay-200 {
  animation-delay: 0.2s;
  opacity: 0;
}

.animation-delay-400 {
  animation-delay: 0.4s;
  opacity: 0;
}