/* ==========================================
   SERVME - COMPONENTS CARDS
   Styles cartes génériques - DESKTOP
   Extrait de offres.css, pricing.css, design-system.css
   ========================================== */

/* ============================================
   CARTE GÉNÉRIQUE
   ============================================ */
.card {
  background: var(--white, #FFFFFF);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-base, 0 2px 4px rgba(0, 0, 0, 0.08), 0 2px 3px rgba(0, 0, 0, 0.06));
  transition: all var(--transition-base, 0.2s ease);
}

.card-hover {
  cursor: pointer;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg, 0 8px 16px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08));
}

.card-header {
  padding: var(--space-6, 24px);
  border-bottom: 1px solid var(--gray-300, #F7F7F7);
}

.card-body {
  padding: var(--space-6, 24px);
}

.card-footer {
  padding: var(--space-6, 24px);
  border-top: 1px solid var(--gray-300, #F7F7F7);
}

/* ============================================
   JOB CARD (offres)
   ============================================ */
.job-card {
  background: var(--bg-white, #FFFFFF);
  border-radius: 16px;
  padding: 1.75rem;
  box-shadow: var(--shadow, 0 2px 8px rgba(0, 0, 0, 0.08));
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border: 1px solid transparent;
  cursor: pointer;
}

.job-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl, 0 16px 32px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.10));
  border-color: var(--border-light, #EBEBEB);
}

/* ============================================
   PRICING CARD (pricing)
   ============================================ */
.pricing-card {
  background: white;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transition: transform 0.2s, box-shadow 0.2s;
  border: 2px solid transparent;
  position: relative;
}

.pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

.pricing-card.popular {
  border: 2px solid #FF385C;
  transform: scale(1.05);
  box-shadow: 0 8px 30px rgba(255,56,92,0.15);
}