/* assets/css/why-us.css */
.nmWhy, .nmWhy *{ box-sizing:border-box; }

.nmWhy{
  padding: 22px 0 14px;
  position: relative;
  overflow-x: clip;
}

/* Thème sombre distinct (différent du reste) */
.nmWhy::before{
  content:"";
  position:absolute;
  top: 0;                 /* ✅ au lieu de -160px : plus de chevauchement */
  left: -120px;
  right: -120px;
  height: 420px;

  background:
    radial-gradient(700px 320px at 15% 25%, rgba(22,136,74,.28), transparent 62%),
    radial-gradient(680px 320px at 85% 30%, rgba(15,43,70,.20), transparent 62%),
    linear-gradient(180deg, rgba(8,18,28,.96), rgba(8,18,28,.90));
  z-index:0;
  pointer-events:none;
}

.nmWhy__inner{
  width:100%;
  max-width:1120px;
  margin:0 auto;
  padding: 0 16px;
  position: relative;
  z-index: 1;
}

/* Header */
.nmWhy__hero{
  text-align:center;
  padding: 18px 14px 10px;
  border-radius: 22px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  backdrop-filter: blur(8px);
}

.nmWhy__kicker{
  display:inline-flex;
  padding:7px 12px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.08em;
  color: rgba(255,255,255,.92);
  background: rgba(22,136,74,.16);
  border: 1px solid rgba(22,136,74,.28);
}

.nmWhy__title{
  margin: 10px 0 8px;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.12;
  color: rgba(255,255,255,.94);
  letter-spacing: -.02em;
  overflow-wrap:anywhere;
}

.nmWhy__lead{
  margin: 0 auto;
  max-width: 78ch;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255,255,255,.78);
  overflow-wrap:anywhere;
}

/* Steps: rendu "liste premium" (pas de cartes) */
.nmWhy__steps{
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

/* Chaque step = bande claire + barre couleur à gauche */
.nmWhy__step{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 16px 36px rgba(0,0,0,.10);
  min-width:0;
  position: relative;
}

.nmWhy__step::before{
  content:"";
  position:absolute;
  left: 12px;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 999px;
  background: rgba(0,0,0,.10);
}

.nmWhy__dot{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  flex: 0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color: #0F2B46;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,43,70,.14);
  box-shadow: 0 12px 24px rgba(0,0,0,.08);
  margin-top: 2px;
}

/* Pastilles colorées (plus de vert / sombre) */
.nmWhy__dot--a{ color: rgba(22,136,74,1); }
.nmWhy__dot--b{ color: rgba(15,43,70,1); }
.nmWhy__dot--c{ color: rgba(0,76,84,1); }
.nmWhy__dot--d{ color: rgba(10,10,10,1); }

.nmWhy__dot--a::after{ content:"1"; }
.nmWhy__dot--b::after{ content:"2"; }
.nmWhy__dot--c::after{ content:"3"; }
.nmWhy__dot--d::after{ content:"4"; }

/* Couleur de la barre gauche selon la step */
.nmWhy__step:nth-child(1)::before{ background: rgba(22,136,74,.95); }
.nmWhy__step:nth-child(2)::before{ background: rgba(19,153,255,.80); }
.nmWhy__step:nth-child(3)::before{ background: rgba(0,76,84,.85); }
.nmWhy__step:nth-child(4)::before{ background: rgba(15,43,70,.85); }

.nmWhy__stepBody{ min-width:0; text-align:left; }

.nmWhy__h3{
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 950;
  color:#0F2B46;
  overflow-wrap:anywhere;
}

.nmWhy__p{
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(0,0,0,.74);
  overflow-wrap:anywhere;
}

/* Engagements = bande sombre séparée, style différent */
.nmWhy__promise{
  margin-top: 14px;
  border-radius: 22px;
  padding: 14px;
  background:
    radial-gradient(520px 260px at 15% 30%, rgba(22,136,74,.22), transparent 62%),
    radial-gradient(520px 260px at 85% 70%, rgba(19,153,255,.14), transparent 60%),
    rgba(8,18,28,.92);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.26);
  text-align:center;
}

.nmWhy__promiseTitle{
  font-weight: 950;
  color: rgba(255,255,255,.92);
  margin-bottom: 10px;
  letter-spacing: -.01em;
}

.nmWhy__list{
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  max-width: 860px;
}

.nmWhy__list li{
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.86);
  font-weight: 900;
  overflow-wrap:anywhere;
}

/* Responsive */
@media (max-width: 640px){
  .nmWhy__inner{ padding: 0 12px; }
  .nmWhy__hero{ padding: 16px 12px 10px; }
  .nmWhy__step{
    text-align:center;
    flex-direction: column;
    align-items:center;
  }
  .nmWhy__step::before{
    left: 12px; right: 12px;
    top: auto; bottom: 12px;
    height: 4px; width: auto;
  }
  .nmWhy__stepBody{ text-align:center; }
}