/* =====================================================================
   BoosterWash — COUCHE PREMIUM (aperçu)
   Polish visuel « Apple-grade », additif. Même thème, mêmes couleurs.
   100% transform/opacity (GPU) · gated hover:hover · respecte reduced-motion.
   ===================================================================== */

/* Badge d'aperçu (retiré à l'intégration) */
.prem-preview-badge{
  position:fixed; z-index:200; bottom:calc(16px + env(safe-area-inset-bottom)); inset-inline-start:16px;
  padding:7px 13px; border-radius:999px; font-size:12px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,#0A84FF,#28D6C8); box-shadow:0 10px 26px -10px rgba(0,113,227,.6);
  pointer-events:none; letter-spacing:.01em;
}

/* Barre de progression de lecture (fine, discrète) */
.prem-progress{ position:fixed; top:0; inset-inline-start:0; height:2px; width:0; z-index:120;
  background:var(--grad-brand); box-shadow:0 0 12px rgba(0,113,227,.55); }

/* ---- Reveal enrichi : fondu + glissé + léger flou (rythme Apple) ---- */
.reveal{
  transition:opacity .85s var(--ease-out), transform .85s var(--ease-out), filter .85s var(--ease-out) !important;
  transform:translateY(32px) scale(.985); filter:blur(7px);
}
.reveal.in{ transform:none; filter:blur(0); }

/* ---- Boutons : reflet balayé + profondeur ---- */
.btn-primary{ position:relative; overflow:hidden; }
/* Exception : le CTA fixe mobile DOIT rester en position fixe.
   premium.css étant chargé après styles.css, sans cette règle le
   « position:relative » ci-dessus l'emporte et le bouton flottant disparaît. */
@media (max-width:719px){
  .mobile-cta{ position:fixed; }
}
.btn-primary::after{
  content:""; position:absolute; top:0; inset-inline-start:-70%; width:45%; height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg); opacity:0; pointer-events:none;
}
.btn-primary:hover::after{ animation:premBtnShine 1s var(--ease-out); }
@keyframes premBtnShine{ 0%{ inset-inline-start:-70%; opacity:0;} 22%{ opacity:.85;} 100%{ inset-inline-start:130%; opacity:0;} }

/* ---- Cartes : halo spéculaire qui suit le curseur (desktop) ---- */
@media (hover:hover){
  .prem-glow{ position:relative; }
  .prem-glow::before{
    content:""; position:absolute; inset:0; border-radius:inherit; z-index:1; pointer-events:none;
    background:radial-gradient(200px circle at var(--mx,50%) var(--my,0%), rgba(0,113,227,.14), transparent 62%);
    opacity:0; transition:opacity .35s var(--ease-out);
  }
  .prem-glow:hover::before{ opacity:1; }
  .prem-tilt{ transform-style:preserve-3d; will-change:transform; transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
}

/* ---- Texte dégradé : léger shimmer vivant ---- */
.grad{ background-size:220% 100% !important; animation:premGradShift 7s ease-in-out infinite; }
@keyframes premGradShift{ 0%,100%{ background-position:0% 50%;} 50%{ background-position:100% 50%;} }

/* ---- Hero : profondeur + flottement doux du halo ---- */
.hero-visual, .hero-bg{ will-change:transform; }
.hero-visual{ transition:transform .25s var(--ease-out); }

/* ---- Navbar : logo qui respire légèrement au survol ---- */
@media (hover:hover){
  .brand{ transition:transform .3s var(--ease-out); }
  .brand:hover{ transform:translateY(-1px); }
}

/* ---- Vignettes avant/après : sélection plus vivante ---- */
.ba-thumb-img{ transition:border-color .25s var(--ease-out), transform .2s var(--ease-out), box-shadow .25s var(--ease-out) !important; }

/* ---- Mobile : tout reste fluide (transform/opacity only), on retire le flou coûteux ---- */
@media (max-width:768px){
  .reveal{ filter:none; transform:translateY(24px); }
  .reveal.in{ filter:none; }
  /* Le shimmer du titre repeint en continu : inutile sur mobile, on le fige. */
  .grad{ animation:none; background-size:100% 100% !important; }
}

@media (prefers-reduced-motion:reduce){
  .reveal{ filter:none !important; transform:none !important; }
  .grad{ animation:none; }
  .btn-primary:hover::after{ animation:none; }
  .prem-progress{ display:none; }
}