/* ============================================================
   LES ANIMATIONS « SAAS » (assets/js/saas.js) — 07/10/2026
   ============================================================ */

/* --- la barre de lecture, en haut du site --- */
.saas-lecture {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 7000; pointer-events: none;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #1FBF74, #2E8BE0, #8B5CF6, #F2762F, #E8B412);
  box-shadow: 0 0 12px rgba(46,139,224,.55);
}

/* --- la barre du haut devient verre dépoli au défilement --- */
.saas .nav { transition: background .3s, box-shadow .3s, backdrop-filter .3s; }
.saas .nav.saas-verre {
  background: color-mix(in srgb, var(--fond, #fff) 72%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: 0 1px 0 var(--bord, rgba(0,0,0,.08)), 0 10px 30px rgba(0,0,0,.06);
}

/* --- les cartes : halo qui suit la souris, et inclinaison 3D --- */
.saas :is(.carte, .tarif, .etape-install, .question-s, .tarif-app, .tuile, .avantage, .carte-connexion, .pro-appli) {
  position: relative; isolation: isolate;
  transition: transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s;
}
.saas :is(.carte, .tarif, .etape-install, .question-s, .tarif-app, .tuile, .avantage, .carte-connexion, .pro-appli)::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--saas-mx, 50%) var(--saas-my, 50%), color-mix(in srgb, var(--accent, #2E8BE0) 16%, transparent), transparent 60%);
}
.saas .saas-survol { transform: perspective(900px) rotateX(var(--saas-rx, 0deg)) rotateY(var(--saas-ry, 0deg)) translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.12); }
.saas .saas-survol::after { opacity: 1; }

/* --- les boutons : aimantés, avec un reflet qui passe --- */
.saas :is(.bouton, .btn:not(.fantome)) { position: relative; overflow: hidden; }
.saas :is(.bouton, .lien-cnx, .btn:not(.fantome)).saas-aimante { translate: var(--saas-tx, 0) var(--saas-ty, 0); transition: translate .15s ease-out; }
.saas :is(.bouton, .lien-cnx, .btn:not(.fantome)) { transition: translate .4s cubic-bezier(.3,1.6,.5,1), transform .15s, box-shadow .2s; }
.saas :is(.bouton, .btn:not(.fantome))::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg); opacity: 0;
}
.saas :is(.bouton, .btn:not(.fantome)):hover::before { animation: saas-reflet .75s ease-out; }
@keyframes saas-reflet { 0% { left: -60%; opacity: 1; } 100% { left: 130%; opacity: 1; } }
.saas :is(.bouton, .btn):active { transform: scale(.96); }

/* --- les titres de section : mot par mot --- */
.saas-mot { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; }
.saas-mot > span { display: inline-block; transform: translateY(105%); opacity: 0; filter: blur(4px);
  transition: transform .7s cubic-bezier(.2,.8,.2,1), opacity .7s, filter .7s; transition-delay: calc(var(--k) * 60ms); }
.saas-mots-vus .saas-mot > span { transform: none; opacity: 1; filter: none; }

/* --- l'application : les cartes de chaque écran entrent en cascade --- */
.saas-entre { animation: saas-entre .55s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--saas-i, 0) * 45ms); }
@keyframes saas-entre { from { opacity: 0; transform: translateY(16px) scale(.98); filter: blur(4px); } }
.saas :is(.tuile, .avantage, .ligne-stat, .tarif-app):active { transform: scale(.98); transition-duration: .1s; }

@media (prefers-reduced-motion: reduce) {
  .saas-lecture { display: none; }
  .saas-mot > span { transform: none; opacity: 1; filter: none; transition: none; }
  .saas-entre { animation: none; }
  .saas .saas-survol { transform: none; }
}

/* --- à chaque toucher ou clic : une onde, et des étincelles sur ce qui se touche --- */
.saas-onde { position: fixed; z-index: 9500; width: 0; height: 0; pointer-events: none; }
.saas-onde::before { content: ''; position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid rgba(46,139,224,.55); background: radial-gradient(circle, rgba(46,139,224,.18), transparent 70%);
  animation: saas-onde .55s cubic-bezier(.2,.8,.2,1) forwards; }
.saas-onde.forte::before { border-color: rgba(31,191,116,.65); }
@keyframes saas-onde { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.saas-onde i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%;
  animation: saas-etincelle .6s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes saas-etincelle { 0% { transform: translate(0,0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .saas-onde { display: none; } }