.tp-hero-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-radius:32px;
  overflow:hidden;
}

/* PAS de voile global -> on enlève le "brouillard" */
.tp-hero-bg::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  /* uniquement une légère vignette sombre (optionnel, très léger) */
  background: radial-gradient(circle at center,
    rgba(0,0,0,0) 55%,
    rgba(0,0,0,0.10) 100%
  );
}

/* Fondu rose uniquement sur les bords (centre transparent) */
.tp-hero-bg::after{
  content:"";
  position:absolute;
  inset:-2px; /* évite les liserés */
  pointer-events:none;

  /* change #ffe1f0 par TON rose exact */
  background: radial-gradient(circle at center,
    rgba(255,225,240,0) 62%,
    rgba(255,225,240,0.35) 78%,
    rgba(255,225,240,0.80) 92%,
    rgba(255,225,240,1) 100%
  );
}
.tp-join {
    background: linear-gradient(135deg, #6C5CE7, #2A9D8F);
    box-shadow: 0 20px 40px rgba(108, 92, 231, 0.25);
}

/* léger effet lumineux subtil */
.tp-join::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.15), transparent 60%);
    pointer-events: none;
}
.tp-join-section {
    background: linear-gradient(
        135deg,
        #6C5CE7 0%,     /* violet Totem */
        #8E79F2 40%, 
        #D6A96B 100%   /* sable */
    );
}