/* Fullsoon — feuille de style principale du site vitrine.
   Complète (ne remplace pas) les tokens du design system, chargés séparément.
   Ne contient que ce qui ne peut pas être un style inline : resets globaux,
   keyframes partagées, et le garde-fou d'accessibilité sur le mouvement. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
button { font: inherit; }
input, textarea { font: inherit; }
::selection { background: #873CFC; color: #FFFFFF; }
:focus-visible { outline: 2px solid #7937ED; outline-offset: 2px; }
a { -webkit-tap-highlight-color: transparent; }

/* Entrées utilisées par le header (mega-menu), le menu mobile et,
   plus tard, les autres pages. */
@keyframes fs-mega-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fs-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fs-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Grain très léger sur toute la page — casse l'effet "dégradé plastique".
   Utilitaire partagé (comme .fs-tabular / .fs-eyebrow dans le design system)
   car la valeur (texture en data-URI) serait illisible répétée en inline. */
.fs-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.03;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Curseurs du calculateur de ROI — la vignette (thumb) ne peut pas être
   stylée en inline : elle passe par des pseudo-éléments. */
.fs-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}
.fs-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #7937ED;
  border: 3px solid #FFFFFF;
  box-shadow: 0 2px 10px rgba(121,55,237,0.45);
  cursor: grab;
}
.fs-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #7937ED;
  border: 3px solid #FFFFFF;
  box-shadow: 0 2px 10px rgba(121,55,237,0.45);
  cursor: grab;
}

/* Halos décoratifs (.fs-glow) : sur téléphone/tablette, pas de filter:blur.
   WebKit (tous les navigateurs iOS) calcule ce flou sur le processeur, pendant
   l'affichage de la page : sur des halos de 1400 px floutés à 150 px et affichés
   en densité x3, chaque halo pèse des centaines de Mo et bloque le rendu des
   dizaines de secondes (sections blanches), voire fait planter l'onglet (iPhone 12).
   Le radial-gradient s'estompe déjà seul : le rendu reste doux, et il est gratuit.
   !important est nécessaire pour passer devant le style inline. */
@media (hover: none), (max-width: 900px) {
  .fs-glow {
    filter: none !important;
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}