/**
 * PAGES OCCASIONS - DESIGN PROPRE ET SIMPLE
 */

/* ============================================
   HERO SIMPLE
   ============================================ */

.hero-simple {
  padding: 140px 0 80px;
  background: white;
  border-bottom: 1px solid var(--color-border);
}

.hero-simple__content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.badge-category {
  display: inline-block;
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
  border: 1px solid var(--color-border);
}

.hero-simple h1 {
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 900;
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
  line-height: 1.2;
}

.lead {
  font-size: var(--text-xl);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-8);
}

.hero-actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================
   STATS BAR
   ============================================ */

.stats-bar {
  background: var(--color-bg-secondary);
  padding: var(--space-12) 0;
  border-bottom: 1px solid var(--color-border);
}

.stats-bar__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  max-width: 800px;
  margin: 0 auto;
}

.stat-box {
  text-align: center;
}

.stat-box__value {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--color-primary-start);
  margin-bottom: var(--space-2);
}

.stat-box__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  font-weight: 500;
}

/* ============================================
   CONTENT SECTIONS
   ============================================ */

.content-section {
  padding: var(--space-20) 0;
}

.content-section.bg-light {
  background: var(--color-bg-secondary);
}

.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-12);
}

.section-header h2 {
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.section-header p {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
}

/* ============================================
   TWO COLUMN LAYOUT
   ============================================ */

.two-col-layout {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-10);
  max-width: 1100px;
  margin: 0 auto;
}

.col-content h2 {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
}

/* ============================================
   LABELS
   ============================================ */

.label {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-base);
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--space-4);
}

.label-red {
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
}

.label-green {
  background: rgba(34, 197, 94, 0.1);
  color: #059669;
}

/* ============================================
   LISTS
   ============================================ */

.list-check {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-check li {
  padding: var(--space-3) 0;
  padding-left: var(--space-8);
  position: relative;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-2);
}

.list-check.list-red li::before {
  content: '×';
  position: absolute;
  left: 0;
  top: var(--space-3);
  color: #dc2626;
  font-weight: 900;
  font-size: 1.25rem;
}

.list-check.list-green li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: var(--space-3);
  color: #059669;
  font-weight: 900;
  font-size: 1rem;
}

/* ============================================
   CARDS GRID
   ============================================ */

.cards-grid {
  display: grid;
  gap: var(--space-6);
  max-width: 1100px;
  margin: 0 auto;
}

.cards-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.cards-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* ============================================
   CARD SIMPLE
   ============================================ */

.card-simple {
  background: white;
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  transition: all var(--transition-base);
}

.card-simple:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card-simple__icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-4);
}

.card-simple h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.card-simple p {
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.card-simple__budget {
  display: inline-block;
  background: var(--color-bg-secondary);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-base);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-secondary);
}

/* ============================================
   FEATURE BOX
   ============================================ */

.feature-box {
  background: white;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  transition: all var(--transition-base);
}

.feature-box:hover {
  border-color: var(--color-primary-start);
  box-shadow: var(--shadow-sm);
}

.feature-box__icon {
  font-size: 2rem;
  margin-bottom: var(--space-3);
}

.feature-box h3 {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.feature-box p {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
  margin: 0;
}

/* ============================================
   TESTIMONIAL BOX
   ============================================ */

.testimonial-box {
  background: white;
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.testimonial-box__stars {
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
  color: #fbbf24;
}

.testimonial-box p {
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-6);
}

.testimonial-box__author strong {
  display: block;
  color: var(--color-text-primary);
  font-weight: 700;
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
}

.testimonial-box__author span {
  display: block;
  color: var(--color-text-tertiary);
  font-size: var(--text-xs);
}

/* ============================================
   METRICS ROW
   ============================================ */

.metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  max-width: 1100px;
  margin: 0 auto;
}

.metric-card {
  background: white;
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  text-align: center;
}

.metric-card__value {
  font-size: 3rem;
  font-weight: 900;
  color: var(--color-primary-start);
  margin-bottom: var(--space-3);
}

.metric-card__label {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.metric-card p {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
  margin: 0;
}

/* ============================================
   FAQ
   ============================================ */

.faq-container {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  gap: var(--space-6);
}

.faq-box {
  background: white;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.faq-box h3 {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}

.faq-box p {
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
  font-size: var(--text-sm);
}

/* ============================================
   CTA SECTION
   ============================================ */

.cta-section {
  padding: var(--space-20) 0;
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
}

.cta-box {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}

.cta-box h2 {
  font-size: clamp(1.875rem, 3vw, 2.5rem);
  font-weight: 800;
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

.cta-box > p {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
}

.cta-actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 968px) {
  .two-col-layout,
  .cards-grid-2,
  .cards-grid-3,
  .stats-bar__grid,
  .metrics-row {
    grid-template-columns: 1fr;
  }

  .hero-simple {
    padding: 100px 0 60px;
  }

  .hero-actions,
  .cta-actions {
    flex-direction: column;
  }

  .btn-large {
    width: 100%;
  }
}