/* ============================================================
   FeeLynx — Colors & Typography
   Tokens sourced from the brand research document
   (FEELYNX_RECHERCHES_GRAPHIQUES.pdf, April 2026).
   Two parallel palettes are defined: GREEN (primary) and BLUE (alternate).
   Pages built under "FeeLynx Green" should import this file; pages
   using the blue palette can override the `--accent-*` vars on :root or
   opt into `.theme-blue` at the wrapper.
   ============================================================ */

/* ---------- FONT IMPORTS ----------
   Brand specifies Expletus Sans (display/titrage) + Saira (body/corps).
   Both loaded from local variable font files (licensed/brand-provided). */
@font-face {
  font-family: 'Saira';
  src: url('fonts/Saira-VariableFont_wdth_wght.ttf') format('truetype-variations'),
    url('fonts/Saira-VariableFont_wdth_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 50% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Expletus Sans';
  src: url('fonts/ExpletusSans-VariableFont_wght.ttf') format('truetype-variations'),
    url('fonts/ExpletusSans-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- BRAND PALETTE (charte avril 2026) ---------- */
  --white-lynx: #b7daea;
  /* page bg / surfaces claires */
  --pale-blue: #75b5df;
  /* accent secondaire / chips */
  --green-lynx: #74c1ad;
  /* accent santé / success / score */
  --dark-blue: #00499d;
  /* CTA primaire / liens forts */
  --dark-lynx: #141a3b;
  /* texte sombre / hero / footer */

  /* Aliases rétrocompat (anciens noms encore référencés en JSX) */
  --pale-green: var(--green-lynx);
  --dark-green: var(--dark-lynx);

  /* ---------- BLUE PALETTE (alternate — valeurs remappées sur la nouvelle charte) ---------- */
  --dark-lynx-blue: var(--dark-lynx);
  /* dark navy (hero/footer) */
  --white-lynx-blue: var(--white-lynx);
  /* pale bg */
  --blue-green: #75b5df;
  /* pale blue (was electric blue) */
  --blue-lynx: #00499d;
  /* dark blue (CTA primaire) */
  --green-lynx-blue: var(--green-lynx);
  /* teal accent */

  /* ---------- SEMANTIC (resolve to BLUE by default; GREEN available via .theme-green) ---------- */
  --bg: var(--white-lynx-blue);
  --bg-elevated: var(--white-lynx);
  --bg-inverse: var(--dark-lynx-blue);
  --bg-muted: var(--pale-blue);

  --fg: var(--dark-lynx-blue);
  --fg-muted: var(--dark-blue);
  --fg-subtle: var(--dark-blue);
  --fg-inverse: var(--white-lynx-blue);

  --accent: var(--blue-lynx);
  --accent-strong: var(--dark-lynx-blue);
  --accent-soft: var(--green-lynx-blue);

  --border: rgba(20, 26, 59, 0.14);
  --border-strong: rgba(20, 26, 59, 0.32);

  --success: var(--green-lynx);
  --warning: var(--pale-blue);
  --danger: var(--dark-blue);
  --info: var(--pale-blue);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Expletus Sans', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Saira', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- TYPE SCALE ----------
     Saira for body; Expletus Sans for display.
     Modular-ish: display titles go large & airy; body is
     comfortable at 16px with generous leading. */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 44px;
  --text-4xl: 60px;
  --text-5xl: 84px;
  --text-6xl: 120px;

  --leading-tight: 1.08;
  --leading-snug: 1.22;
  --leading-normal: 1.5;
  --leading-loose: 1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em;
  /* eyebrow labels, chip text */

  /* ---------- SPACING ----------
     Base unit 4px. Used for padding, gap, margin.  */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ---------- RADII ----------
     Brand leans generous/rounded (card-like). Pills for chips,
     soft rectangles for cards, full for profile avatars. */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-2xl: 44px;
  --r-pill: 999px;
  --r-full: 50%;

  /* ---------- SHADOWS ----------
     Soft, warm, low-contrast. Nothing harsh. */
  --shadow-xs: 0 1px 2px rgba(20, 26, 59, 0.05);
  --shadow-sm: 0 2px 6px rgba(20, 26, 59, 0.06), 0 1px 2px rgba(20, 26, 59, 0.04);
  --shadow-md: 0 8px 20px rgba(20, 26, 59, 0.08), 0 2px 4px rgba(20, 26, 59, 0.04);
  --shadow-lg: 0 20px 40px rgba(20, 26, 59, 0.10), 0 4px 8px rgba(20, 26, 59, 0.05);
  --shadow-xl: 0 32px 64px rgba(20, 26, 59, 0.14), 0 8px 16px rgba(20, 26, 59, 0.06);
  --shadow-inner: inset 0 1px 2px rgba(20, 26, 59, 0.06);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
}

/* Blue palette opt-in (mirror of theme-green, kept for explicit tagging) */
.theme-blue {
  --bg: var(--white-lynx);
  --bg-elevated: var(--white-lynx);
  --bg-muted: var(--pale-blue);
  --bg-inverse: var(--dark-lynx);
  --fg: var(--dark-lynx);
  --fg-muted: var(--dark-blue);
  --fg-subtle: var(--dark-blue);
  --fg-inverse: var(--white-lynx);
  --accent: var(--dark-blue);
  --accent-strong: var(--dark-lynx);
  --accent-soft: var(--green-lynx);
  --accent-mid: var(--pale-blue);
  --border: rgba(20, 26, 59, 0.14);
  --border-strong: rgba(20, 26, 59, 0.32);
}

/* Green palette opt-in — thème actif, charte avril 2026 */
.theme-green {
  --bg: var(--white-lynx);
  --bg-elevated: var(--white-lynx);
  --bg-muted: var(--pale-blue);
  /* mix White × Pale blue */
  --bg-inverse: var(--dark-lynx);

  --fg: var(--dark-lynx);
  --fg-muted: var(--dark-blue);
  /* navy slightly lifted */
  --fg-subtle: var(--dark-blue);
  --fg-inverse: var(--white-lynx);

  --accent: var(--dark-blue);
  /* CTA primaire = Dark Blue */
  --accent-strong: var(--dark-lynx);
  --accent-soft: var(--green-lynx);
  /* accent santé */
  --accent-mid: var(--pale-blue);
  /* nouveau : pour hovers */

  --border: rgba(20, 26, 59, 0.14);
  --border-strong: rgba(20, 26, 59, 0.32);
}

/* Dark inverse (for full-bleed dark hero sections) */
.theme-dark {
  --bg: var(--dark-lynx);
  --bg-elevated: var(--dark-blue);
  /* +luminance Dark Lynx */
  --bg-muted: var(--dark-lynx);
  /* -luminance */
  --fg: var(--white-lynx);
  --fg-muted: var(--pale-blue);
  /* pale blue désaturé */
  --fg-subtle: var(--pale-blue);
  --fg-inverse: var(--dark-lynx);
  --accent: var(--green-lynx);
  /* sur fond sombre, vert ressort */
  --accent-strong: var(--white-lynx);
  --border: rgba(183, 218, 234, 0.12);
  --border-strong: rgba(183, 218, 234, 0.24);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Opt-in: wrap content in .fl-prose or apply via page template.
   ============================================================ */

.fl-root,
body.fl-root {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.fl-h1,
h1.fl {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}

.fl-h2,
h2.fl {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.fl-h3,
h3.fl {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  margin: 0;
}

.fl-h4,
h4.fl {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  margin: 0;
}

.fl-eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-muted);
}

.fl-body,
p.fl {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg);
  max-width: 62ch;
  text-wrap: pretty;
  margin: 0;
}

.fl-lede {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--fg-muted);
}

.fl-caption {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--fg-subtle);
  line-height: var(--leading-snug);
}

.fl-code,
code.fl {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-muted);
  padding: 0.15em 0.4em;
  border-radius: var(--r-xs);
  color: var(--accent-strong);
}

.fl-hr {
  border: 0;
  height: 1px;
  background: var(--border);
  margin: var(--sp-8) 0;
}

/* Utility — quick brand link */
.fl-link {
  color: var(--accent);
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: 3px;
  transition: color var(--dur-base) var(--ease-out);
}

.fl-link:hover {
  color: var(--accent-strong);
}

/* ============================================================
   MOTION & DECORATION — tech + digestive health
   ============================================================ */

/* Scroll progress bar (filet teal en haut de page) */
.fl-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--pale-blue) 0%, var(--pale-blue) 100%);
  z-index: 9999;
  transition: width 80ms linear;
  box-shadow: 0 0 8px rgba(116, 193, 173, 0.6);
}

/* Reveal-on-scroll (translateY + fade) */
.fl-reveal {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
  will-change: opacity, transform;
}

.fl-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children: chaque enfant entre avec un décalage marqué */
.fl-stagger>* {
  opacity: 0;
  transform: translateY(56px);
  transition: opacity 850ms var(--ease-out), transform 850ms var(--ease-out);
}

.fl-stagger.is-visible>*:nth-child(1) {
  transition-delay: 0ms;
}

.fl-stagger.is-visible>*:nth-child(2) {
  transition-delay: 160ms;
}

.fl-stagger.is-visible>*:nth-child(3) {
  transition-delay: 320ms;
}

.fl-stagger.is-visible>*:nth-child(4) {
  transition-delay: 480ms;
}

.fl-stagger.is-visible>* {
  opacity: 1;
  transform: translateY(0);
}

/* Carte avec bordure lumineuse animée au survol (conic gradient rotation) */
.fl-card-glow {
  position: relative;
  isolation: isolate;
}

.fl-card-glow::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  padding: 3px;
  background: conic-gradient(from var(--angle, 0deg),
      transparent 0deg,
      transparent 110deg,
      rgba(116, 193, 173, 0.5) 150deg,
      var(--green-lynx) 200deg,
      var(--pale-green) 250deg,
      rgba(116, 193, 173, 0.6) 300deg,
      transparent 360deg);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 30ms var(--ease-out);
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 0 10px rgba(116, 193, 173, 0.6));
}

.fl-card-glow:hover::before {
  opacity: 1;
  animation: fl-rotate-glow 3s linear infinite;
}

/* Doux halo extérieur pour amplifier l'effet */
.fl-card-glow::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  background: radial-gradient(ellipse at center, rgba(116, 193, 173, 0.18) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 30ms var(--ease-out);
  pointer-events: none;
  z-index: 0;
}

.fl-card-glow:hover::after {
  opacity: 1;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@keyframes fl-rotate-glow {
  to {
    --angle: 360deg;
  }
}

/* Bouton — shimmer doux au survol (adaptatif clair/sombre) */
.fl-btn-shimmer {
  position: relative;
  overflow: hidden;
}

.fl-btn-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
      transparent 30%,
      rgba(183, 218, 234, 0.32) 50%,
      transparent 70%);
  transform: translateX(-110%);
  transition: transform 800ms var(--ease-out);
  pointer-events: none;
}

.fl-btn-shimmer:hover::after {
  transform: translateX(110%);
}

/* Shimmer sombre pour les boutons clairs (ghost) */
.fl-btn-shimmer.fl-btn-shimmer-dark::after {
  background: linear-gradient(100deg,
      transparent 30%,
      rgba(20, 26, 59, 0.18) 50%,
      transparent 70%);
}

/* Shimmer teinté pour le bouton iOS (visible sur fond bleu clair sans faire "tâche") */
.fl-btn-shimmer.fl-btn-shimmer-color::after {
  background: linear-gradient(100deg,
      transparent 30%,
      rgba(116, 193, 173, 0.5) 50%,
      transparent 70%);
}

/* Onde péristaltique — séparateur fin entre sections */
.fl-peristaltic-divider {
  width: 100%;
  height: 0;
  display: block;
  overflow: visible;
  pointer-events: none;
  position: relative;
  z-index: 10;
}

.fl-peristaltic-divider svg {
  width: 100%;
  height: 80px;
  display: block;
  position: absolute;
  top: -40px;
  left: 0;
}

.fl-peristaltic-divider path {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 8 16;
  animation: fl-peristaltic-flow 14s linear infinite;
}

@keyframes fl-peristaltic-flow {
  to {
    stroke-dashoffset: -360;
  }
}

/* Microbiote — points qui pulsent doucement, distribués */
@keyframes fl-cell-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.15);
    opacity: 1;
  }
}

@keyframes fl-cell-drift-a {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(8px, -10px);
  }
}

@keyframes fl-cell-drift-b {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-10px, 6px);
  }
}

@keyframes fl-cell-drift-c {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(6px, 8px);
  }
}

/* Microbiote — oscillation lente pour les bacilles / vibrions */
@keyframes fl-cell-rotate-a {

  0%,
  100% {
    transform: rotate(-10deg);
  }

  50% {
    transform: rotate(10deg);
  }
}

@keyframes fl-cell-rotate-b {

  0%,
  100% {
    transform: rotate(10deg);
  }

  50% {
    transform: rotate(-10deg);
  }
}

@media (prefers-reduced-motion: reduce) {

  [style*="fl-cell-rotate"],
  [style*="fl-cell-pulse"],
  [style*="fl-cell-drift"] {
    animation: none !important;
  }
}

/* Grille subtile animée (utilisée derrière le StatBand) */
.fl-tech-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(20, 26, 59, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20, 26, 59, 0.08) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 100%);
}

.fl-tech-grid-cell {
  position: absolute;
  width: 64px;
  height: 64px;
  background: rgba(20, 26, 59, 0.06);
  animation: fl-grid-cell-glow 6s ease-in-out infinite;
}

@keyframes fl-grid-cell-glow {

  0%,
  100% {
    opacity: 0;
  }

  40% {
    opacity: 0.8;
  }

  60% {
    opacity: 0.4;
  }
}

/* Flux de données — lignes lumineuses qui traversent une carte sombre */
.fl-data-flow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.fl-data-flow::before,
.fl-data-flow::after {
  content: "";
  position: absolute;
  height: 1px;
  width: 60%;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(116, 193, 173, 0.6) 50%,
      transparent 100%);
  animation: fl-data-flow-move 7s linear infinite;
}

.fl-data-flow::before {
  top: 28%;
  left: -60%;
  animation-delay: 0s;
}

.fl-data-flow::after {
  top: 68%;
  left: -60%;
  animation-delay: 3.5s;
  opacity: 0.7;
}

@keyframes fl-data-flow-move {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(280%);
  }
}

/* Réduction de mouvement — respect de prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {

  .fl-reveal,
  .fl-stagger>*,
  .fl-card-glow::before,
  .fl-btn-shimmer::after,
  .fl-peristaltic-divider path,
  .fl-tech-grid-cell,
  .fl-data-flow::before,
  .fl-data-flow::after {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}