/* ============================================================
   WEBONESS FX : couche d'effets visuels partagée
   (grain, révélations, cartes projecteur, bordure « aura »,
   navigation flottante). Chargée après themes.css.
   ============================================================ */

:root {
  --fx-green:  #00FFB2;
  --fx-mint:   #7CFFD9;
  --fx-teal:   #00C48C;
  --fx-purple: #7C3AED;
  --fx-violet: #A78BFA;
  --fx-line:   rgba(255, 255, 255, 0.08);
  --fx-glass:  rgba(17, 24, 39, 0.72);
  --fx-ease:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --fx-spring: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="light"] {
  --fx-green: #00956D;
  --fx-mint:  #00B884;
  --fx-teal:  #007A59;
  --fx-line:  rgba(15, 23, 42, 0.1);
  --fx-glass: rgba(255, 255, 255, 0.78);
}

/* ── Grain (texture papier très légère) ── */
.fx-grain {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="light"] .fx-grain { opacity: 0.06; }
@media (max-width: 767px) { .fx-grain { display: none; } }

/* ── Apparition au chargement ── */
.fx-js .fx-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--fx-ease) var(--d, 0s), transform 0.7s var(--fx-ease) var(--d, 0s);
}
.fx-js.is-loaded .fx-in {
  opacity: 1;
  transform: none;
}

/* Glissement sans fondu : le texte est lisible dès le premier affichage */
.fx-js .fx-rise {
  transform: translateY(16px);
  transition: transform 0.7s var(--fx-ease) var(--d, 0s);
}
.fx-js.is-loaded .fx-rise { transform: none; }

/* ── Titres dévoilés mot par mot ── */
.sw {
  display: inline-block;
  vertical-align: top;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
  clip-path: inset(-0.3em -0.3em 0 -0.3em);
}
.sw-i { display: inline-block; }
.fx-js .sw-i {
  transform: translateY(110%);
  transition: transform 0.8s var(--fx-spring) calc(var(--i, 0) * 45ms + var(--sw-base, 0ms));
}
.fx-js .revealed .sw-i,
.fx-js.is-loaded .hero-title .sw-i {
  transform: none;
}

/* ── Pastille « en direct » ── */
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fx-green);
  margin-right: 4px;
  animation: fx-live 2.2s ease-out infinite;
}
@keyframes fx-live {
  0%   { box-shadow: 0 0 0 0 rgba(0, 255, 178, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(0, 255, 178, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 255, 178, 0); }
}

/* ── Cartes « projecteur » : halo et bordure qui suivent la souris ── */
.card::before {
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 255, 178, 0.09), transparent 45%);
}
.card::after,
.card:hover::after {
  inset: 0;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 255, 178, 0.75), rgba(124, 58, 237, 0.35) 45%, transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.card:hover::after { opacity: 1; }

.card--purple::before {
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(124, 58, 237, 0.12), transparent 45%);
}
[data-theme="light"] .card::before {
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 149, 109, 0.08), transparent 45%);
}
[data-theme="light"] .card::after {
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 149, 109, 0.7), rgba(124, 58, 237, 0.3) 45%, transparent 70%);
}

/* Inclinaison 3D : la transition doit rester courte pendant le survol */
[data-tilt] { transform-style: preserve-3d; }
[data-tilt].is-tilting { will-change: transform; transition: transform 0.12s linear, border-color 0.25s ease, box-shadow 0.25s ease !important; transition-delay: 0s !important; }

/* ── Bordure « aura » animée (carte mise en avant) ── */
@property --aura {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.aura {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  z-index: 2;
  background: conic-gradient(from var(--aura), transparent 0deg 200deg, var(--fx-green) 280deg, var(--fx-mint) 300deg, transparent 340deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: fx-aura 4.5s linear infinite;
}
@keyframes fx-aura { to { --aura: 360deg; } }

/* ── Tuiles d'icônes lumineuses ── */
.fx-icon-tile {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--fx-green);
  background: linear-gradient(145deg, rgba(0, 255, 178, 0.16), rgba(0, 255, 178, 0.03));
  border: 1px solid rgba(0, 255, 178, 0.22);
  box-shadow: 0 0 30px rgba(0, 255, 178, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  margin-bottom: var(--space-5);
}
.fx-icon-tile--purple {
  color: var(--fx-violet);
  background: linear-gradient(145deg, rgba(124, 58, 237, 0.22), rgba(124, 58, 237, 0.04));
  border-color: rgba(124, 58, 237, 0.3);
  box-shadow: 0 0 30px rgba(124, 58, 237, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .fx-icon-tile--purple { color: var(--fx-purple); }

/* ── Navigation flottante en « pilule » au défilement ── */
.nav-inner {
  transition: max-width 0.5s var(--fx-ease), margin 0.5s var(--fx-ease), height 0.5s var(--fx-ease),
              padding 0.5s var(--fx-ease), background-color 0.5s ease, border-color 0.5s ease,
              box-shadow 0.5s ease, border-radius 0.5s var(--fx-ease);
  border: 1px solid transparent;
}
.navbar.scrolled,
[data-theme="light"] .navbar.scrolled {
  background-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
.navbar.scrolled .nav-inner {
  max-width: 1180px;
  height: calc(100% - 20px);
  margin-top: 10px;
  padding-inline: 22px 12px;
  border-radius: 999px;
  background-color: var(--fx-glass);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
          backdrop-filter: blur(18px) saturate(1.4);
}
[data-theme="light"] .navbar.scrolled .nav-inner {
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.1);
}
@media (max-width: 1023px) {
  .navbar.scrolled .nav-inner {
    margin-inline: 10px;
    padding-inline: 18px 8px;
  }
}

/* ============================================================
   EN-TÊTES ANIMÉS (accueil + toutes les pages)
   ============================================================ */
.hero-fx { isolation: isolate; }
/* Fond animé (WebGL) + repli si WebGL indisponible */
.hero-gl,
.hero-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
.hero-gl { opacity: 0; transition: opacity 1.2s ease; }
.hero-gl.is-ready { opacity: 1; }
.hero-fallback {
  display: none;
  background:
    radial-gradient(55% 50% at 78% 38%, rgba(0, 255, 178, 0.16), transparent 62%),
    radial-gradient(40% 40% at 15% 85%, rgba(124, 58, 237, 0.14), transparent 60%);
}
.no-gl .hero-fallback { display: block; }
.no-gl .hero-gl { display: none; }

.hero-fx .hero-title .sw-i { --sw-base: 0ms; }

.page-hero.hero-fx,
.hero.hero-page {
  background-color: var(--color-bg);
}
.page-hero.hero-fx {
  padding-block: clamp(4.5rem, 11vh, 7.5rem) clamp(4rem, 9vh, 6.5rem);
}
.page-hero .hero-title,
.hero-page .hero-title {
  font-size: clamp(2.4rem, 5.6vw, 4.8rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.02;
  margin-bottom: var(--space-5);
}
.page-hero.hero-fx p { font-size: clamp(1.05rem, 1.3vw, 1.2rem); }
.hero-page p { margin-inline: auto; }
.hero-page .hero-title { font-size: clamp(2rem, 4.4vw, 3.6rem); }

/* Dégradé de marque vivant sur les mots mis en valeur */
.gradient-text {
  background-image: linear-gradient(100deg, #00FFB2 0%, #7CFFD9 28%, #FFFFFF 46%, #7CFFD9 64%, #00FFB2 82%, #00C48C 100%);
  background-size: 250% 100%;
  animation: fx-flow 8s linear infinite;
}
[data-theme="light"] .gradient-text {
  background-image: linear-gradient(100deg, #00956D 0%, #00B884 30%, #0F172A 48%, #00B884 66%, #00956D 100%);
  background-size: 250% 100%;
}
@keyframes fx-flow { to { background-position: -250% 0; } }

/* ── Accessibilité : réduire les animations ── */
@media (prefers-reduced-motion: reduce) {
  .fx-js .fx-in,
  .fx-js .fx-rise,
  .fx-js .sw-i { opacity: 1; transform: none; transition: none; }
  .aura, .live-dot, .gradient-text { animation: none; }
}