/* ════════════════════════════════════════════════════════════
   FiveStar FX — couche d'effets premium partagée (tout le site)
   Chaque effet est progressif : rien ne casse s'il est absent.
   ════════════════════════════════════════════════════════════ */

/* Barre de progression de lecture (haut de page) */
#fx-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:3000;background:linear-gradient(90deg,#f5c842,#ffa500,#f5c842);background-size:200% 100%;box-shadow:0 0 14px rgba(245,200,66,.5);border-radius:0 99px 99px 0;pointer-events:none;animation:fxFlow 3s linear infinite}
@keyframes fxFlow{to{background-position:200% 0}}

/* Projecteur doux qui suit la souris */
#fx-spot{position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(560px circle at var(--fx-x,50%) var(--fx-y,25%),rgba(245,200,66,.05),transparent 65%)}

/* Cartes 3D (appliqué par fx.js) */
.fx-tilt{will-change:transform;transition:transform .18s ease,box-shadow .3s ease,border-color .3s ease}

/* Reflet qui balaie les boutons au survol */
.fx-shine{position:relative;overflow:hidden}
.fx-shine::after{content:'';position:absolute;top:0;left:-80%;width:55%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.3),transparent);transform:skewX(-20deg);transition:left .55s ease;pointer-events:none}
.fx-shine:hover::after{left:135%}

/* Défilé infini (logos / témoignages) */
.fx-marquee-mask{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.fx-marquee{display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;width:max-content;max-width:none!important;animation:fxMarquee 28s linear infinite}
.fx-marquee:hover{animation-play-state:paused}
@keyframes fxMarquee{to{transform:translateX(-50%)}}

/* Apparition douce générique (utilisable partout) */
.fx-reveal{opacity:0;transform:translateY(22px);transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1)}
.fx-reveal.fx-in{opacity:1;transform:none}

/* ════════════════════════════════════════════════════════════
   COUCHE PREMIUM UNIVERSELLE (toutes les pages, visible mobile)
   ════════════════════════════════════════════════════════════ */

/* Ambiance aurora derrière tout le contenu (injectée par fx.js) */
#fx-aurora{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(640px 460px at 84% 8%,rgba(245,200,66,.06),transparent 60%),
             radial-gradient(560px 440px at 6% 62%,rgba(59,130,246,.055),transparent 60%),
             radial-gradient(600px 460px at 82% 96%,rgba(167,139,250,.05),transparent 60%)}

/* Profondeur + relèvement au survol sur toutes les "cartes" du site */
.plan-full,.process-card,.faq-item,.detail-card,.founder-card,.quote-card,.stat-box,
.valeur-card,.post-card,.calc-card,.nc-box,.result-card,.pain-item,.use-card,.niche-card,
.feature-card,.tier-card,.step,.comp-card{
  box-shadow:0 1px 0 rgba(255,255,255,.035) inset,0 14px 34px rgba(0,0,0,.3);
  transition:transform .26s cubic-bezier(.22,1,.36,1),box-shadow .26s cubic-bezier(.22,1,.36,1),border-color .26s}
.plan-full:hover,.process-card:hover,.faq-item:hover,.detail-card:hover,.founder-card:hover,
.quote-card:hover,.valeur-card:hover,.post-card:hover,.calc-card:hover,.result-card:hover,
.pain-item:hover,.use-card:hover,.niche-card:hover,.feature-card:hover,.tier-card:hover{
  transform:translateY(-4px);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 24px 50px rgba(0,0,0,.44)}

/* Carte "vedette" (forfait recommandé) : anneau doré rayonnant */
.plan-full.featured,.result-card.featured,.tier-card.featured{
  box-shadow:0 0 0 1px rgba(245,200,66,.28),0 0 46px rgba(245,200,66,.14),0 24px 54px rgba(0,0,0,.46)!important}

/* Petits libellés de section -> chip lumineuse dorée */
.section-label,.hero-label,.tl-label,.nc-label,.result-label{
  display:inline-flex!important;align-items:center;gap:8px;
  background:rgba(245,200,66,.07);border:1px solid rgba(245,200,66,.22);
  padding:6px 15px;border-radius:99px;box-shadow:0 0 24px rgba(245,200,66,.08)}
.section-label::before,.hero-label::before,.tl-label::before,.nc-label::before,.result-label::before{
  content:'';width:6px;height:6px;border-radius:50%;background:#f5c842;box-shadow:0 0 9px #f5c842;flex-shrink:0}

/* Accessibilité + mobile : on coupe les effets décoratifs */
@media (hover:none){#fx-spot{display:none}}
@media (prefers-reduced-motion:reduce){
  #fx-progress{animation:none}
  #fx-spot{display:none}
  .fx-tilt,.fx-shine::after{transition:none!important;transform:none!important}
  .fx-marquee{animation:none}
  .fx-reveal{opacity:1;transform:none;transition:none}
}