/* ==========================================================
   BLOOPIN HOME — PRODUCT STORY V1
   Fusion Phone Reveal + Strengths
   Desktop : narration sticky / 4 étapes
   Tablette & mobile : flux naturel + cartes swipe
========================================================== */

.bp-product-story,
.bp-product-story *{
  box-sizing:border-box;
}

.bp-product-story{
  --bp-story-radius:34px;
  padding:clamp(34px,4vw,62px) 0;
  overflow:clip;
  background:transparent;
}

.bp-product-story__track{
  position:relative;
}

.bp-product-story__sticky{
  position:relative;
}

.bp-product-story__shell{
  width:min(1340px,calc(100vw - 32px));
  margin:0 auto;
  overflow:visible;
  border-radius:0;
  background:transparent;
  box-shadow:none!important;
}

.bp-product-story__main{
  min-width:0;
}

.bp-product-story__head{
  min-width:0;
}

.bp-product-story__title{
  max-width:650px;
  margin:0;
  font-size:var(--bp-type-display);
  line-height:var(--bp-line-display);
  letter-spacing:var(--bp-track-display);
  font-weight:var(--bp-weight-extrabold);
}

.bp-product-story__lead{
  max-width:650px;
  margin-top:18px;
  font-size:var(--bp-type-body-lg);
  line-height:var(--bp-line-body);
}

.bp-product-story__steps{
  position:relative;
  min-width:0;
  padding-left:30px;
}

.bp-product-story__progress{
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin:0;
  z-index:20;
}

.bp-product-story__progress button{
  display:block;
  width:5px;
  height:20px;
  border:0;
  padding:0;
  border-radius:999px;
  background:rgba(15,23,42,.12);
  appearance:none;
  -webkit-appearance:none;
  transition:height .28s ease,background .28s ease;
}

.bp-product-story__progress button.is-active{
  height:38px;
  background:var(--text,#0F172A);
}

.bp-product-story__cards{
  position:relative;
  min-width:0;
}

.bp-product-story__card{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  min-width:0;
  padding:20px 22px;
  border:3px solid var(--border,#E5EEF6);
  border-radius:22px;
  background:var(--bp-card-surface);
  overflow:hidden;
  opacity:var(--bp-story-opacity,0);
  transform:translate3d(0,var(--bp-story-y,18px),0) scale(var(--bp-story-scale,.985));
  pointer-events:none;
  will-change:opacity,transform;
  transition:border-color .25s ease,box-shadow .25s ease;
}

.bp-product-story__card.is-active{
  box-shadow:var(--bp-card-shadow);
}

.bp-product-story__card:first-child{
  --bp-story-opacity:1;
  --bp-story-y:0px;
  --bp-story-scale:1;
}

.bp-product-story__card-icon{
  position:absolute;
  right:16px;
  bottom:-10px;
  width:118px;
  height:118px;
  background:var(--text,#0F172A);
  opacity:.055;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
  pointer-events:none;
}

.bp-product-story__card > div{
  position:relative;
  z-index:1;
  max-width:590px;
}

.bp-product-story__card h3{
  margin:0 0 8px;
  color:var(--text,#0F172A);
  font-size:var(--bp-type-card-lg);
  line-height:var(--bp-line-card);
  letter-spacing:var(--bp-track-card);
  font-weight:var(--bp-weight-bold);
}

.bp-product-story__card p{
  margin:0;
  color:var(--text-soft,#64748B);
  font-size:var(--bp-type-body-compact);
  line-height:var(--bp-line-body-compact);
}

.bp-product-story__visual{
  position:relative;
  min-width:0;
  margin:0;
  overflow:hidden;
  border-radius:30px;
  background:#ead3b7;
  box-shadow:0 20px 50px rgba(15,23,42,.08);
}

.bp-product-story__visual::before{
  display:none;
}

.bp-product-story__visual img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 56%;
}

/* ==========================================================
   DESKTOP — narration sticky
========================================================== */

@media (min-width:1025px){
  .bp-product-story__track{
    min-height:calc(var(--bp-story-count,4) * 58svh);
  }

  .bp-product-story__sticky{
    position:sticky;
    top:34px;
    height:calc(100svh - 48px);
    min-height:620px;
    display:flex;
    align-items:center;
  }

  .bp-product-story__shell{
    display:grid;
    grid-template-columns:minmax(0,1.04fr) minmax(420px,.96fr);
    gap:clamp(28px,3vw,44px);
    height:100%;
  }

  .bp-product-story__main{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:clamp(24px,2.8vw,42px) 0 clamp(24px,2.8vw,42px) clamp(18px,1.8vw,28px);
  }

  .bp-product-story__steps{
    margin-top:clamp(22px,2.3vw,30px);
  }

  .bp-product-story__cards{
    height:clamp(184px,22vh,218px);
  }

  .bp-product-story__visual{
    height:100%;
  }
}

/* Desktop plus compact en hauteur */
@media (min-width:1025px) and (max-height:720px){
  .bp-product-story{
    padding:28px 0 16px;
  }

  .bp-product-story__sticky{
    top:28px;
    height:calc(100svh - 40px);
    min-height:570px;
  }

  .bp-product-story__main{
    padding:26px 34px;
  }

  .bp-product-story__lead{
    margin-top:13px;
  }

  .bp-product-story__steps{
    margin-top:16px;
  }

  .bp-product-story__cards{
    height:168px;
  }

  .bp-product-story__card{
    padding:17px 20px;
  }
}

/* ==========================================================
   TABLETTE / MOBILE — aucun scroll bloqué
========================================================== */

@media (max-width:1024px){
  .bp-product-story{
    padding:clamp(30px,5vw,48px) 0;
  }

  .bp-product-story__track{
    min-height:0;
  }

  .bp-product-story__sticky{
    position:relative;
    top:auto;
    height:auto;
  }

  .bp-product-story__shell{
    display:grid;
    grid-template-columns:1fr;
    row-gap:12px;
    width:min(920px,calc(100vw - 24px));
  }

  .bp-product-story__main{
    padding:0 clamp(26px,5vw,42px) clamp(26px,5vw,42px);
  }

  .bp-product-story__title{
    max-width:720px;
  }

  .bp-product-story__lead{
    max-width:720px;
  }

  .bp-product-story__visual{
    order:-1;
    width:100%;
    height:clamp(250px,35vw,300px);
    margin:0;
    aspect-ratio:auto;
  }

  .bp-product-story__visual::before{
    display:none;
  }

  .bp-product-story__visual img{
    object-position:50% 52%;
  }

  .bp-product-story__steps{
    display:flex;
    flex-direction:column;
    margin-top:24px;
    padding-left:0;
  }

  /* Pagination mobile/tablette : même langage que .bp-ai-stats__dots. */
  .bp-product-story__progress{
    position:static;
    order:2;
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    gap:8px;
    margin-top:10px;
    transform:none;
  }

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

  .bp-product-story__progress button:focus-visible{
    outline:none;
    box-shadow:0 0 0 3px rgba(34,161,238,.14);
  }

  .bp-product-story__progress button.is-active{
    width:8px;
    height:8px;
    background:#111;
    transform:scale(1.25);
  }

  .bp-product-story__cards{
    order:1;
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(72%,1fr);
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    padding:4px 2px 28px;
  }

  .bp-product-story__cards::-webkit-scrollbar{
    display:none;
  }

  .bp-product-story__card{
    position:relative;
    inset:auto;
    min-height:190px;
    opacity:1 !important;
    transform:none !important;
    pointer-events:auto;
    scroll-snap-align:start;
    box-shadow:none!important;
  }

  .bp-product-story__card.is-active{
    box-shadow:none;
  }

  .bp-product-story__progress button{
    cursor:pointer;
    touch-action:manipulation;
  }
}

@media (max-width:767px){
  .bp-product-story{
    padding:26px 0 32px;
  }

  .bp-product-story__shell{
    width:calc(100vw - 16px);
    row-gap:10px;
    overflow:visible;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }

  .bp-product-story__main{
    padding:0;
  }

  .bp-product-story__visual{
    width:calc(100% - 20px);
    height:clamp(220px,64vw,270px);
    margin:0 auto;
    border-radius:24px;
    aspect-ratio:auto;
    overflow:hidden;
  }

  .bp-product-story__visual img{
    object-position:50% 16%;
  }

  .bp-product-story__title{
    max-width:none;
  }

  .bp-product-story__lead{
    max-width:none;
    margin-top:14px;
  }

  .bp-product-story__steps{
    margin-top:20px;
  }

  .bp-product-story__cards{
    grid-auto-columns:minmax(86%,1fr);
    gap:10px;
    margin-right:-8px;
    padding:4px 8px 28px 2px;
  }

  .bp-product-story__card{
    min-height:205px;
    padding:18px 18px 20px;
    border-radius:18px;
  }

  .bp-product-story__card-icon{
    right:8px;
    bottom:-10px;
    width:100px;
    height:100px;
  }
}

/* Mode statique : réduction des mouvements ou écran non desktop. */
.bp-product-story[data-bp-product-story-mode="static"] .bp-product-story__track{
  min-height:0;
}

@media (prefers-reduced-motion:reduce){
  .bp-product-story__card{
    transition:none !important;
  }
}

/* HOME VERTICAL RHYTHM — source unique via root-tokens-bp.css */
.bp-product-story{
  padding-block:var(--bp-home-section-space-y);
}

/* HOME COHERENCE — ombre standard des cards */
.bp-product-story__card,
.bp-product-story__card.is-active{
  box-shadow:var(--bp-card-shadow);
}

/* En swipe, on garde le même style de card ; le padding du rail
   réserve l'espace nécessaire à l'ombre. */
@media(max-width:1024px){
  .bp-product-story__cards{
    padding-bottom:56px;
  }

  .bp-product-story__card,
  .bp-product-story__card.is-active{
    border:3px solid var(--border,#E5EEF6);
    border-radius:22px;
    background:var(--bp-card-surface);
    box-shadow:var(--bp-card-shadow) !important;
  }
}


/* ==========================================================
   PRODUCT STORY — DOTS PLUS PROCHES DES CARDS
   Mobile + tablette uniquement.
========================================================== */
@media (max-width:1024px){
  .bp-product-story__cards{
    padding-bottom:24px;
  }

  .bp-product-story__progress{
    margin-top:0;
  }
}