/* =============================== PROBLÈME → SOLUTION =============================== */
/* Badges cohérents */
.bg-danger-subtle{background:rgba(255,0,0,.1)!important}
.bg-success-subtle{background:rgba(24,178,165,.12)!important}

/* --- SOLUTION CARD (ligne lumineuse) --- */
.solution-card{
  position:relative;width:100%;max-width:600px;margin:0 auto;border-radius:1.4rem;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(22px);box-shadow:0 10px 30px rgba(0,0,0,.45);z-index:1;transition:transform .3s ease,box-shadow .3s ease
}
.solution-bg{position:absolute;inset:5px;border-radius:1.2rem;background:rgba(10,20,30,.85);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(24px);z-index:2}
.solution-blob{
  position:absolute;top:50%;left:50%;width:200px;height:200px;border-radius:20px;
  background:linear-gradient(90deg,#18b2a5,#cfa124);opacity:.8;filter:blur(40px);z-index:1;animation:feal-blob-line 6s infinite ease-in-out
}
@keyframes feal-blob-line{
  0%{transform:translate(-150%,-150%)}25%{transform:translate(50%,-150%)}50%{transform:translate(50%,50%)}75%{transform:translate(-150%,50%)}100%{transform:translate(-150%,-150%)}
}
.solution-content{position:relative;z-index:3;color:var(--feal-text)}
.solution-card:hover .solution-blob{filter:blur(55px) brightness(1.2);animation-duration:4s}
@media (max-width:767px){.solution-blob{width:150px;height:150px;filter:blur(30px)}}

/* --- PROBLEM CARD (ligne rouge) --- */
.problem-card{
  position:relative;width:100%;max-width:600px;margin:0 auto;border-radius:1.4rem;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(22px);box-shadow:0 10px 30px rgba(0,0,0,.45);z-index:1;transition:transform .3s ease,box-shadow .3s ease
}
.problem-bg{position:absolute;inset:5px;border-radius:1.2rem;background:rgba(15,5,5,.8);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(24px);z-index:2}
.problem-blob{
  position:absolute;top:50%;left:50%;width:200px;height:200px;border-radius:20px;
  background:linear-gradient(90deg,#ff3c3c,#ff9900);opacity:.8;filter:blur(40px);z-index:1;animation:feal-problem-line 6s infinite ease-in-out
}
@keyframes feal-problem-line{
  0%{transform:translate(-150%,-150%)}25%{transform:translate(50%,-150%)}50%{transform:translate(50%,50%)}75%{transform:translate(-150%,50%)}100%{transform:translate(-150%,-150%)}
}
.problem-content{position:relative;z-index:3;color:var(--feal-text)}
.problem-card:hover .problem-blob{filter:blur(55px) brightness(1.3);animation-duration:4s}
@media (max-width:767px){.problem-blob{width:150px;height:200px;filter:blur(30px)}}