:root {
  --color-primary: #e87722;
  --color-primary-dark: #c4621a;
  --color-primary-light: #fff4ea;
  --color-dark: #1a1a1a;
  --color-dark-2: #2c2c2a;
  --color-gray-light: #f7f6f4;
  --color-gray-border: #e5e3de;
  --color-text: #1a1a1a;
  --color-text-muted: #6b6966;
  --color-white: #ffffff;
  --font-heading: 'Sora', sans-serif;
  --font-body: 'Inter', sans-serif;
  --radius-card: 12px;
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.15);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --container-max: 1200px;
  /* Utilisation seule : padding: var(--container-padding) → 0 2rem */
  --container-padding: 0 2rem;
  /* Gouttière horizontale seule (pour éviter padding: 0 var(--container-padding) qui casse le shorthand) */
  --gutter-x: clamp(1rem, 4vw, 2rem);
}

[data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate].visible {
  opacity: 1;
  transform: translateY(0);
}

.services-grid .service-card:nth-child(1) {
  transition-delay: 0.1s;
}

.services-grid .service-card:nth-child(2) {
  transition-delay: 0.2s;
}

.services-grid .service-card:nth-child(3) {
  transition-delay: 0.3s;
}

.services-grid .service-card:nth-child(4) {
  transition-delay: 0.4s;
}