/**
 * Page d'accueil – Hero et bloc engagement
 */

.hero {
  background: linear-gradient(180deg, var(--white), var(--beige));
  padding: 56px 0;
}
.hero h1 {
  font-family: 'Parisienne', cursive;
  font-size: 3.2rem;
  line-height: 1.1;
  margin: 0.5rem 0 0.3rem 0;
}
.hero p { max-width: 720px; margin: 0 0 24px; color: #333; }
.cta-group { display: flex; gap: 12px; flex-wrap: wrap; }

.intro-feature {
  padding: 16px 0 46px 0;
  background: linear-gradient(180deg, var(--beige), var(--white));
}
.feature-grid { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
.feature-card {
  background: var(--white);
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 26px 26px 28px;
  position: relative;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
}
.feature-card:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 1px;
  background: linear-gradient(135deg, var(--orange), #ffd2c7);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.feature-card .lead { font-size: 1.05rem; color: #333; margin-top: 6px; }
.feature-card p { margin: 10px 0; color: #333; }
.feature-card .section-title { margin-top: 0; }

@media (max-width: 900px) { .feature-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .feature-card { padding: 22px; }
  .feature-card .lead { font-size: 1rem; }
}
@media (max-width: 800px) { .hero h1 { font-size: 2.6rem; margin: 0.4rem 0 0.3rem 0; } }
@media (max-width: 480px) { .hero h1 { font-size: 2.2rem; margin: 0.3rem 0 0.3rem 0; } }