/* Animations et ornements — واصِل
   Règles : transform/opacity uniquement (pas de reflow), tout neutralisé
   sous prefers-reduced-motion, aucune animation au-dessus de la ligne de
   flottaison qui retarderait la lecture du prix ou du CTA. */

/* ==================================================================
   1. RÉVÉLATION AU DÉFILEMENT
   ================================================================== */

.wsl-rv{opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.8,.3,1),transform .7s cubic-bezier(.2,.8,.3,1)}
.wsl-rv.is-in{opacity:1;transform:none}

/* Décalage en cascade pour les enfants d'une grille */
.wsl-rv.is-in > *{animation:wslPop .6s cubic-bezier(.2,.8,.3,1) both}
.wsl-rv.is-in > *:nth-child(2){animation-delay:.07s}
.wsl-rv.is-in > *:nth-child(3){animation-delay:.14s}
.wsl-rv.is-in > *:nth-child(4){animation-delay:.21s}
.wsl-rv.is-in > *:nth-child(n+5){animation-delay:.28s}
@keyframes wslPop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}

/* ==================================================================
   2. SÉPARATEURS GÉOMÉTRIQUES ISLAMIQUES
   ================================================================== */

.wsl-div{
  height:34px;margin:6px 0;position:relative;pointer-events:none;
  background-repeat:repeat-x;background-position:center;background-size:34px 34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%238a6d3b' stroke-width='1.1' opacity='.34'%3E%3Crect x='11' y='11' width='18' height='18'/%3E%3Crect x='11' y='11' width='18' height='18' transform='rotate(45 20 20)'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)
}

/* ==================================================================
   3. FUMÉE — héro de la mabkhara
   ================================================================== */

.lp-hero__media{position:relative;isolation:isolate}
.lp-hero__media::before,
.lp-hero__media::after{
  content:"";position:absolute;z-index:2;pointer-events:none;
  inset-inline-start:38%;bottom:52%;
  width:56px;height:56px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.5),transparent 68%);
  filter:blur(9px);opacity:0;
  animation:wslSmoke 5.2s ease-out infinite
}
.lp-hero__media::after{
  inset-inline-start:46%;width:44px;height:44px;
  animation-delay:2.4s;animation-duration:6s
}
@keyframes wslSmoke{
  0%{opacity:0;transform:translateY(0) scale(.55)}
  18%{opacity:.55}
  60%{opacity:.3}
  100%{opacity:0;transform:translateY(-120px) scale(2.1)}
}

/* ==================================================================
   4. MICRO-INTERACTIONS
   ================================================================== */

/* Reflet qui traverse les boutons d'action */
.lp-cta,.wsl-card-cta{position:relative;overflow:hidden}
.lp-cta::after,.wsl-card-cta::after{
  content:"";position:absolute;top:0;bottom:0;width:42%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  transform:translateX(-160%) skewX(-18deg);
  animation:wslShine 4.6s ease-in-out infinite;animation-delay:1.2s
}
@keyframes wslShine{
  0%,72%{transform:translateX(-160%) skewX(-18deg)}
  100%{transform:translateX(320%) skewX(-18deg)}
}

/* Le prix attrape la lumière */
.lp-price__now,.lp-total strong{
  background:linear-gradient(100deg,currentColor 0%,#caa85f 42%,currentColor 84%);
  background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;
  animation:wslPriceSheen 6.5s ease-in-out infinite
}
@keyframes wslPriceSheen{0%,100%{background-position:0 0}50%{background-position:100% 0}}

/* Pastilles de réassurance : légère lévitation décalée */
.lp-trust div span,.wsl-shophero li{animation:wslFloat 4.4s ease-in-out infinite}
.lp-trust div:nth-child(2) span,.wsl-shophero li:nth-child(2){animation-delay:.5s}
.lp-trust div:nth-child(3) span,.wsl-shophero li:nth-child(3){animation-delay:1s}
.lp-trust div:nth-child(4) span{animation-delay:1.5s}
@keyframes wslFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* Paliers de quantité : le palier retenu respire */
.lp-tier.is-on{animation:wslBeat 2.6s ease-in-out infinite}
@keyframes wslBeat{0%,100%{box-shadow:0 0 0 3px rgba(22,163,74,.14)}
  50%{box-shadow:0 0 0 6px rgba(22,163,74,.09)}}

/* Barre collante : entrée par le bas */
.lp-sticky{animation:wslUp .45s cubic-bezier(.2,.8,.3,1) both;animation-delay:.6s}
@keyframes wslUp{from{transform:translateY(100%)}to{transform:none}}

/* Étapes numérotées : la pastille pivote au survol */
.lp-steps li b{transition:transform .4s cubic-bezier(.2,.8,.3,1)}
.lp-steps li:hover b{transform:rotate(360deg) scale(1.08)}

/* Cartes d'usage : halo doré au survol */
.lp-uses div{position:relative;overflow:hidden}
.lp-uses div::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s;
  background:radial-gradient(300px circle at 100% 0,rgba(201,169,97,.14),transparent 62%)
}
.lp-uses div:hover::before{opacity:1}

/* ==================================================================
   5. ACCESSIBILITÉ
   ================================================================== */

@media (prefers-reduced-motion:reduce){
  .wsl-rv{opacity:1!important;transform:none!important;transition:none!important}
  .wsl-rv.is-in > *{animation:none!important}
  .lp-hero__media::before,.lp-hero__media::after,
  .lp-cta::after,.wsl-card-cta::after,
  .lp-price__now,.lp-total strong,
  .lp-trust div span,.wsl-shophero li,
  .lp-tier.is-on,.lp-sticky{animation:none!important}
  .lp-steps li b{transition:none!important}
}

/* ==================================================================
   6. CARTES DE LA LANDING — liens vers la fiche
   ================================================================== */

.wsl-card-link{display:block;text-decoration:none!important;color:inherit}
.wasl-card__media .wsl-card-link{overflow:hidden}
.wasl-card h3 .wsl-card-link{
  color:inherit;transition:color .22s
}
.wasl-card:hover h3 .wsl-card-link{color:#8a6d3b}

.wsl-card-more{
  display:block;text-align:center;margin:9px 0 0;
  font-size:13.5px;font-weight:700;color:#8a6d3b;text-decoration:none;
  transition:transform .22s,opacity .22s
}
.wsl-card-more:hover{transform:translateX(-4px);opacity:.75}