:root{
  --edu-bg: #f6f9ff;
  --edu-card: #ffffff;
  --edu-text: #0f172a;
  --edu-muted: #475569;
  --edu-stroke: rgba(15,23,42,.12);
  --edu-accent: #2563eb;   /* bleu éducation */
  --edu-accent2: #22c55e;  /* vert réussite */
  --edu-shadow: 0 12px 28px rgba(15,23,42,.10);
  --edu-radius: 18px;
}

/* ========== Bloc 1 : Hero ========== */
.box-special{
  margin: 0 auto;
  padding: clamp(16px, 3vw, 34px);
  text-align: center;
  max-width: 1100px;

  background:
    radial-gradient(900px 420px at 15% 0%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(760px 420px at 90% 10%, rgba(34,197,94,.10), transparent 60%),
    var(--edu-bg);
  border: 1px solid rgba(37,99,235,.12);
  border-radius: calc(var(--edu-radius) + 6px);
  box-shadow: var(--edu-shadow);
}

.major{ margin-bottom: clamp(14px, 2.8vw, 26px); }

h2#soutien-scolaire{
  font-size: clamp(1.45rem, 2.6vw, 2.25rem);
  line-height: 1.2;
  text-align: center;
  letter-spacing: -0.02em;
  margin: 0;
}

.headline{
  display: inline-block;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.80));
  border: 1px solid var(--edu-stroke);
  color: var(--edu-text);
  padding: clamp(12px, 2vw, 18px) clamp(14px, 2.4vw, 24px);
  font-weight: 850;
  border-radius: var(--edu-radius);
  box-shadow: 0 8px 18px rgba(15,23,42,.08);
  position: relative;
}

.headline::after{
  content:"";
  display:block;
  height: 4px;
  width: min(140px, 60%);
  margin: 10px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--edu-accent), var(--edu-accent2));
  opacity: .9;
}

.lede{
  margin: 16px auto 0!important;
  max-width: 96ch;
  color: var(--edu-muted);
  font-size: clamp(0.98rem, 1.2vw, 1.1rem);
  line-height: 1.6;
}

.lede strong{
  color: #1f2937;
  font-weight: 850;
  background: linear-gradient(90deg, rgba(37,99,235,.12), rgba(34,197,94,.12));
  padding: .08em .35em;
  border-radius: 999px;
}

.featured{ margin: clamp(14px, 2.6vw, 22px) 0 0; }

.featured img{
  width: 100%;
  height: auto;
  display: block;
  border: 0;
  border-radius: var(--edu-radius);
  box-shadow: 0 16px 34px rgba(15,23,42,.12);
  transform: translateZ(0);
}

/* ========== Bloc 2 : Features ========== */
.features{
  margin: clamp(14px, 2.6vw, 22px) auto 0;
}

.features-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2.4vw, 22px);
}

.feature{
  text-align: center;
  padding: clamp(16px, 2.6vw, 24px);
  background: var(--edu-card);
  border: 1px solid var(--edu-stroke);
  border-radius: var(--edu-radius);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}

.feature-ico{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(52px, 6vw, 72px);
  height: clamp(52px, 6vw, 72px);
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1;
  margin-bottom: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(37,99,235,.10), rgba(34,197,94,.10));
  border: 1px solid rgba(37,99,235,.14);
}

h3.feature-title{
  margin: 0 0 10px;
  font-size: clamp(1.8rem, 1.2vw, 1.2rem);
  font-weight: 850;
  letter-spacing: -0.01em;
  color: var(--edu-text);
  text-align: center !important;
  background: none !important;
}

h3.feature-title::after{
  content:"";
  display:block;
  height: 3px;
  width: 44px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--edu-accent), var(--edu-accent2));
  opacity: .95;
}

.feature-text{
  margin: 0;
  color: var(--edu-muted);
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.6;
}

/* ========== Responsive ========== */
@media (max-width: 720px){
  .headline{ width: 100%; box-sizing: border-box; }
  .lede{ max-width: 60ch; }
  .features-grid{ grid-template-columns: 1fr; }
}

/* ========== Accessibilité / perf ========== */
@media (prefers-reduced-motion: reduce){
  .featured img{ transform: none; }
}