/* ====== CSS (fond plus clair, version équilibrée) pour #impact-web ====== */
#impact-web{
  --imp-bg:#11182b;             /* fond général un peu plus clair */
  --imp-grad:#11182b;           /* fond hero */
  --imp-ac1:#4f46e5;            /* bleu/violet */
  --imp-ac2:#06b6d4;            /* cyan */
  --imp-line:rgba(255,255,255,.12); /* bordure un peu plus visible */
}

.impact-wrap{ padding-top:28px; }

/* Hero */
#impact-web .impact-hero{
  background:
    radial-gradient(1200px 300px at 20% -10%, rgba(79,70,229,.25), transparent 60%),
    radial-gradient(900px 300px at 90% 0%, rgba(6,182,212,.20), transparent 60%),
    var(--imp-grad);
  color:#f1f5f9;
  border-radius:18px;
  padding:28px 22px;
  position:relative;
  overflow:hidden;
  border:1px solid var(--imp-line);
  box-shadow:0 30px 80px rgba(2,6,23,.25) inset, 0 10px 24px rgba(2,6,23,.18);
}
#impact-web .impact-hero h2{
  font-size:clamp(22px, 3vw, 32px);
  line-height:1.15;
  margin:0 0 6px 0;
  letter-spacing:.2px;
}
#impact-web .impact-hero h2 span{
  background: linear-gradient(90deg, var(--imp-ac2), var(--imp-ac1));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
#impact-web .impact-hero .impact-sub{
  margin:0 0 14px 0;
  color:#cbd5e1;
  font-size:clamp(14px,1.5vw,15.5px);
}

/* KPIs */
#impact-web .impact-stats{
  display:grid;
  gap:10px;
  grid-template-columns:repeat(4, minmax(0,1fr));
}
#impact-web .impact-kpi{
  border:1px solid var(--imp-line);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border-radius:14px;
  padding:12px;
  text-align:center;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
#impact-web .kpi-num{
  font-weight:800;
  font-size:clamp(20px, 4vw, 28px);
  line-height:1;
  margin-bottom:6px;
  background: linear-gradient(90deg, #ffffff, #d9e0ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 14px rgba(79,70,229,.25);
}
#impact-web .kpi-label{
  font-size:12px;
  color:#a5b4fc;
  text-transform:uppercase;
  letter-spacing:.3px;
}

/* ✅ A+ en vert (4e KPI) */
#impact-web .impact-kpi:nth-child(4) .kpi-num{
  background: linear-gradient(90deg, #22c55e, #16a34a);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 12px rgba(34,197,94,.35);
}
#impact-web .impact-kpi:nth-child(4) .kpi-label{
  color:#86efac;
}

/* Grid cartes */
#impact-web .impact-grid{
  margin-top:16px;
  display:grid;
  gap:14px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
#impact-web .impact-card{
  background:#182238;              /* fond carte + clair */
  color:#e2e8f0;
  border:1px solid var(--imp-line);
  border-radius:16px;
  padding:16px;
  box-shadow:0 10px 24px rgba(2,6,23,.25);
  transition:background .25s ease, transform .25s ease;
}
#impact-web .impact-card:hover{
  background:#1d2a43;
  transform:translateY(-2px);
}
#impact-web .impact-card h3{
  margin:0 0 10px 0;
  font-size:1.05rem;
}
#impact-web .impact-list{
  margin:0;
  padding-left:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* Gauge */
#impact-web .gauge .gauge-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:10px;
  align-items:center;
  margin-bottom:8px;
}
#impact-web .gauge .bar{
  height:8px;
  border-radius:999px;
  background:rgba(148,163,184,.25);
  overflow:hidden;
  position:relative;
}
#impact-web .gauge .bar i{
  display:block;
  height:100%;
  background:linear-gradient(90deg, var(--imp-ac2), var(--imp-ac1));
  border-radius:999px;
  box-shadow:0 0 12px rgba(79,70,229,.45);
  animation: loadBar 1.2s ease-out both;
}
@keyframes loadBar{ from{ width:0 } }
#impact-web .gauge b{
  font-variant-numeric:tabular-nums;
  color:#dbeafe;
}
#impact-web .gauge-note{
  margin-top:6px;
  font-size:12.5px;
  color:#a3b3d1;
}

/* Comparatif */
#impact-web .compare{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
#impact-web .compare .col{
  background:#141d33;               /* légèrement éclairci */
  border:1px dashed var(--imp-line);
  border-radius:12px;
  padding:12px;
}
#impact-web .compare .label{
  font-weight:700;
  margin-bottom:6px;
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid var(--imp-line);
}
#impact-web .compare .label.neutral{ color:#eab308; }
#impact-web .compare .label.good{ color:#22c55e; }
#impact-web .compare ul{
  margin:0;
  padding-left:16px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

#impact-web .impact-cta{
  margin-top:10px;
  width:100%;
  text-align:center;
}

/* Responsive */
@media (max-width: 1024px){
  #impact-web .impact-stats{ grid-template-columns:repeat(2,1fr); }
  #impact-web .impact-grid{ grid-template-columns:1fr; }
}