/* ==========================================================================
   Page Product Design — styles spécifiques (s'ajoute à styles.css).
   Réutilise .hero, .grey-wrap, .pricing, .price-card, .options-card, .final.
   N'ajoute que le bloc "cas clients — coming soon".
   ========================================================================== */

/* ---------- Cas clients : carousel flouté + overlay "coming soon" ---------- */
.cases-soon{
  position:relative; background:var(--grey-bg);
  padding:40px 0 90px; overflow:hidden;
}
.cases-soon__head{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:16px;
  max-width:700px; margin:0 auto 48px; padding:0 30px;
}
.cases-soon__head .h3{text-wrap:balance;}

.cases-soon__stage{position:relative; z-index:2; padding:20px 0;}

/* Rangée de tuiles placeholder, floutée et non-interactive */
.cases-soon__row{
  display:flex; gap:20px; justify-content:center;
  filter:blur(9px); -webkit-filter:blur(9px);
  pointer-events:none; user-select:none;
  opacity:.9;
}
.cases-soon__card{
  flex:none; width:493px; max-width:86vw; height:442px;
  background:#fff; border-radius:20px; overflow:hidden; position:relative;
  box-shadow:0 24px 48px -24px rgba(0,0,0,.28);
}
/* zone média (haut) */
.cases-soon__card::before{
  content:""; position:absolute; inset:8px; bottom:104px;
  border-radius:12px 12px 24px 24px;
}
/* barre meta (bas) */
.cases-soon__card::after{
  content:""; position:absolute; left:20px; bottom:34px;
  width:58%; height:16px; border-radius:8px;
  background:#e6e6e6;
  box-shadow:0 30px 0 -3px #f0f0f0, -0 -30px 0 0 transparent;
}
.cases-soon__card--1::before{background:linear-gradient(150deg, var(--purple), #3a1fb0);}
.cases-soon__card--2::before{background:linear-gradient(150deg, #c9d92e, var(--yellow));}
.cases-soon__card--3::before{background:linear-gradient(150deg, #33322e, #1b191a);}

/* Overlay centré */
.coming-soon{
  position:absolute; inset:0; z-index:3;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.coming-soon__badge{
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(27,25,27,.92); color:var(--light);
  border-radius:40px; padding:14px 24px;
  font-family:var(--font-title); font-weight:600; font-size:18px;
  letter-spacing:-.01em;
  box-shadow:0 24px 48px -18px rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.coming-soon__icon{width:20px; height:20px; display:block;}

/* Points indicateurs du carrousel de cas (créés en JS, mobile uniquement) */
.cases-soon__dots{display:none;}

@media (max-width:809px){
  /* Cas clients : carrousel piloté en JS — 1 carte par swipe, animation maîtrisée,
     aucun rebond natif. La piste est déplacée via transform (jamais floutée ;
     le blur reste sur chaque carte). */
  .cases-soon__stage{overflow:hidden;}
  .cases-soon__row{
    gap:12px;
    justify-content:flex-start;
    pointer-events:auto;
    filter:none; -webkit-filter:none;
    padding:0;
    touch-action:pan-y;                 /* le geste horizontal est géré en JS */
    will-change:transform;
    transition:transform .45s cubic-bezier(.25,.8,.3,1);
  }
  .cases-soon__card{
    width:86vw; height:320px;
    filter:blur(9px); -webkit-filter:blur(9px);
  }
  .coming-soon__badge{font-size:15px; padding:12px 18px;}

  .cases-soon__dots{
    display:flex; justify-content:center; gap:8px;
    position:relative; z-index:4; margin-top:22px;
  }
  .cases-soon__dots button{
    width:8px; height:8px; padding:0; border:0; border-radius:50%;
    background:rgba(0,0,0,.2); cursor:pointer;
    transition:background .2s ease, transform .2s ease;
  }
  .cases-soon__dots button.active{ background:var(--purple); transform:scale(1.25); }
}