/* ═══════════════════════════════════════════════════════════════════════════
   FIHARY — PAGE FONCTIONNALITÉS (08/09/2026)
   Scroll-story : les fonctionnalités sont présentées UNE PAR UNE au défilement.
   - Héro sans visuel, texte centré façon Linear
   - Sous-navigation sticky avec scroll-spy (6 catégories)
   - Rangées texte ↔ écran réel en alternance, révélées une à une (IntersectionObserver)
   - Parallaxe douce sur les captures (.fx-visual) : l'image dérive verticalement
     au défilement (JS dédié, aucun conflit avec lp-visuals.js)
   - Numéros « fantômes » en parallaxe derrière chaque titre de catégorie
   Règles brand : Inter exclusif · radius ≤ 12px · zéro ombre sur cartes ·
                  Teal = argent entrant · Purple = premium uniquement.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Héro sans visuel ── */
.fx-hero {
  position: relative;
  background:
    radial-gradient(1000px 560px at 78% -10%, rgba(82, 62, 225, 0.40) 0%, rgba(82, 62, 225, 0) 60%),
    radial-gradient(820px 480px at 8% 12%, rgba(17, 137, 169, 0.20) 0%, rgba(17, 137, 169, 0) 55%),
    linear-gradient(172deg, #191B6E 0%, var(--lp-navy) 46%, #1A1B66 100%);
  color: #FFFFFF;
  padding: calc(var(--header-h) + 84px) 0 96px;
  overflow: hidden;
  text-align: center;
}
.fx-hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(187, 192, 252, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(187, 192, 252, 0.07) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 85% 70% at 50% 0%, rgba(0,0,0,0.8) 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 0%, rgba(0,0,0,0.8) 0%, transparent 72%);
}
.fx-hero .container { position: relative; max-width: 860px; }
.fx-eyebrow-light {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(187, 192, 252, 0.30);
  background: rgba(187, 192, 252, 0.10);
  color: var(--lp-lavender);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-bottom: 26px;
}
.fx-eyebrow-light::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lp-teal);
  box-shadow: 0 0 0 3px rgba(17, 137, 169, 0.25);
}
.fx-hero h1 {
  font-size: clamp(34px, 4.6vw, 54px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin-bottom: 22px;
}
.fx-hero h1 em {
  font-style: normal;
  background: linear-gradient(92deg, #E6E9FF 10%, var(--lp-lavender) 55%, #7FD8EC 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.fx-hero-lead {
  font-size: 17.5px;
  line-height: 1.7;
  color: rgba(230, 233, 255, 0.82);
  margin-bottom: 36px;
}
.fx-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.fx-scroll-hint {
  margin-top: 52px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(230, 233, 255, 0.55);
}
.fx-scroll-hint svg { width: 16px; height: 16px; animation: fx-bob 2.4s ease-in-out infinite; }
@keyframes fx-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ── Sous-navigation sticky + scroll-spy ── */
.fx-subnav {
  position: sticky;
  top: var(--header-h, 64px);
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--lp-line);
}
.fx-subnav-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 0;
  scrollbar-width: none;
}
.fx-subnav-inner::-webkit-scrollbar { display: none; }
.fx-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--lp-line);
  background: var(--lp-white);
  color: var(--lp-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.fx-chip:hover { border-color: var(--lp-line-strong); color: var(--lp-ink); }
.fx-chip.is-active {
  background: var(--lp-navy);
  border-color: var(--lp-navy);
  color: #FFFFFF;
}

/* ── Catégories ── */
.fx-cat { position: relative; padding: 104px 0; background: var(--lp-white); }
.fx-cat.alt {
  background: var(--lp-pale);
  border-top: 1px solid var(--lp-line);
  border-bottom: 1px solid var(--lp-line);
}
.fx-cat-head { position: relative; margin-bottom: 64px; }
.fx-cat-head .lp-h2 { max-width: 720px; margin-bottom: 14px; }
.fx-cat-head .lp-lead { max-width: 620px; }
.fx-ghost {
  position: absolute;
  right: 0;
  top: -46px;
  font-size: clamp(120px, 16vw, 220px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(34, 33, 123, 0.05);
  pointer-events: none;
  user-select: none;
  will-change: transform;
}
.fx-cat.alt .fx-ghost { color: rgba(34, 33, 123, 0.07); }

/* ── Rangées texte ↔ visuel (une fonctionnalité à la fois) ── */
.fx-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 72px;
  align-items: center;
  margin-bottom: 96px;
}
.fx-row:last-of-type { margin-bottom: 0; }
.fx-row.rev .fx-visual { order: -1; }
.fx-row.rev .fx-text { order: 2; }

.fx-text h3 {
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--lp-ink);
  margin-bottom: 16px;
}
.fx-text > p { font-size: 16px; line-height: 1.7; color: var(--lp-muted); margin-bottom: 26px; }
.fx-meta {
  margin-top: 20px;
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--lp-teal);
  background: rgba(17, 137, 169, 0.08);
  border: 1px solid rgba(17, 137, 169, 0.18);
  border-radius: 999px;
  padding: 5px 14px;
}

/* ── Visuel avec parallaxe (.fx-visual — variante dédiée de .lp-visual,
      sans pan souris pour ne pas entrer en conflit avec la parallaxe) ── */
.fx-visual {
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--lp-line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--lp-pale);
}
.fx-visual img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 115%;
  height: auto;
  max-width: none;
  display: block;
  transform: translate(-50%, -50%);
  will-change: transform;
  pointer-events: none;
}
.fx-row .fx-visual { position: relative; }
.fx-row .fx-visual::before {
  content: "";
  position: absolute;
  inset: 24px -18px -18px 24px;
  border: 1px solid var(--lp-line);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(59, 95, 214, 0.06) 0%, rgba(82, 62, 225, 0.04) 55%, rgba(17, 137, 169, 0.05) 100%);
  z-index: 0;
}
.fx-row .fx-visual { z-index: 1; }
/* Bouton plein écran — mêmes specs que .lp-fs-btn */
.fx-visual .fx-fs-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(187, 192, 252, 0.32);
  background: rgba(10, 13, 20, 0.62);
  color: #FFFFFF;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 250ms ease, transform 250ms ease, background 150ms ease;
}
.fx-visual .fx-fs-btn svg { width: 13px; height: 13px; flex: none; }
.fx-visual:hover .fx-fs-btn,
.fx-visual.is-fullscreen .fx-fs-btn { opacity: 1; transform: translateY(0); }
.fx-visual .fx-fs-btn:hover { background: rgba(10, 13, 20, 0.88); }
@media (hover: none) { .fx-visual .fx-fs-btn { opacity: 1; transform: none; } }
.fx-visual.is-fullscreen,
.fx-visual:fullscreen {
  position: fixed !important;
  inset: 0;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  aspect-ratio: auto !important;
  border: none !important;
  border-radius: 0 !important;
  background: #0A0F2E;
  z-index: 9999;
}
.fx-visual.is-fullscreen img,
.fx-visual:fullscreen img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  transform: none !important;
  left: 0 !important;
  top: 0 !important;
}
.fx-visual.is-fullscreen .fx-fs-btn,
.fx-visual:fullscreen .fx-fs-btn { opacity: 1; transform: none; }
body.fx-fs-open { overflow: hidden; }

/* ── Grille des 13 rôles ── */
.fx-roles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
  margin: 0 0 96px;
}
.fx-role {
  background: var(--lp-white);
  border: 1px solid var(--lp-line);
  border-radius: 12px;
  padding: 16px 18px;
  transition: border-color 180ms ease, transform 180ms ease;
}
.fx-role:hover { border-color: var(--lp-line-strong); transform: translateY(-2px); }
.fx-role b {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--lp-navy-deep);
  margin-bottom: 4px;
}
.fx-role span { font-size: 13px; line-height: 1.55; color: var(--lp-muted); }
.fx-cat.alt .fx-role { background: var(--lp-pale); }

/* ── Cartes compactes (fonctions secondaires) ── */
.fx-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.fx-card {
  background: var(--lp-white);
  border: 1px solid var(--lp-line);
  border-radius: 12px;
  padding: 24px 22px;
  transition: border-color 180ms ease, transform 180ms ease;
}
.fx-card:hover { border-color: var(--lp-line-strong); transform: translateY(-2px); }
.fx-card h4 { font-size: 16px; font-weight: 600; color: var(--lp-navy-deep); margin-bottom: 8px; letter-spacing: -0.01em; }
.fx-card p { font-size: 14px; line-height: 1.6; color: var(--lp-muted); }
.fx-card .fx-meta { margin-top: 14px; font-size: 11.5px; padding: 4px 12px; }
.fx-cat.alt .fx-card { background: var(--lp-pale); }

/* ── Révélation au scroll (une par une) ── */
.fx-rv {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--fx-delay, 0ms);
}
.fx-rv.is-visible { opacity: 1; transform: translateY(0); }
.fx-roles .fx-role:nth-child(1) { --fx-delay: 0ms; }
.fx-roles .fx-role:nth-child(2) { --fx-delay: 40ms; }
.fx-roles .fx-role:nth-child(3) { --fx-delay: 80ms; }
.fx-roles .fx-role:nth-child(4) { --fx-delay: 120ms; }
.fx-roles .fx-role:nth-child(5) { --fx-delay: 160ms; }
.fx-roles .fx-role:nth-child(6) { --fx-delay: 200ms; }
.fx-roles .fx-role:nth-child(7) { --fx-delay: 240ms; }
.fx-roles .fx-role:nth-child(8) { --fx-delay: 280ms; }
.fx-roles .fx-role:nth-child(9) { --fx-delay: 320ms; }
.fx-roles .fx-role:nth-child(10) { --fx-delay: 360ms; }
.fx-roles .fx-role:nth-child(11) { --fx-delay: 400ms; }
.fx-roles .fx-role:nth-child(12) { --fx-delay: 440ms; }
.fx-roles .fx-role:nth-child(13) { --fx-delay: 480ms; }
.fx-cards .fx-card:nth-child(2) { --fx-delay: 90ms; }
.fx-cards .fx-card:nth-child(3) { --fx-delay: 180ms; }
.fx-cards .fx-card:nth-child(4) { --fx-delay: 270ms; }

/* Ancrage sous la sous-nav sticky */
.fx-cat { scroll-margin-top: calc(var(--header-h, 64px) + 58px); }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .fx-row, .fx-row.rev { grid-template-columns: 1fr; gap: 36px; }
  .fx-row.rev .fx-visual { order: 0; }
  .fx-row.rev .fx-text { order: 0; }
  .fx-ghost { right: -10px; top: -30px; }
}
@media (max-width: 768px) {
  .fx-hero { padding: calc(var(--header-h) + 56px) 0 64px; }
  .fx-cat { padding: 72px 0; }
  .fx-cat-head { margin-bottom: 44px; }
  .fx-row { margin-bottom: 64px; }
  .fx-row .fx-visual::before { inset: 12px -12px -12px 12px; }
  .fx-roles { grid-template-columns: 1fr; margin-bottom: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-rv { opacity: 1; transform: none; transition: none; }
  .fx-scroll-hint svg { animation: none; }
  .fx-visual img { transition: none; }
}