/* ==========================================================
   BLOOPIN HOME STRENGTHS — FINAL
========================================================== */

.bp-strengths{
  --bp-strength-card-bg:#fff;
  --bp-strength-text:#111;
  --bp-strength-muted:rgba(17,17,17,.70);
  --bp-strength-shadow:0 18px 40px rgba(28,32,36,.045);

  padding:clamp(70px,8vw,120px) 0;
  overflow:clip;
}

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

.bp-strengths__track{
  position:relative;
  min-height:calc(var(--bp-card-count,4) * 66svh);
}

.bp-strengths__sticky{
  position:sticky;
  top:clamp(24px,4vh,48px);
  min-height:calc(100svh - clamp(88px,12vh,130px));
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.bp-strengths__head{
  width:min(860px,100%);
  margin:0 auto clamp(28px,4vw,42px);
}

.bp-strengths__head .bp-title-global{
  max-width:860px;
  margin-inline:auto;
  overflow-wrap:anywhere;
}

.bp-strengths__head .bp-text-global{
  max-width:680px;
  margin-inline:auto;
}

/* BODY */

.bp-strengths__body{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
}

/* PAGINATION */

.bp-strengths__progress{
  position:absolute;
  left:calc(50% - 500px);
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  z-index:20;
}

.bp-strengths__progress span{
  display:block;
  width:6px;
  height:24px;
  border-radius:999px;
  background:rgba(0,0,0,.10);
  transition:width .28s ease,height .28s ease,background .28s ease;
}

.bp-strengths__progress span.is-active{
  height:44px;
  background:#000;
}

/* STACK */

.bp-strengths__stack{
  position:relative;
  width:min(860px,100%);
  height:clamp(460px,52vh,560px);
  margin-inline:auto;
}

/* CARD */

.bp-strength-card{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:22px;
  width:100%;
  box-sizing:border-box;
  padding:clamp(28px,4vw,54px);
  border-radius:clamp(28px,3vw,38px);
  background:var(--bp-strength-card-bg);
  box-shadow:var(--bp-strength-shadow);
  overflow:hidden;

  transform:translate3d(0,var(--bp-y,0px),0) scale(var(--bp-scale,1));
  opacity:var(--bp-opacity,0);
  z-index:var(--bp-z,1);
  pointer-events:none;
  will-change:transform,opacity;

  transition:transform .45s ease,opacity .45s ease,box-shadow .35s ease;
}

.bp-strength-card:first-child{
  --bp-y:0px;
  --bp-scale:1;
  --bp-opacity:1;
  --bp-z:30;
}

.bp-strength-card.is-active{
  box-shadow:
    0 10px 24px rgba(17,17,17,.04),
    0 18px 42px rgba(34,161,238,.05);
}

/* SVG EN FOND */

.bp-strength-card__icon{
  position:absolute;
  right:clamp(18px,4vw,38px);
  bottom:clamp(16px,3vw,30px);
  width:clamp(130px,18vw,210px);
  height:clamp(130px,18vw,210px);
  opacity:.075;
  pointer-events:none;
  z-index:0;
}

.bp-strength-card__icon img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}

.bp-strength-card__content{
  position:relative;
  z-index:2;
}

.bp-strength-card__content h3{
  margin:0 0 16px;
  color:var(--bp-strength-text);
  font-size:clamp(1.7rem,2.8vw,3rem);
  line-height:1.02;
  letter-spacing:-.055em;
}

.bp-strength-card__content p{
  max-width:720px;
  margin:0;
  color:var(--bp-strength-muted);
  font-size:clamp(1rem,1.2vw,1.12rem);
  line-height:1.75;
}

/* DESKTOP COMPACT */

@media (min-width:1025px) and (max-width:1378px){
  .bp-strengths__stack{
    height:360px;
  }

  .bp-strength-card{
    padding:34px 42px;
  }
}

/* TABLETTE */

@media (max-width:1024px){
  .bp-strengths{
    padding:clamp(52px,7vw,82px) 0;
  }

.bp-strengths__track{
  min-height:calc(var(--bp-card-count,4) * 60svh);
}

  .bp-strengths__sticky{
    top:clamp(54px,7vh,76px);
    min-height:calc(100svh - 96px);
  }

  .bp-strengths__stack{
    width:min(680px,calc(100% - 58px));
    height:clamp(390px,46svh,460px);
    margin-inline:auto;
  }

  .bp-strengths__progress{
    left:calc(50% - 380px);
  }

  .bp-strength-card{
    justify-content:center;
    padding:34px;
  }

  .bp-strength-card__icon{
    width:170px;
    height:170px;
    opacity:.065;
  }
}

/* MOBILE */

@media (max-width:767px){
  .bp-strengths{
    padding:44px 0 36px;
  }

  .bp-strengths__shell{
    width:min(100% - 18px,1180px);
  }

.bp-strengths__track{
  min-height:calc(var(--bp-card-count,4) * 58svh);
}

  .bp-strengths__sticky{
    top:72px;
    min-height:calc(100svh - 84px);
    justify-content:flex-start;
    padding-top:8px;
  }

  .bp-strengths__head{
    width:100%;
    margin-bottom:24px;
  }

  .bp-strengths__head .bp-text-global{
    max-width:340px;
  }

  .bp-strengths__body{
    display:grid;
    grid-template-columns:22px minmax(0,1fr) 22px;
    align-items:center;
    justify-content:center;
    gap:8px;
  }

  .bp-strengths__progress{
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    grid-column:1;
    grid-row:1;
    gap:8px;
  }

  .bp-strengths__stack{
    grid-column:2;
    grid-row:1;
    width:100%;
    height:clamp(390px,56svh,470px);
    margin:0 auto;
  }

  .bp-strengths__progress span{
    width:5px;
    height:22px;
  }

  .bp-strengths__progress span.is-active{
    width:5px;
    height:42px;
  }

  .bp-strength-card{
    justify-content:center;
    padding:22px 20px;
    border-radius:28px;
    gap:16px;
  }

  .bp-strength-card__icon{
    right:-12px;
    bottom:-8px;
    width:135px;
    height:135px;
    opacity:.055;
  }

  .bp-strength-card__content h3{
    margin-bottom:10px;
    font-size:clamp(1.34rem,6.8vw,1.72rem);
    line-height:1.08;
    letter-spacing:-.04em;
  }

  .bp-strength-card__content p{
    font-size:.94rem;
    line-height:1.52;
  }

  .bp-strengths .bp-title-global{
    font-size:clamp(2.15rem,10.6vw,3.4rem);
    line-height:.98;
  }

  .bp-strengths .bp-title-global .bp-word-accent-alt{
    display:inline;
    white-space:normal;
  }
}

/* MOBILE PAYSAGE / PETITES HAUTEURS */

@media (max-width:900px) and (max-height:560px){
  .bp-strengths{
    padding:42px 0;
    overflow:hidden;
  }

  .bp-strengths__track{
    min-height:auto;
  }

  .bp-strengths__sticky{
    position:relative;
    top:auto;
    min-height:auto;
    display:block;
  }

  .bp-strengths__head{
    margin-bottom:24px;
  }

  .bp-strengths__body{
    display:block;
  }

  .bp-strengths__progress{
    display:none;
  }

  .bp-strengths__stack{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    height:auto;
    width:100%;
    margin:0;
  }

  .bp-strength-card{
    position:relative;
    inset:auto;
    min-height:100%;
    opacity:1 !important;
    transform:none !important;
    z-index:auto !important;
    pointer-events:auto;
    padding:18px;
    border-radius:24px;
  }

  .bp-strength-card__icon{
    right:-8px;
    bottom:-8px;
    width:96px;
    height:96px;
    opacity:.055;
  }

  .bp-strength-card__content h3{
    font-size:1.18rem;
    line-height:1.08;
    letter-spacing:-.035em;
    margin-bottom:8px;
  }

  .bp-strength-card__content p{
    font-size:.84rem;
    line-height:1.48;
  }
}

/* PETITS MOBILES */

@media (max-width:390px){
  .bp-strengths__body{
    grid-template-columns:18px minmax(0,1fr) 18px;
    gap:6px;
  }

  .bp-strengths__stack{
    height:clamp(400px,58svh,490px);
  }

  .bp-strength-card{
    padding:20px 18px;
  }

  .bp-strength-card__content p{
    font-size:.88rem;
  }

  .bp-strength-card__icon{
    width:120px;
    height:120px;
  }
}

/* ACCESSIBILITÉ */

@media (prefers-reduced-motion:reduce){
  .bp-strengths__track{
    min-height:auto;
  }

  .bp-strengths__sticky{
    position:relative;
    top:auto;
    min-height:auto;
  }

  .bp-strengths__body{
    display:block;
  }

  .bp-strengths__stack{
    display:grid;
    gap:18px;
    height:auto;
    width:100%;
    margin:0;
  }

  .bp-strength-card{
    position:relative;
    inset:auto;
    opacity:1 !important;
    transform:none !important;
    z-index:auto !important;
  }

  .bp-strengths__progress{
    display:none;
  }
}