/* ==========================================================
   BLOOPIN HOME — BENEFITS SHOWCASE V2
   Encarts qualitatifs sans pourcentages.
========================================================== */

.bp-ai-stats{
  padding:clamp(48px,7vw,88px) 0;
  overflow:hidden;
}

.bp-ai-stats,
.bp-ai-stats *{
  box-sizing:border-box;
}

.bp-ai-stats__inner{
  width:min(1360px,calc(100% - 32px));
  margin:0 auto;
}

.bp-ai-stats__head{
  max-width:1280px;
  margin:0 auto 42px;
  text-align:center;
}

.bp-ai-stats__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  align-items:start;
  isolation:isolate;
}

.bp-ai-card{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-rows:auto auto;
  align-content:start;
  min-width:0;
  height:100%;
  transform:translateY(34px);
  opacity:0;
  transition:
    transform .85s cubic-bezier(.2,.7,.2,1),
    opacity .7s ease;
}

.bp-ai-stats.is-visible .bp-ai-card{
  transform:translateY(0);
  opacity:1;
}

.bp-ai-stats.is-visible .bp-ai-card:nth-child(2){
  transition-delay:.08s;
}

.bp-ai-stats.is-visible .bp-ai-card:nth-child(3){
  transition-delay:.16s;
}

.bp-ai-card:nth-child(1){z-index:3;}
.bp-ai-card:nth-child(2){z-index:2;}
.bp-ai-card:nth-child(3){z-index:1;}

.bp-ai-card:hover{
  z-index:20;
}

.bp-ai-card__visual{
  position:relative;
  aspect-ratio:.74 / 1;
  border-radius:34px;
  overflow:visible;
  background:transparent;
  z-index:2;
}

.bp-ai-card__media{
  position:relative;
  width:100%;
  height:100%;
  border-radius:34px;
  overflow:hidden;
  background:#ececef;
  box-shadow:
    0 18px 40px rgba(17,17,17,.07),
    0 2px 10px rgba(17,17,17,.04);
  transition:
    transform .6s cubic-bezier(.2,.7,.2,1),
    box-shadow .35s ease;
}

.bp-ai-card__image{
  width:100%;
  height:100% !important;
  display:block;
  object-fit:cover !important;
}

.bp-ai-card__overlay{
  position:absolute;
  top:52%;
  right:-24px;
  z-index:3;
  width:clamp(220px,22vw,270px);
  min-height:138px;
  padding:22px;
  border-radius:30px;
  background:rgba(255,255,255,.98);
  box-shadow:
    0 30px 60px rgba(17,17,17,.12),
    0 6px 20px rgba(17,17,17,.08);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:9px;
  transition:
    transform .6s cubic-bezier(.2,.7,.2,1),
    box-shadow .35s ease;
  transform:translate3d(0,0,0);
}

.bp-ai-card__overlay::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 42%);
  opacity:.7;
}

.bp-ai-card:hover .bp-ai-card__media{
  transform:translateY(-4px) scale(1.01);
  box-shadow:
    0 26px 56px rgba(17,17,17,.10),
    0 8px 20px rgba(17,17,17,.05);
}

.bp-ai-card:hover .bp-ai-card__overlay{
  transform:translate3d(0,-4px,0);
  box-shadow:
    0 34px 64px rgba(17,17,17,.14),
    0 8px 20px rgba(17,17,17,.08);
}

.bp-ai-card__overlay-label{
  position:relative;
  z-index:1;
  color:var(--primary,#22A1EE);
  font-size:.78rem;
  line-height:1.25;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:800;
}

.bp-ai-card__overlay-title{
  position:relative;
  z-index:1;
  max-width:14ch;
  margin:0;
  color:var(--text,#0F172A);
  font-size:clamp(1.35rem,1.8vw,1.75rem);
  line-height:1.05;
  letter-spacing:-.035em;
  font-weight:750;
  text-wrap:balance;
}

.bp-ai-card__body{
  padding:18px 6px 0;
  display:flex;
}

.bp-ai-card__text{
  margin:0;
  font-size:clamp(.96rem,1.05vw,1.06rem);
  line-height:1.52;
  color:var(--text-soft,#64748B);
  font-weight:600;
  flex:1 1 auto;
  text-wrap:pretty;
}

.bp-ai-card--violet .bp-ai-card__overlay,
.bp-ai-card--blue .bp-ai-card__overlay,
.bp-ai-card--mint .bp-ai-card__overlay{
  animation:bpBadgeFloat 6.8s ease-in-out infinite;
}

.bp-ai-card--blue .bp-ai-card__overlay{
  animation-delay:.4s;
}

.bp-ai-card--mint .bp-ai-card__overlay{
  animation-delay:.8s;
}

@keyframes bpBadgeFloat{
  0%,100%{transform:translate3d(0,0,0);}
  50%{transform:translate3d(0,-4px,0);}
}

.bp-ai-stats__nav,
.bp-ai-stats__dots{
  display:none;
}

.bp-ai-stats__nav{
  justify-content:center;
  gap:12px;
  margin-top:24px;
}

.bp-ai-stats__nav-btn{
  width:48px;
  height:48px;
  border:0;
  border-radius:999px;
  background:rgba(0,0,0,.06);
  color:#555;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
}

.bp-ai-stats__nav-btn:hover{
  background:rgba(0,0,0,.09);
}

.bp-ai-stats__nav-btn .bp-icon,
.bp-ai-stats__nav-btn svg{
  width:20px !important;
  height:20px !important;
  display:block !important;
  flex:0 0 20px;
  color:#6b7280;
  overflow:visible !important;
}

.bp-ai-stats__nav-btn .bp-icon path,
.bp-ai-stats__nav-btn svg path{
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:2.2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

.bp-ai-stats__nav-btn:focus-visible{
  outline:none;
  background:#fff;
  box-shadow:
    0 0 0 3px rgba(107,114,128,.14),
    0 0 0 6px rgba(107,114,128,.08);
}

.bp-ai-stats__dots{
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:14px;
}

.bp-ai-stats__dots button{
  width:8px;
  height:8px;
  border:0;
  padding:0;
  border-radius:999px;
  background:rgba(17,17,17,.16);
  transition:transform .25s ease,background .25s ease;
  appearance:none;
  -webkit-appearance:none;
}

.bp-ai-stats__dots button.is-active{
  background:#111;
  transform:scale(1.25);
}

@media (max-width:980px){
  .bp-ai-stats{
    padding:56px 0 68px;
  }

  .bp-ai-stats__inner{
    width:calc(100% - 24px);
  }

  .bp-ai-stats__head{
    margin-bottom:28px;
  }

  .bp-ai-stats__grid{
    display:flex;
    gap:16px;
    transition:transform .55s cubic-bezier(.2,.7,.2,1);
    will-change:transform;
  }

  .bp-ai-card{
    flex:0 0 82%;
    max-width:70%;
    opacity:1;
    transform:none;
    padding:0;
    height:auto;
  }

  .bp-ai-stats__nav,
  .bp-ai-stats__dots{
    display:flex;
  }

  .bp-ai-stats__nav{
    margin-top:18px;
  }

  .bp-ai-stats__dots{
    margin-top:10px;
  }

  .bp-ai-card__visual{
    aspect-ratio:1.2 / 1;
    border-radius:28px;
  }

  .bp-ai-card__media{
    border-radius:28px;
  }

  .bp-ai-card__overlay{
    top:66%;
    right:14px;
    width:clamp(190px,30vw,230px);
    min-height:112px;
    padding:17px;
    border-radius:22px;
  }

  .bp-ai-card__overlay-title{
    max-width:100%;
    font-size:clamp(1.08rem,2.2vw,1.3rem);
  }

  .bp-ai-card__body{
    padding:14px 2px 0;
  }

  .bp-ai-card__text{
    font-size:.95rem;
    line-height:1.48;
    max-width:56ch;
  }
}

@media (max-width:767px){
  .bp-ai-stats{
    padding:20px 0;
  }

  .bp-ai-stats__inner{
    width:calc(100% - 16px);
  }

  .bp-ai-stats__head{
    margin-bottom:22px;
  }

  .bp-ai-stats__grid{
    gap:14px;
  }

  .bp-ai-card{
    flex:0 0 86%;
    max-width:65%;
  }

  .bp-ai-card__visual{
    aspect-ratio:1.02 / 1;
    border-radius:24px;
  }

  .bp-ai-card__media{
    border-radius:24px;
  }

  .bp-ai-card__overlay{
    top:50%;
    right:10px;
    width:172px;
    min-height:96px;
    padding:14px;
    border-radius:18px;
  }

  .bp-ai-card__overlay-label{
    font-size:.66rem;
  }

  .bp-ai-card__overlay-title{
    font-size:1rem;
    line-height:1.08;
  }

  .bp-ai-card__body{
    padding:12px 2px 0;
  }

  .bp-ai-card__text{
    font-size:.92rem;
    line-height:1.45;
  }

  .bp-ai-stats__nav{
    gap:10px;
    margin-top:16px;
  }

  .bp-ai-stats__nav-btn{
    width:42px;
    height:42px;
  }

  .bp-ai-stats__dots{
    margin-top:10px;
  }
}

@media (max-width:350px){
  .bp-ai-card__overlay{
    top:43%;
    width:148px;
    min-height:92px;
  }
}

@media (prefers-reduced-motion:reduce){
  .bp-ai-card,
  .bp-ai-card__media,
  .bp-ai-card__overlay,
  .bp-ai-stats__grid,
  .bp-ai-stats__dots button{
    transition:none !important;
    animation:none !important;
  }
}