/* Page d'accueil — Hero + sections premium */

.hero {
  position: relative;
  padding: clamp(80px, 12vw, 140px) 0 clamp(60px, 10vw, 100px);
  text-align: center;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(30,64,175,0.08), transparent 70%),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgba(59,130,246,0.06), transparent 70%),
    var(--color-bg);
  overflow: hidden;
}
.hero h1 {
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, #0f172a 0%, #475569 130%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 22px;
}
.hero .lead {
  margin: 0 auto 36px;
  text-align: center;
}
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.hero-visual {
  margin-top: clamp(48px, 8vw, 80px);
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
  padding: clamp(40px, 6vw, 80px);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border-soft);
  position: relative;
  overflow: hidden;
}
.hero-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.7), transparent 50%);
}
.hero-visual-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.hero-tile {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  border-radius: var(--radius);
  padding: 22px;
  border: 1px solid rgba(255,255,255,0.5);
  text-align: left;
  font-size: 0.85rem;
  color: var(--color-text);
}
.hero-tile-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--color-brand);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  font-weight: 700;
}
.hero-tile strong { display: block; font-size: 1rem; margin-bottom: 4px; }
.hero-tile span   { color: var(--color-text-muted); }
@media (max-width: 700px) { .hero-visual-grid { grid-template-columns: 1fr; } }

/* Bandeau de chiffres ------------------------------------------------- */
.stats-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg);
  padding: 36px 24px;
  margin-top: 40px;
}
.stat-cell { text-align: center; padding: 12px; }
.stat-cell strong { display: block; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; color: var(--color-text); letter-spacing: -0.02em; }
.stat-cell span { font-size: 0.85rem; color: var(--color-text-muted); }
@media (max-width: 700px) { .stats-band { grid-template-columns: repeat(2, 1fr); } }

/* Section header avec eyebrow ---------------------------------------- */
.section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.section-head h2 { margin-bottom: 16px; }
.section-head p { font-size: 1.1rem; }

/* Section CTA finale ------------------------------------------------- */
.cta-final {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #fff;
  padding: clamp(60px, 10vw, 110px) 40px;
  border-radius: var(--radius-xl);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-final::before {
  content: '';
  position: absolute;
  inset: -50% -10% auto auto;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(59,130,246,0.35), transparent 60%);
  filter: blur(40px);
}
.cta-final h2 { color: #fff; position: relative; }
.cta-final p { color: #cbd5e1; margin: 18px auto 32px; max-width: 56ch; position: relative; }
.cta-final .hero-actions { position: relative; }

/* Section services pictos -------------------------------------------- */
.service-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: all var(--transition);
  height: 100%;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--color-border); }
.service-card .pic {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  background: linear-gradient(135deg, var(--color-brand-soft), #e0e7ff);
  color: var(--color-brand);
}
.service-card h3 { margin-bottom: 10px; }
.service-card p  { font-size: 0.96rem; }
.service-card .more {
  margin-top: 18px;
  color: var(--color-brand);
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Avantages 2 colonnes ----------------------------------------------- */
.feature-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
@media (max-width: 800px) { .feature-split { grid-template-columns: 1fr; gap: 32px; } }
.feature-list { display: flex; flex-direction: column; gap: 22px; margin-top: 24px; }
.feature-list li { display: flex; gap: 14px; }
.feature-list .check {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--color-brand-soft);
  color: var(--color-brand);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.feature-list strong { display: block; color: var(--color-text); margin-bottom: 4px; }
.feature-list span { color: var(--color-text-soft); font-size: 0.95rem; }

.feature-illustration {
  background: linear-gradient(135deg, #dbeafe 0%, #fff 100%);
  border-radius: var(--radius-xl);
  padding: 60px 40px;
  border: 1px solid var(--color-border-soft);
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  color: var(--color-brand);
}