/* =====================================================================
   FNSHOP · V2 PREMIUM LAYER  —  assets/fnshop-v2.css
   Additive only. Never overrides existing FNSHOP rules by selector.
   All new elements are namespaced .fn-v2-*  /  #fn-v2-*.
   Palette: gold --fn-accent (#c5a880) + #9a7a42. Base #04030c. No violet.
   Motion is globally gated by  html.fn-motion-off  (reduced-motion / DND /
   battery-saver / offline all route through that single class).
   ===================================================================== */

:root {
  --fn-v2-gold: var(--fn-accent, #c5a880);
  --fn-v2-gold-2: #9a7a42;
  --fn-v2-gold-soft: rgba(197, 168, 128, 0.35);
  --fn-v2-ink: #04030c;
  --fn-v2-glass: rgba(11, 9, 6, 0.72);
  --fn-v2-line: rgba(197, 168, 128, 0.22);
}

/* Global kill-switch: when motion is off, neutralise every heavy v2 effect. */
html.fn-motion-off .fn-v2-anim,
html.fn-motion-off [data-fn-v2-anim] {
  animation: none !important;
  transition: none !important;
}
html.fn-motion-off #fn-v2-grain { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  #fn-v2-grain { display: none; }
}

/* =====================================================================
   3.16 · Living grain / noise texture (almost invisible, very slow drift)
   ===================================================================== */
#fn-v2-grain {
  position: fixed;
  inset: -120px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  animation: fn-v2-grain-drift 8s steps(6) infinite;
  mix-blend-mode: overlay;
  will-change: transform;
}
@keyframes fn-v2-grain-drift {
  0%   { transform: translate(0, 0); }
  16%  { transform: translate(-14px, 8px); }
  33%  { transform: translate(10px, -12px); }
  50%  { transform: translate(-8px, -6px); }
  66%  { transform: translate(12px, 10px); }
  83%  { transform: translate(-10px, 6px); }
  100% { transform: translate(0, 0); }
}

/* =====================================================================
   MODULE 0.1 · SPLASH SCREEN  (7s, once / 24h)
   Early inline snippet adds html.fn-v2-splash-lock + a black ::before
   cover so there is never a flash of the page before this mounts.
   ===================================================================== */
html.fn-v2-splash-lock,
html.fn-v2-splash-lock body { overflow: hidden !important; }
html.fn-v2-splash-lock::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  background: #000;
}
html.fn-v2-splash-mounted::before { display: none; }

.fn-v2-splash {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  background: radial-gradient(120% 120% at 50% 42%, #0a0806 0%, #000 70%);
  overflow: hidden;
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.fn-v2-splash.is-leaving {
  opacity: 0;
  transform: scale(1.14);
  pointer-events: none;
}
.fn-v2-splash-halo {
  position: absolute;
  top: 42%;
  left: 50%;
  width: 520px;
  height: 520px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--fn-v2-gold-soft) 0%, transparent 62%);
  opacity: 0.5;
  filter: blur(20px);
  animation: fn-v2-splash-breathe 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fn-v2-splash-breathe {
  0%, 100% { opacity: 0.32; transform: translate(-50%, -50%) scale(0.9); }
  50%      { opacity: 0.6;  transform: translate(-50%, -50%) scale(1.08); }
}
.fn-v2-splash-logo {
  width: 168px;
  height: auto;
  filter: drop-shadow(0 18px 44px rgba(0, 0, 0, 0.7));
  transform-origin: center bottom;
  animation: fn-v2-splash-pop 1.05s cubic-bezier(0.16, 1.4, 0.3, 1) both;
  position: relative;
  z-index: 2;
}
/* "Jaillir d'un trou": starts squashed at a focal point below, then springs up. */
@keyframes fn-v2-splash-pop {
  0%   { transform: translateY(60px) scale(0.05); opacity: 0; }
  35%  { opacity: 1; }
  55%  { transform: translateY(-10px) scale(1.12); }
  72%  { transform: translateY(0) scale(0.96); }
  86%  { transform: translateY(-4px) scale(1.03); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.fn-v2-splash-brand {
  position: relative;
  z-index: 2;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(197, 168, 128, 0.82);
  opacity: 0;
  animation: fn-v2-splash-brand-in 0.8s ease 0.5s both;
}
@keyframes fn-v2-splash-brand-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 0.85; transform: none; } }
.fn-v2-splash-barwrap {
  position: relative;
  z-index: 2;
  width: min(240px, 56vw);
  height: 2px;
  border-radius: 99px;
  background: rgba(197, 168, 128, 0.14);
  overflow: hidden;
}
.fn-v2-splash-bar {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--fn-v2-gold-2), var(--fn-v2-gold), #efe0c0);
  box-shadow: 0 0 12px rgba(197, 168, 128, 0.7);
  animation: fn-v2-splash-fill 7s linear forwards;
}
@keyframes fn-v2-splash-fill { from { width: 0%; } to { width: 100%; } }
/* When motion is reduced we still show the splash but skip the pop drama. */
@media (prefers-reduced-motion: reduce) {
  .fn-v2-splash-logo { animation: fn-v2-splash-brand-in 0.4s ease both; }
  .fn-v2-splash-halo { animation: none; }
}

/* =====================================================================
   MODULE 0.2 · GUIDED TUTORIAL (skippable onboarding)
   ===================================================================== */
.fn-v2-tut-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: rgba(2, 1, 6, 0.62);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.fn-v2-tut-backdrop.is-open { opacity: 1; }
.fn-v2-tut-spot {
  position: fixed;
  z-index: 2147483001;
  border-radius: 16px;
  box-shadow: 0 0 0 4px rgba(197, 168, 128, 0.9), 0 0 0 9999px rgba(2, 1, 6, 0.66), 0 0 34px rgba(197, 168, 128, 0.5);
  transition: all 0.42s cubic-bezier(0.34, 1.4, 0.4, 1);
  pointer-events: none;
}
.fn-v2-tut-pop {
  position: fixed;
  z-index: 2147483002;
  width: min(300px, 84vw);
  padding: 18px 18px 16px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(17, 13, 8, 0.98), rgba(9, 7, 4, 0.98));
  border: 1px solid var(--fn-v2-gold-soft);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: #f3ead9;
  font-family: "Space Grotesk", system-ui, sans-serif;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transition: opacity 0.34s ease, transform 0.42s cubic-bezier(0.34, 1.4, 0.4, 1);
}
.fn-v2-tut-pop.is-open { opacity: 1; transform: none; }
.fn-v2-tut-step {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fn-v2-gold);
  margin-bottom: 8px;
}
.fn-v2-tut-title { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 6px; }
.fn-v2-tut-desc { font-size: 12.5px; line-height: 1.55; color: rgba(243, 234, 217, 0.72); margin: 0 0 15px; }
.fn-v2-tut-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fn-v2-tut-skip {
  background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 11.5px; font-weight: 600;
  color: rgba(243, 234, 217, 0.5);
  text-decoration: underline; text-underline-offset: 3px;
  padding: 6px 2px;
}
.fn-v2-tut-skip:hover { color: rgba(243, 234, 217, 0.85); }
.fn-v2-tut-next {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 800; color: #060401;
  background: linear-gradient(135deg, var(--fn-v2-gold), var(--fn-v2-gold-2));
  border: 1px solid rgba(197, 168, 128, 0.55);
  box-shadow: 0 8px 20px rgba(197, 168, 128, 0.28);
  transition: transform 0.12s ease, box-shadow 0.2s ease;
}
.fn-v2-tut-next:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(197, 168, 128, 0.4); }
.fn-v2-tut-next:active { transform: translateY(0) scale(0.97); }
.fn-v2-tut-dots { display: flex; gap: 5px; margin-top: 13px; justify-content: center; }
.fn-v2-tut-dot { width: 6px; height: 6px; border-radius: 99px; background: rgba(197, 168, 128, 0.25); transition: all 0.25s ease; }
.fn-v2-tut-dot.is-active { width: 18px; background: var(--fn-v2-gold); }

/* =====================================================================
   NAVBAR (refonte) · ombre blanche diffuse moderne + liseré 1px net
   tout autour de la barre, contour géométrique ultra-premium.
   ===================================================================== */
#fn-navbar::after {
  content: "";
  position: absolute;
  inset: -14px -20px;
  z-index: -1;
  border-radius: 999px;
  background: radial-gradient(120% 170% at 50% 42%, rgba(255, 255, 255, 0.05), transparent 72%);
  box-shadow: 0 16px 52px rgba(255, 255, 255, 0.06), 0 12px 40px rgba(0, 0, 0, 0.42);
  pointer-events: none;
  opacity: 1;
}
/* liseré 1px complet (suit le rayon de la pilule) + ombre blanche soft.
   !important pour battre le `.fn-navbar-pill { border-color … !important }`
   défini plus bas dans le CSS inline de la page. */
#fn-navbar .fn-navbar-pill {
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  box-shadow:
    0 10px 44px rgba(255, 255, 255, 0.07),
    0 8px 30px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* =====================================================================
   Pull-to-refresh DÉSACTIVÉ (natif + custom) — plus de rafraîchissement
   intempestif quand on glisse/scrolle vers le haut de la page.
   ===================================================================== */
html, body { overscroll-behavior-y: contain; overscroll-behavior-x: none; }

/* =====================================================================
   5.11 · iOS input zoom fix — keep inputs at >=16px so Safari won't zoom.
   Scoped to coarse pointers so desktop styling is untouched.
   ===================================================================== */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: max(16px, 1em);
  }
}

/* Shared v2 modal shell (used by cart-share, certificate, CGU, charter…) */
.fn-v2-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2, 1, 6, 0.74);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.fn-v2-modal-backdrop.is-open { opacity: 1; visibility: visible; }
.fn-v2-modal-backdrop.is-open .fn-v2-modal { transform: none; opacity: 1; }
.fn-v2-modal {
  position: relative;
  max-width: 440px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  padding: 26px;
  border-radius: 20px;
  background: linear-gradient(165deg, rgba(16, 12, 8, 0.98), rgba(8, 6, 4, 0.99));
  border: 1px solid var(--fn-v2-line);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
  color: #f3ead9;
  font-family: "Space Grotesk", system-ui, sans-serif;
  transform: translateY(20px) scale(0.97);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.3, 0.4, 1), opacity 0.3s ease;
}
.fn-v2-modal-x {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px; cursor: pointer;
  background: rgba(197, 168, 128, 0.1);
  border: 1px solid var(--fn-v2-line);
  color: rgba(243, 234, 217, 0.7);
  font-size: 18px; line-height: 1;
  transition: background 0.2s ease, color 0.2s ease;
}
.fn-v2-modal-x:hover { background: rgba(197, 168, 128, 0.2); color: #fff; }

/* =====================================================================
   MODULE 1.13 · LANDING OVERLAY (logged-out, once / session, index)
   ===================================================================== */
.fn-v2-landing {
  position: fixed;
  inset: 0;
  z-index: 2147481000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  padding: 32px;
  text-align: center;
  background: radial-gradient(130% 130% at 50% 30%, #0a0806 0%, #000 72%);
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.fn-v2-landing.is-in { opacity: 1; }
.fn-v2-landing.is-out { opacity: 0; transform: scale(1.08); pointer-events: none; }
.fn-v2-landing canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.fn-v2-landing-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 26px; max-width: 520px; }
.fn-v2-landing-logo {
  width: 92px; height: auto;
  filter: drop-shadow(0 12px 34px rgba(0, 0, 0, 0.7));
  animation: fn-v2-splash-pop 1s cubic-bezier(0.16, 1.4, 0.3, 1) both;
}
.fn-v2-landing-eyebrow {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.4em; text-transform: uppercase;
  color: rgba(197, 168, 128, 0.8);
}
.fn-v2-landing-title {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(30px, 7vw, 52px); font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.02; margin: 0; color: #fff;
}
.fn-v2-landing-title b { color: var(--fn-v2-gold); font-weight: 800; }
.fn-v2-landing-sub { font-family: "Space Grotesk", system-ui, sans-serif; font-size: 14px; line-height: 1.6; color: rgba(243, 234, 217, 0.6); margin: 0; max-width: 400px; }
.fn-v2-landing-cta {
  position: relative;
  margin-top: 6px;
  padding: 20px 46px;
  border-radius: 16px;
  cursor: pointer;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 16px; font-weight: 800; letter-spacing: 0.01em; color: #060401;
  background: linear-gradient(135deg, #efe0c0, var(--fn-v2-gold) 55%, var(--fn-v2-gold-2));
  border: none;
  box-shadow: 0 20px 50px rgba(197, 168, 128, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.16s ease, box-shadow 0.24s ease;
  overflow: hidden;
}
.fn-v2-landing-cta:hover { transform: translateY(-2px); box-shadow: 0 26px 60px rgba(197, 168, 128, 0.46); }
.fn-v2-landing-cta:active { transform: translateY(0) scale(0.98); }
.fn-v2-landing-cta::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-18deg);
  animation: fn-v2-sheen 3.4s ease-in-out infinite;
}
@keyframes fn-v2-sheen { 0% { left: -60%; } 55%, 100% { left: 160%; } }
html.fn-motion-off .fn-v2-landing-cta::after { animation: none; display: none; }
html.fn-motion-off .fn-v2-landing-logo { animation: none; }

/* =====================================================================
   MODULE 1.2 · SHARE SELECTION — 9:16 story card (screenshot-ready)
   ===================================================================== */
.fn-cart-share-btn {
  width: 100%;
  margin-top: 10px;
  padding: 13px 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border-radius: 12px; cursor: pointer;
  font-family: "Space Grotesk", system-ui, sans-serif; font-size: 13px; font-weight: 700;
  color: var(--fn-v2-gold);
  background: rgba(197, 168, 128, 0.08);
  border: 1px solid var(--fn-v2-line);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
}
.fn-cart-share-btn:hover { background: rgba(197, 168, 128, 0.15); border-color: rgba(197, 168, 128, 0.4); }
.fn-cart-share-btn:active { transform: scale(0.98); }
.fn-cart-share-btn svg { width: 16px; height: 16px; }

.fn-v2-story-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.fn-v2-story {
  position: relative;
  width: min(320px, 78vw);
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  overflow: hidden;
  padding: 30px 24px;
  display: flex; flex-direction: column;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(197, 168, 128, 0.18), transparent 60%),
    linear-gradient(170deg, #0d0a06 0%, #060403 100%);
  border: 1px solid var(--fn-v2-line);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), inset 0 0 60px rgba(197, 168, 128, 0.05);
  color: #f3ead9;
}
.fn-v2-story-top { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fn-v2-story-logo { width: 54px; height: auto; }
.fn-v2-story-tag { font-size: 9.5px; font-weight: 700; letter-spacing: 0.36em; text-transform: uppercase; color: rgba(197, 168, 128, 0.85); }
.fn-v2-story-h { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; text-align: center; margin: 16px 0 4px; }
.fn-v2-story-items { flex: 1; display: flex; flex-direction: column; gap: 10px; margin-top: 14px; overflow: hidden; }
.fn-v2-story-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(197, 168, 128, 0.14); }
.fn-v2-story-emoji { font-size: 26px; line-height: 1; flex-shrink: 0; }
.fn-v2-story-meta { flex: 1; min-width: 0; }
.fn-v2-story-name { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-v2-story-sub { font-size: 10.5px; color: rgba(243, 234, 217, 0.5); margin-top: 2px; }
.fn-v2-story-price { font-size: 12.5px; font-weight: 800; color: var(--fn-v2-gold); flex-shrink: 0; }
.fn-v2-story-more { font-size: 11px; color: rgba(243, 234, 217, 0.5); text-align: center; }
.fn-v2-story-foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(197, 168, 128, 0.2); display: flex; align-items: baseline; justify-content: space-between; }
.fn-v2-story-foot-lbl { font-size: 11px; color: rgba(243, 234, 217, 0.55); letter-spacing: 0.02em; }
.fn-v2-story-foot-val { font-size: 20px; font-weight: 900; color: #fff; letter-spacing: -0.02em; }
.fn-v2-story-url { text-align: center; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(197, 168, 128, 0.7); margin-top: 12px; }
.fn-v2-story-hint { font-size: 11px; color: rgba(243, 234, 217, 0.45); text-align: center; }

/* =====================================================================
   MODULE 3 · MICRO-INTERACTIONS
   ===================================================================== */

/* 3.1 · Animated fluid-gold border (inserted child ring — no pseudo conflict) */
@property --fn-v2-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.fn-v2-fluid { position: relative; }
.fn-v2-fluid-ring {
  position: absolute; inset: 0; border-radius: inherit; padding: 1.6px;
  pointer-events: none; z-index: 3; opacity: 0.9;
  background: conic-gradient(from var(--fn-v2-a), transparent 0 42%, var(--fn-v2-gold) 52%, #efe0c0 60%, transparent 72% 100%);
  -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;
  animation: fn-v2-ring-spin 3.4s linear infinite;
}
@keyframes fn-v2-ring-spin { to { --fn-v2-a: 360deg; } }
html.fn-motion-off .fn-v2-fluid-ring { animation: none; }

/* 3.4 · Glassmorphism on dropdowns / suggestion menus (additive enhance) */
.fn-acc-dropdown, .fn-enh-suggest {
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}

/* 3.7 · Focus-lit — the site background dims slightly when a field is active */
/* Assombrissement au focus d'un champ RETIRÉ (jugé gênant : « effet noir lueur » au
   clic dans un input). L'overlay ne s'affiche plus jamais. */
#fn-v2-focusdim {
  position: fixed; inset: 0; z-index: 900; pointer-events: none;
  background: rgba(2, 1, 6, 0.42);
  opacity: 0; transition: opacity 0.35s ease;
  display: none !important;
}
html.fn-v2-focus-dim #fn-v2-focusdim { opacity: 0; }
html.fn-motion-off #fn-v2-focusdim { transition: none; }

/* 3.11 · Tab-icon micro-animation on hover / active (bell wobble, loupe pivot) */
.fn-nav-btn { --fn-v2-ico: 1; }
.fn-nav-btn:hover .fn-nav-icon svg,
.fn-nav-btn.is-active .fn-nav-icon svg { transform-origin: 50% 20%; }
.fn-nav-btn[data-label="Recherche"]:hover .fn-nav-icon svg {
  animation: fn-v2-loupe 0.7s cubic-bezier(0.34, 1.4, 0.4, 1);
}
.fn-nav-btn[data-label="Accueil"]:hover .fn-nav-icon svg,
.fn-nav-btn[data-label="Télécharger"]:hover .fn-nav-icon svg {
  animation: fn-v2-bob 0.6s ease;
}
.fn-bell-btn:hover svg, .fn-bell-btn.is-ring svg { animation: fn-v2-wobble 0.8s ease; transform-origin: 50% 10%; }
@keyframes fn-v2-loupe { 0% { transform: rotate(0); } 40% { transform: rotate(-22deg) scale(1.12); } 100% { transform: rotate(0) scale(1); } }
@keyframes fn-v2-bob { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-3px); } }
@keyframes fn-v2-wobble { 0%,100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(6deg); } 80% { transform: rotate(-3deg); } }
html.fn-motion-off .fn-nav-btn .fn-nav-icon svg,
html.fn-motion-off .fn-bell-btn svg { animation: none !important; }

/* 3.14 · Micro motion-blur during fast tab transitions */
html.fn-v2-blur body { filter: blur(2px); transition: filter 0.18s ease; }
html:not(.fn-v2-blur) body { transition: filter 0.26s ease; }
html.fn-motion-off.fn-v2-blur body { filter: none; }

/* 3.18 · Fly-to-cart — product thumbnail shrinks & flies to the cart icon */
.fn-v2-fly {
  position: fixed; z-index: 2147480000; pointer-events: none;
  font-size: 40px; line-height: 1; will-change: transform, opacity;
  transition: transform 0.72s cubic-bezier(0.5, -0.2, 0.3, 1), opacity 0.72s ease;
}
.fn-cart-btn.fn-v2-cart-pulse { animation: fn-v2-cart-pulse 0.5s ease; }
@keyframes fn-v2-cart-pulse { 0%,100% { transform: scale(1); } 45% { transform: scale(1.28); } }

/* =====================================================================
   MODULE 2 · TRUST LEVERS
   ===================================================================== */

/* 2.1/2.3/2.7 · Trust cluster inside #fn-authenticity */
.fn-v2-trust-cluster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px;
  max-width: 760px; margin: 26px auto 0; padding: 0 16px;
  font-family: "Space Grotesk", system-ui, sans-serif;
}
.fn-v2-tcard {
  padding: 16px 18px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(197, 168, 128, 0.06), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--fn-v2-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.fn-v2-tcard-lbl { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(243, 234, 217, 0.55); margin-bottom: 12px; }
.fn-v2-health-bars { display: flex; align-items: flex-end; gap: 4px; height: 34px; }
.fn-v2-health-bars i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #34d399, #0f9e6e); opacity: 0.85; transition: height 0.5s cubic-bezier(0.34, 1.2, 0.4, 1), opacity 0.4s; box-shadow: 0 0 8px rgba(52, 211, 153, 0.35); }
.fn-v2-health-meta { display: flex; justify-content: space-between; margin-top: 10px; font-size: 11px; }
.fn-v2-health-ping { color: #34d399; font-weight: 800; }
.fn-v2-health-sub { color: rgba(243, 234, 217, 0.45); }
.fn-v2-iplight { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; line-height: 1.5; color: rgba(243, 234, 217, 0.75); }
.fn-v2-neon { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #34d399; flex-shrink: 0; box-shadow: 0 0 6px #34d399, 0 0 14px rgba(52, 211, 153, 0.7); }
.fn-v2-neon::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid rgba(52, 211, 153, 0.5); animation: fn-v2-neon-pulse 1.8s ease-out infinite; }
@keyframes fn-v2-neon-pulse { 0% { transform: scale(0.8); opacity: 0.9; } 100% { transform: scale(2.2); opacity: 0; } }
html.fn-motion-off .fn-v2-neon::after { animation: none; }
.fn-v2-charter-btn, .fn-v2-cert-btn {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
  padding: 11px 18px; border-radius: 11px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--fn-v2-gold);
  background: rgba(197, 168, 128, 0.08); border: 1px solid var(--fn-v2-line);
  transition: background 0.2s, border-color 0.2s, transform 0.12s;
}
.fn-v2-charter-btn:hover, .fn-v2-cert-btn:hover { background: rgba(197, 168, 128, 0.16); border-color: rgba(197, 168, 128, 0.42); }
.fn-v2-charter-btn:active, .fn-v2-cert-btn:active { transform: scale(0.98); }
.fn-v2-charter-btn svg, .fn-v2-cert-btn svg { width: 15px; height: 15px; }

/* 2.15/2.3 · Fullscreen dark volet (CGU + charter) with 3.8 elastic accordion */
.fn-v2-volet {
  position: fixed; inset: 0; z-index: 2147482500;
  background: rgba(3, 2, 7, 0.86); backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease;
  display: flex; align-items: stretch; justify-content: center;
  font-family: "Space Grotesk", system-ui, sans-serif;
}
.fn-v2-volet.is-open { opacity: 1; visibility: visible; }
.fn-v2-volet-inner {
  position: relative; width: 100%; max-width: 780px; height: 100%;
  overflow-y: auto; padding: clamp(28px, 6vw, 68px) clamp(20px, 5vw, 60px);
  background: linear-gradient(170deg, #0b0806 0%, #050403 100%);
  border-left: 1px solid var(--fn-v2-line); border-right: 1px solid var(--fn-v2-line);
  color: #f3ead9; transform: translateY(24px); transition: transform 0.5s cubic-bezier(0.3, 1, 0.4, 1);
}
.fn-v2-volet.is-open .fn-v2-volet-inner { transform: none; }
.fn-v2-volet-x { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 12px; cursor: pointer; background: rgba(197, 168, 128, 0.1); border: 1px solid var(--fn-v2-line); color: rgba(243, 234, 217, 0.75); font-size: 22px; line-height: 1; }
.fn-v2-volet-x:hover { background: rgba(197, 168, 128, 0.2); color: #fff; }
.fn-v2-volet-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.34em; text-transform: uppercase; color: var(--fn-v2-gold); margin-bottom: 12px; }
.fn-v2-volet-title { font-size: clamp(26px, 5vw, 40px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 10px; color: #fff; }
.fn-v2-volet-lede { font-size: 14.5px; line-height: 1.7; color: rgba(243, 234, 217, 0.62); margin: 0 0 30px; max-width: 60ch; }
.fn-v2-acc-item { border: 1px solid var(--fn-v2-line); border-radius: 14px; margin-bottom: 10px; overflow: hidden; background: rgba(255, 255, 255, 0.015); }
.fn-v2-acc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; cursor: pointer; font-size: 14.5px; font-weight: 700; color: #f3ead9; }
.fn-v2-acc-head span.fn-v2-acc-chev { transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.4, 1); color: var(--fn-v2-gold); }
.fn-v2-acc-item.is-open .fn-v2-acc-chev { transform: rotate(180deg); }
.fn-v2-acc-body { max-height: 0; overflow: hidden; opacity: 0.3; transition: max-height 0.5s cubic-bezier(0.34, 1.35, 0.4, 1), opacity 0.35s ease, padding 0.4s ease; padding: 0 18px; }
.fn-v2-acc-item.is-open .fn-v2-acc-body { max-height: 460px; opacity: 1; padding: 0 18px 18px; }
.fn-v2-acc-body p { font-size: 13px; line-height: 1.7; color: rgba(243, 234, 217, 0.66); margin: 0 0 10px; }
html.fn-motion-off .fn-v2-acc-body, html.fn-motion-off .fn-v2-volet-inner, html.fn-motion-off .fn-v2-acc-chev { transition: none; }
.fn-v2-charter-oath { margin-top: 22px; padding: 20px 22px; border-radius: 16px; border: 1px dashed rgba(197, 168, 128, 0.4); background: rgba(197, 168, 128, 0.05); font-size: 14px; line-height: 1.75; color: rgba(243, 234, 217, 0.8); font-style: italic; }
.fn-v2-charter-sign { margin-top: 14px; font-style: normal; font-weight: 800; letter-spacing: 0.02em; color: var(--fn-v2-gold); }

/* 2.5 · AES micro-badge near forms */
.fn-v2-aes { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 6px 11px; border-radius: 8px; font-family: "Space Grotesk", system-ui, sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; color: rgba(243, 234, 217, 0.6); background: rgba(197, 168, 128, 0.06); border: 1px solid rgba(197, 168, 128, 0.16); }
.fn-v2-aes svg { width: 12px; height: 12px; color: var(--fn-v2-gold); }

/* 2.2 · Authenticity certificate */
.fn-v2-cert {
  position: relative; width: min(440px, 90vw); padding: 34px 30px 28px; border-radius: 18px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(197, 168, 128, 0.14), transparent 55%), linear-gradient(170deg, #0d0a06, #060403);
  border: 1px solid rgba(197, 168, 128, 0.35); box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
  color: #f3ead9; text-align: center; overflow: hidden;
}
.fn-v2-cert::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(197, 168, 128, 0.22); border-radius: 12px; pointer-events: none; }
.fn-v2-cert-seal { width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--fn-v2-gold), var(--fn-v2-gold-2)); box-shadow: 0 0 22px rgba(197, 168, 128, 0.5); color: #060401; }
.fn-v2-cert-seal svg { width: 30px; height: 30px; }
.fn-v2-cert-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--fn-v2-gold); }
.fn-v2-cert-title { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; margin: 6px 0 16px; }
.fn-v2-cert-rows { text-align: left; margin: 0 auto 18px; max-width: 320px; }
.fn-v2-cert-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed rgba(197, 168, 128, 0.18); font-size: 12.5px; }
.fn-v2-cert-row:last-child { border-bottom: none; }
.fn-v2-cert-row b { color: #fff; font-weight: 700; }
.fn-v2-cert-row span { color: rgba(243, 234, 217, 0.6); }
.fn-v2-cert-foot { font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(197, 168, 128, 0.7); }

/* 2.4 · Cyber laser scan on code validation */
.fn-v2-laser { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 5; }
.fn-v2-laser::before { content: ""; position: absolute; left: 0; right: 0; height: 40%; top: -40%; background: linear-gradient(180deg, transparent, rgba(52, 211, 153, 0.18) 60%, rgba(52, 211, 153, 0.55)); box-shadow: 0 0 18px rgba(52, 211, 153, 0.6); animation: fn-v2-laser-sweep 1.3s ease-in-out; }
.fn-v2-laser::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(52, 211, 153, 0.09) 1px, transparent 1px); background-size: 100% 7px; opacity: 0.5; animation: fn-v2-laser-grid 1.3s linear; }
@keyframes fn-v2-laser-sweep { 0% { top: -40%; } 100% { top: 110%; } }
@keyframes fn-v2-laser-grid { 0%, 100% { opacity: 0; } 40% { opacity: 0.5; } }
.fn-v2-scan-host { position: relative; }

/* 2.16 · Support delay mention */
.fn-v2-support-delay { opacity: 0.72; font-weight: 600; }

/* =====================================================================
   MODULE 4 + 5 · RETENTION & MOBILE / PWA
   ===================================================================== */

/* 4.7 · settings rows (DND + reduce) — self-styled, appended to settings panel */
.fn-v2-set-group { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--fn-v2-line); font-family: "Space Grotesk", system-ui, sans-serif; }
.fn-v2-set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; }
.fn-v2-set-txt b { display: block; font-size: 13.5px; font-weight: 700; color: #f3ead9; }
.fn-v2-set-txt span { display: block; font-size: 11.5px; color: rgba(243, 234, 217, 0.5); margin-top: 2px; }
.fn-v2-switch { position: relative; width: 46px; height: 26px; border-radius: 99px; flex-shrink: 0; cursor: pointer; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--fn-v2-line); transition: background 0.25s, border-color 0.25s; }
.fn-v2-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #cfc6b6; transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.4, 1), background 0.25s; }
.fn-v2-switch.is-on { background: linear-gradient(135deg, var(--fn-v2-gold), var(--fn-v2-gold-2)); border-color: rgba(197, 168, 128, 0.55); }
.fn-v2-switch.is-on::after { transform: translateX(20px); background: #0a0806; }

/* 4.8 · 3-emoji rating bottom sheet */
.fn-v2-rate { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(30px); z-index: 2147482400; opacity: 0; transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.35, 0.4, 1); width: min(360px, 92vw); padding: 16px 18px; border-radius: 18px; background: linear-gradient(165deg, rgba(16, 12, 8, 0.98), rgba(8, 6, 4, 0.99)); border: 1px solid var(--fn-v2-line); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.6); color: #f3ead9; font-family: "Space Grotesk", system-ui, sans-serif; }
.fn-v2-rate.is-in { opacity: 1; transform: translateX(-50%) translateY(0); }
.fn-v2-rate-q { font-size: 13px; font-weight: 700; text-align: center; margin-bottom: 12px; }
.fn-v2-rate-q span { display: block; font-size: 11px; font-weight: 500; color: rgba(243, 234, 217, 0.5); margin-top: 3px; }
.fn-v2-rate-emos { display: flex; justify-content: center; gap: 14px; }
.fn-v2-rate-emo { width: 54px; height: 54px; border-radius: 14px; border: 1px solid var(--fn-v2-line); background: rgba(255, 255, 255, 0.03); font-size: 27px; cursor: pointer; transition: transform 0.15s ease, background 0.2s, border-color 0.2s; }
.fn-v2-rate-emo:hover { transform: translateY(-3px) scale(1.08); background: rgba(197, 168, 128, 0.12); border-color: rgba(197, 168, 128, 0.4); }
.fn-v2-rate-emo:active { transform: scale(0.94); }
.fn-v2-rate-x { position: absolute; top: 10px; right: 12px; background: none; border: none; color: rgba(243, 234, 217, 0.4); font-size: 18px; cursor: pointer; }

/* 4.9 · profile stats */
.fn-v2-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; font-family: "Space Grotesk", system-ui, sans-serif; }
.fn-v2-stat { padding: 16px; border-radius: 14px; background: linear-gradient(160deg, rgba(197, 168, 128, 0.07), rgba(255, 255, 255, 0.015)); border: 1px solid var(--fn-v2-line); }
.fn-v2-stat-num { font-size: 26px; font-weight: 900; letter-spacing: -0.03em; color: var(--fn-v2-gold); line-height: 1; }
.fn-v2-stat-lbl { font-size: 11px; color: rgba(243, 234, 217, 0.55); margin-top: 7px; }

/* 4.11 · sleep / idle dim */
.fn-v2-sleep { position: fixed; inset: 0; z-index: 2147482800; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: rgba(2, 1, 5, 0.9); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity 0.7s ease, visibility 0.7s ease; cursor: pointer; font-family: "Space Grotesk", system-ui, sans-serif; text-align: center; }
.fn-v2-sleep.is-on { opacity: 1; visibility: visible; }
.fn-v2-sleep img { width: 74px; opacity: 0.85; animation: fn-v2-sleep-breathe 3.6s ease-in-out infinite; }
@keyframes fn-v2-sleep-breathe { 0%, 100% { opacity: 0.55; transform: scale(0.97); } 50% { opacity: 0.9; transform: scale(1.03); } }
.fn-v2-sleep-txt { font-size: 13px; letter-spacing: 0.05em; color: rgba(243, 234, 217, 0.55); }
.fn-v2-sleep-hint { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(197, 168, 128, 0.6); }
html.fn-motion-off .fn-v2-sleep img { animation: none; }

/* 5.13 · offline banner */
.fn-v2-offline { position: fixed; left: 50%; top: 14px; transform: translateX(-50%) translateY(-24px); z-index: 2147483200; display: flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 99px; background: rgba(20, 15, 9, 0.97); border: 1px solid rgba(197, 168, 128, 0.35); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); color: #f3ead9; font-family: "Space Grotesk", system-ui, sans-serif; font-size: 12px; font-weight: 600; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.34, 1.3, 0.4, 1), visibility 0.35s; }
.fn-v2-offline.is-on { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.fn-v2-offline-dot { width: 8px; height: 8px; border-radius: 50%; background: #e0a34f; box-shadow: 0 0 8px #e0a34f; }

/* 5.5 · custom pull-to-refresh */
.fn-v2-ptr { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 2147482600; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-top: -46px; border-radius: 50%; background: rgba(12, 9, 6, 0.96); border: 1px solid var(--fn-v2-line); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; }
.fn-v2-ptr-ring { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(197, 168, 128, 0.25); border-top-color: var(--fn-v2-gold); }
.fn-v2-ptr.is-spin .fn-v2-ptr-ring { animation: fn-v2-spin360 0.7s linear infinite; }
@keyframes fn-v2-spin360 { to { transform: rotate(360deg); } }

/* 5.3 · gyroscopic reflection on the reassurance logo */
.fn-aut-logo { position: relative; }
.fn-aut-logo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 12px;
  background: radial-gradient(circle at calc(50% + var(--fn-tilt-x, 0px)) calc(40% + var(--fn-tilt-y, 0px)), rgba(255, 245, 220, 0.5), transparent 45%);
  mix-blend-mode: screen; opacity: 0.5; transition: background 0.15s linear;
}
html.fn-motion-off .fn-aut-logo::after { display: none; }

/* =====================================================================
   NOUVEAU FOOTER PREMIUM (Footer4Col) — ultra-sombre, fade-in-up au scroll
   Partagé index.html + telecharger.html.
   ===================================================================== */
.fn-v2-footer {
  position: relative;
  margin-top: 80px;
  padding: 64px 24px 30px;
  background: linear-gradient(180deg, #060409 0%, #030205 100%);
  border-top: 1px solid var(--fn-v2-line);
  font-family: "Space Grotesk", system-ui, sans-serif;
  overflow: hidden;
}
.fn-v2-footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 60% at 50% 0%, rgba(197, 168, 128, 0.06), transparent 60%);
}
.fn-v2-footer-inner { position: relative; max-width: 1120px; margin: 0 auto; }
.fn-v2-footer-cols {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px;
  padding-bottom: 40px; border-bottom: 1px solid var(--fn-v2-line);
}
.fn-v2-fcol { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fn-v2-fcol h4 { margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(243, 234, 217, 0.5); }
.fn-v2-fcol a { color: rgba(243, 234, 217, 0.72); text-decoration: none; font-size: 13.5px; font-weight: 500; transition: color 0.2s ease, transform 0.2s ease; width: fit-content; }
.fn-v2-fcol a:hover { color: var(--fn-v2-gold); transform: translateX(3px); }
.fn-v2-footer-logo { width: 132px; height: auto; margin-bottom: 4px; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5)); }
.fn-v2-footer-desc { font-size: 13.5px; line-height: 1.65; color: rgba(243, 234, 217, 0.55); margin: 0; max-width: 300px; }
.fn-v2-footer-socials { display: flex; gap: 10px; margin-top: 8px; }
.fn-v2-social {
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border-radius: 12px; background: rgba(197, 168, 128, 0.07); border: 1px solid var(--fn-v2-line);
  color: rgba(243, 234, 217, 0.8); transition: background 0.2s, border-color 0.2s, transform 0.15s, color 0.2s;
}
.fn-v2-social:hover { background: rgba(197, 168, 128, 0.16); border-color: rgba(197, 168, 128, 0.42); color: #fff; transform: translateY(-2px); }
.fn-v2-social svg { width: 20px; height: 20px; flex-shrink: 0; }
/* filet de sécurité : jamais d'icône géante dans le footer, même si le CSS tarde */
.fn-v2-footer svg { max-width: 24px; max-height: 24px; }
.fn-v2-footer-note { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12px; color: rgba(243, 234, 217, 0.55); }
.fn-v2-footer-note .fn-v2-neon { width: 8px; height: 8px; }

.fn-v2-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0 0; }
.fn-v2-footer-copy { font-size: 12.5px; color: rgba(243, 234, 217, 0.45); }
.fn-v2-footer-top {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 12px; cursor: pointer; background: rgba(197, 168, 128, 0.08); border: 1px solid var(--fn-v2-line);
  color: rgba(243, 234, 217, 0.8); transition: background 0.2s, transform 0.15s;
}
.fn-v2-footer-top:hover { background: rgba(197, 168, 128, 0.18); transform: translateY(-2px); }
.fn-v2-footer-top svg { width: 18px; height: 18px; }

/* rangée moyens de paiement — sous le copyright, discrète & élégante */
.fn-v2-footer-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(197, 168, 128, 0.10); }
.fn-v2-footer-pay-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(243, 234, 217, 0.38); margin-right: 4px; }
.fn-v2-pay {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.01em; color: rgba(243, 234, 217, 0.68);
  background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.08);
}
.fn-v2-pay svg { width: 15px; height: 15px; opacity: 0.85; flex-shrink: 0; }

/* fade-in-up au scroll (toute la zone) */
.fn-v2-footer { opacity: 0; transform: translateY(34px); transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.fn-v2-footer.is-in { opacity: 1; transform: none; }
html.fn-motion-off .fn-v2-footer { transition: none; opacity: 1; transform: none; }

@media (max-width: 860px) {
  .fn-v2-footer-cols { grid-template-columns: 1fr 1fr; gap: 30px; }
  .fn-v2-fcol--brand { grid-column: 1 / -1; }
}
/* la navbar est fixée EN HAUT (top) — un petit padding-bas suffit sur mobile */
@media (max-width: 640px) {
  .fn-v2-footer { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
  .fn-v2-footer-cols { grid-template-columns: 1fr; gap: 26px; }
  .fn-v2-footer-bottom { flex-direction: column-reverse; align-items: flex-start; gap: 14px; }
  .fn-v2-footer-desc { max-width: 100%; }
  /* rangée paiements : label sur sa ligne, petits logos alignés en dessous */
  .fn-v2-footer-pay { gap: 8px; }
  .fn-v2-footer-pay-lbl { width: 100%; margin: 0 0 2px; }
  .fn-v2-pay { font-size: 10.5px; padding: 5px 10px; }
}

/* =====================================================================
   GOOEY SEARCHBAR (recherche.html) — monochrome premium, liseré 1px,
   ombre blanche soft au focus, particules blanches/argent.
   Réutilise les ids existants (#fn-search-input/#fn-search-go).
   ===================================================================== */
.fn-search-bar-wrap {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  transition: border-color 0.3s ease, box-shadow 0.35s ease, background 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.2, 0.4, 1);
  overflow: visible;
}
.fn-search-bar-wrap:focus-within {
  border-color: rgba(255, 255, 255, 0.32) !important;
  background: rgba(6, 6, 10, 0.6) !important;
  box-shadow: 0 0 26px rgba(255, 255, 255, 0.14), 0 0 0 4px rgba(255, 255, 255, 0.03) !important;
  transform: scale(1.015);
}
html.fn-motion-off .fn-search-bar-wrap { transition: border-color 0.2s, box-shadow 0.2s; }
html.fn-motion-off .fn-search-bar-wrap:focus-within { transform: none; }
.fn-search-bar-wrap .fn-search-bar-icon { color: rgba(255, 255, 255, 0.55); transition: color 0.3s ease; z-index: 2; }
.fn-search-bar-wrap:focus-within .fn-search-bar-icon { color: #fff; }
/* couche gooey particules (blanches/argent) */
.fn-v2-gooey-layer { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; }
.fn-v2-gooey-layer.is-on { filter: url(#fn-v2-gooey); }
.fn-v2-gooey-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); filter: blur(0.5px); opacity: 0; }
.fn-search-go {
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  background: rgba(255, 255, 255, 0.10) !important;
  color: #fff !important;
  transition: background 0.2s ease, transform 0.12s ease, box-shadow 0.2s ease;
  z-index: 2;
}
.fn-search-go:hover { background: rgba(255, 255, 255, 0.18) !important; box-shadow: 0 0 16px rgba(255, 255, 255, 0.12); }
.fn-search-go:active { transform: scale(0.96); }
/* dropdown suggestions mots-clés (composant SearchBar) */
.fn-v2-sb-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 9999;
  background: rgba(6, 5, 9, 0.9); backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.34, 1.3, 0.4, 1), visibility 0.22s;
}
.fn-v2-sb-suggest.is-open { opacity: 1; visibility: visible; transform: none; }
.fn-v2-sb-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; cursor: pointer;
  color: rgba(243, 234, 217, 0.72); font-family: "Space Grotesk", system-ui, sans-serif; font-size: 13.5px; font-weight: 600;
  transition: background 0.18s ease, color 0.18s ease;
}
.fn-v2-sb-item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.fn-v2-sb-item svg { width: 14px; height: 14px; color: rgba(255, 255, 255, 0.4); transition: color 0.18s ease; }
.fn-v2-sb-item:hover svg { color: #fff; }
/* évite le double dropdown : l'ancien prédictif cède la place à la SearchBar */
.fn-enh-suggest { display: none !important; }

/* =====================================================================
   HOVER FOOTER (adapté de 21st.dev · hover-footer) — index.html
   Vanilla. Accent or (au lieu du bleu #3ca2fa). Pas de min-h-screen /
   place-self-end (aucun "trou noir"). Icônes bridées ≤ 24px.
   ===================================================================== */
.fn-hf-footer {
  position: relative;
  margin: 32px;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(13, 12, 16, 0.985), rgba(5, 4, 8, 0.99));
  border: 1px solid var(--fn-v2-line);
  font-family: "Space Grotesk", system-ui, sans-serif;
  color: rgba(243, 234, 217, 0.7);
}
.fn-hf-footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 0%, rgba(197, 168, 128, 0.06), transparent 60%);
}
.fn-hf-inner { position: relative; z-index: 40; max-width: 1120px; margin: 0 auto; padding: 56px; }
.fn-hf-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: 44px; padding-bottom: 36px; }
.fn-hf-brand-row { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.fn-hf-brand-logo { width: 34px; height: 34px; }
.fn-hf-brand-name { font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.fn-hf-desc { font-size: 13.5px; line-height: 1.7; color: rgba(243, 234, 217, 0.55); margin: 0; max-width: 300px; }
.fn-hf-col h4 { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 20px; }
/* Force-écrase toute règle ul/li globale qui injecterait des bullets */
.fn-hf-footer ul, .fn-hf-footer li { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.fn-hf-col ul { display: flex; flex-direction: column; gap: 13px; }
.fn-hf-col li { position: relative; width: fit-content; }
.fn-hf-col a, .fn-hf-col button {
  color: rgba(243, 234, 217, 0.7); text-decoration: none; font-size: 14px; font-weight: 500;
  background: none; border: none; padding: 0; cursor: pointer; font-family: inherit;
  transition: color 0.25s ease, padding-left 0.25s ease;
}
.fn-hf-col a:hover, .fn-hf-col button:hover { color: var(--fn-v2-gold); padding-left: 4px; }
.fn-hf-dot { position: absolute; top: 2px; right: -12px; width: 8px; height: 8px; border-radius: 50%; background: var(--fn-v2-gold); animation: fn-hf-pulse 1.6s ease-in-out infinite; }
@keyframes fn-hf-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.5); } }
html.fn-motion-off .fn-hf-dot { animation: none; }
.fn-hf-join { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(243, 234, 217, 0.5); margin-top: 4px; }

.fn-hf-hr { border: none; border-top: 1px solid var(--fn-v2-line); margin: 4px 0 26px; }
.fn-hf-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fn-hf-socials { display: flex; gap: 18px; }
.fn-hf-social { display: inline-flex; color: rgba(243, 234, 217, 0.5); transition: color 0.25s ease, transform 0.2s ease; }
.fn-hf-social:hover { color: var(--fn-v2-gold); transform: translateY(-2px); }
.fn-hf-copy { font-size: 13px; color: rgba(243, 234, 217, 0.45); }

/* moyens de paiement — sous le copyright */
.fn-hf-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(197, 168, 128, 0.1); }
.fn-hf-pay-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(243, 234, 217, 0.38); margin-right: 4px; }
.fn-hf-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; font-size: 11.5px; font-weight: 700; color: rgba(243, 234, 217, 0.68); background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.08); }

/* GARDE-FOU : toutes les petites icônes bridées (jamais géantes sur mobile) */
.fn-hf-social svg, .fn-hf-pay svg, .fn-hf-col svg, .fn-hf-chip svg { max-width: 24px; height: 24px; flex-shrink: 0; }

/* filigrane interactif géant : outline → remplissage doré au survol (desktop) */
.fn-hf-bigwrap { display: flex; justify-content: center; align-items: flex-end; height: 132px; margin: 8px 0 -34px; overflow: hidden; }
.fn-hf-bigsvg { width: 100%; height: auto; cursor: pointer; user-select: none; }
.fn-hf-bigsvg text {
  font-family: "Space Grotesk", system-ui, sans-serif; font-size: 68px; font-weight: 900; letter-spacing: 6px;
  fill: transparent; stroke: rgba(197, 168, 128, 0.30); stroke-width: 0.5;
  transition: fill 0.55s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.55s ease;
}
.fn-hf-bigsvg:hover text { fill: var(--fn-v2-gold); stroke: rgba(197, 168, 128, 0.7); }
@media (max-width: 1024px) { .fn-hf-bigwrap { display: none; } }

@media (max-width: 860px) {
  .fn-hf-cols { grid-template-columns: 1fr 1fr; gap: 34px; }
  .fn-hf-brand-col { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .fn-hf-footer { margin: 16px 12px !important; }
  .fn-hf-inner { padding: 28px 20px 24px !important; }
  .fn-hf-cols { grid-template-columns: 1fr !important; gap: 24px !important; }
  .fn-hf-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .fn-hf-pay { gap: 8px; }
  .fn-hf-pay-lbl { width: 100%; margin: 0 0 4px; }
  .fn-hf-chip { font-size: 10.5px; padding: 5px 10px; }
}

/* ── Étape 1 : le pont dégradé est injecté par initFooterBridge() dans fnshop-v2.js ── */
.fn-hf-footer {
  margin-top: 0 !important;
}

/* =====================================================================
   NAVBAR — GLASS iOS 26 + TRAIT OR ANIMÉ (contour) — 2026
   Ajouté dans fnshop-v2.css => STRICTEMENT IDENTIQUE sur les 4 onglets.
   Ne touche PAS au contenu de la navbar (boutons/icônes/indicateur intacts).
   Desktop = vrai verre flouté ; mobile = faux-glass (aucun flou live = fluide).
   ===================================================================== */
@property --fn-gold-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
#fn-navbar .fn-navbar-pill {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 42%, rgba(255,255,255,0) 100%),
    rgba(10,10,15,0.55) !important;
  backdrop-filter: blur(26px) saturate(1.9) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.9) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  box-shadow:
    0 10px 40px rgba(0,0,0,0.50),
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(255,255,255,0.05),
    inset 0 0 22px rgba(255,255,255,0.04) !important;
}
/* Trait or animé qui trace le contour (anneau via masque = bordure seule, ne couvre pas le contenu) */
#fn-navbar .fn-navbar-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--fn-gold-angle),
    rgba(233,200,119,0) 0deg,
    rgba(233,200,119,0) 195deg,
    rgba(233,200,119,0.60) 250deg,
    #f6e3a8 292deg,
    #fff6d8 312deg,
    #f6e3a8 332deg,
    rgba(233,200,119,0.60) 352deg,
    rgba(233,200,119,0) 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;
  animation: fn-nav-gold-rotate 4.5s linear infinite;
  pointer-events: none;
  z-index: 3;
}
@keyframes fn-nav-gold-rotate {
  to { --fn-gold-angle: 360deg; }
}
/* FAUX-GLASS MOBILE : aucun flou live (reste fluide), fond translucide qui imite le verre.
   Le trait or passe d'un faisceau tournant (repaint, cher) à un PULSE d'opacité (composité GPU,
   ~0 coût) : reste animé et premium, mais garde le mobile parfaitement fluide. */
@media (max-width: 768px) {
  #fn-navbar .fn-navbar-pill {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.015) 55%, rgba(255,255,255,0) 100%),
      rgba(9,9,13,0.90) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  /* MOBILE : on RETIRE l'anneau doré masqué. Le masque (mask-composite) + will-change
     glitchait sur iOS (parfois le masque saute → TOUTE la navbar devient dorée).
     Remplacé par une bordure dorée statique + halo doux → AUCUN masque = aucun glitch. */
  #fn-navbar .fn-navbar-pill::before { display: none !important; }
  #fn-navbar .fn-navbar-pill {
    border: 1px solid rgba(233,200,119,0.42) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.20), 0 0 14px rgba(233,200,119,0.13) !important;
  }
}
@keyframes fn-nav-gold-pulse {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}
/* Fallback navigateurs sans @property (vieux Safari) : bordure or douce fixe, pas d'animation */
@supports not (background: conic-gradient(from var(--fn-gold-angle), red)) {
  #fn-navbar .fn-navbar-pill::before {
    background: linear-gradient(120deg, rgba(233,200,119,0.20), #f6e3a8, rgba(233,200,119,0.20));
    animation: none;
  }
}

/* =====================================================================
   NAVBAR — DIMENSIONS IDENTIQUES SUR LES 4 ONGLETS + ESPACEMENT ICÔNES
   Corrige la dérive : index/recherche ont `* {min-width:0}` (global) +
   `.fn-navbar-pill { max-width: calc(100vw-28px) }` (mobile) qui manquent
   à telecharger/contact (fnshop-nav.css) → navbar plus large sur ces pages.
   On réplique ici (chargé par les 4) => rendu strictement identique partout.
   ===================================================================== */
@media (max-width: 768px) {
  /* Plafond IDENTIQUE sur les 4 onglets (relâché à -16px pour ne pas écraser les icônes
     sur iPhone). !important pour battre le max-width inline d'index (calc(100vw-28px)). */
  #fn-navbar .fn-navbar-pill { max-width: calc(100vw - 16px) !important; }
  /* SEULS les liens de navigation gauche peuvent se compresser (padding) sur petits écrans */
  #fn-navbar .fn-nav-btn { min-width: 0; }
  /* ICÔNES + BOUTONS DE DROITE jamais écrasés : taille NATURELLE identique partout.
     (index/recherche ont `*{min-width:0}` global qui compressait #fn-acc-btn 46→42px →
     l'avatar (left:11) se retrouvait décalé ~2px à droite alors qu'il est centré sur
     telecharger/contact. On force flex-shrink:0 => largeur naturelle 46px => avatar centré partout.) */
  #fn-navbar .fn-nav-icon,
  #fn-navbar .fn-nav-icon svg,
  #fn-navbar .fn-bell-btn svg,
  #fn-navbar .fn-cart-btn svg,
  #fn-navbar .fn-acc-btn svg,
  #fn-navbar .fn-acc-avatar,
  #fn-navbar .fn-acc-btn,
  #fn-navbar .fn-acc-trigger,
  #fn-navbar .fn-acc-nav-wrap,
  #fn-navbar #fn-nav-connexion,
  #fn-navbar .fn-bell-wrap,
  #fn-navbar .fn-bell-btn,
  #fn-navbar .fn-cart-btn { flex-shrink: 0; min-width: auto; }
  /* override panier mobile manquant dans fnshop-nav.css (hauteur pilule identique) */
  #fn-navbar .fn-cart-btn { padding: 10px 12px; }
}
/* Espacement des 3 icônes de droite (compte ↔ cloche ↔ panier étaient collés, 2px) — 4 onglets */
#fn-navbar .fn-bell-wrap { margin-left: 6px; }
#fn-navbar .fn-cart-btn  { margin-left: 6px; }

/* ══════════════════════════════════════════════════════════════════
   FOND ANIMÉ « AURORA » — sur TOUS les onglets, fluide et sans bug.
   Couche FIXE derrière le contenu (z-index:-1), sans interaction
   (pointer-events:none) → ne bloque JAMAIS le scroll. Les blobs bougent
   uniquement via `transform` (composité GPU = fluide, aucun repaint).
   Désactivé si l'utilisateur préfère moins d'animation.
   ══════════════════════════════════════════════════════════════════ */
#fn-aurora {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  contain: strict;
}
#fn-aurora .fn-aurora-blob {
  position: absolute; border-radius: 50%; filter: blur(64px);
  opacity: .55; will-change: transform;
}
#fn-aurora .fn-aurora-b1 {
  width: 46vmax; height: 46vmax; left: -12vmax; top: -10vmax;
  background: radial-gradient(circle, rgba(184,151,90,.30), transparent 68%);
  animation: fn-aurora-1 26s ease-in-out infinite;
}
#fn-aurora .fn-aurora-b2 {
  width: 40vmax; height: 40vmax; right: -14vmax; top: 18vmax;
  background: radial-gradient(circle, rgba(201,169,110,.22), transparent 68%);
  animation: fn-aurora-2 32s ease-in-out infinite;
}
#fn-aurora .fn-aurora-b3 {
  width: 38vmax; height: 38vmax; left: 18vmax; bottom: -16vmax;
  background: radial-gradient(circle, rgba(150,110,60,.20), transparent 70%);
  animation: fn-aurora-3 30s ease-in-out infinite;
}
@keyframes fn-aurora-1 { 0%,100%{transform:translate3d(0,0,0) scale(1)} 33%{transform:translate3d(13vmax,10vmax,0) scale(1.16)} 66%{transform:translate3d(6vmax,20vmax,0) scale(.94)} }
@keyframes fn-aurora-2 { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(-15vmax,12vmax,0) scale(1.2)} }
@keyframes fn-aurora-3 { 0%,100%{transform:translate3d(0,0,0) scale(1)} 40%{transform:translate3d(-10vmax,-12vmax,0) scale(1.1)} 80%{transform:translate3d(8vmax,-6vmax,0) scale(1.05)} }
@media (prefers-reduced-motion: reduce) { #fn-aurora .fn-aurora-blob { animation: none !important; } }
html.fn-motion-off #fn-aurora .fn-aurora-blob { animation: none !important; }
/* Le décor statique de telecharger/contact laisse place au fond animé */
.tl-bg { display: none !important; }

/* ══════════════════════════════════════════════════════════════════
   INDICE « la recherche est dans l'onglet Recherche » — s'affiche 1 fois,
   pointe vers le bouton Recherche, disparaît DÉFINITIVEMENT au clic dessus.
   ══════════════════════════════════════════════════════════════════ */
#fn-search-hint { position: fixed; z-index: 1500; transform: translateX(-50%); opacity: 0; transition: opacity .4s ease; pointer-events: auto; cursor: pointer; max-width: min(270px, 84vw); }
#fn-search-hint.show { opacity: 1; }
#fn-search-hint .fn-sh-txt { display: block; position: relative; background: linear-gradient(135deg, #c9a96e, #e8c96a); color: #1a1408; font: 700 12.5px/1.45 'Space Grotesk', system-ui, sans-serif; padding: 10px 14px; border-radius: 12px; box-shadow: 0 14px 36px rgba(184,151,90,.45); text-align: center; animation: fn-sh-bob 1.6s ease-in-out infinite; }
#fn-search-hint .fn-sh-txt b { font-weight: 900; }
#fn-search-hint .fn-sh-arrow { position: absolute; top: -5px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 11px; height: 11px; background: #c9a96e; border-radius: 2px; }
#fn-search-hint .fn-sh-x { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; background: #1a1408; color: #e8c96a; border: none; font: 700 12px/1 sans-serif; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 8px rgba(0,0,0,.4); }
@keyframes fn-sh-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { #fn-search-hint .fn-sh-txt { animation: none; } }

/* ══════════════════════════════════════════════════════════════════
   PROMOTIONS PANIER — paliers de montant, 3 pour 2, code promo.
   Injecté dans .fn-cart-foot par fnshop-v2.js (toutes les pages).
   ══════════════════════════════════════════════════════════════════ */
.fn-promo { margin-bottom: 14px; display: flex; flex-direction: column; gap: 9px; }
.fn-promo-next { font-size: 11.5px; font-weight: 700; color: #e6d2a8; text-align: center; background: rgba(201,169,110,.1); border: 1px solid rgba(201,169,110,.26); border-radius: 9px; padding: 7px 10px; display: none; }
.fn-promo-next.show { display: block; }
.fn-promo-next b { color: #f0dca0; font-weight: 900; }
.fn-promo-code { display: flex; gap: 8px; }
.fn-promo-code input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #fff; font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; outline: none; transition: border-color .2s; }
.fn-promo-code input::placeholder { color: rgba(255,255,255,.3); text-transform: none; letter-spacing: normal; font-weight: 500; }
.fn-promo-code input:focus { border-color: rgba(201,169,110,.5); }
.fn-promo-code button { flex-shrink: 0; height: 40px; padding: 0 16px; border-radius: 10px; border: none; background: linear-gradient(135deg, #b8975a, #e8c96a); color: #1a1408; font-family: inherit; font-weight: 800; font-size: 13px; cursor: pointer; transition: transform .1s, opacity .2s; }
.fn-promo-code button:active { transform: scale(.97); }
.fn-promo-msg { font-size: 11.5px; font-weight: 700; display: none; }
.fn-promo-msg.show { display: block; }
.fn-promo-msg.ok { color: #4ade80; }
.fn-promo-msg.err { color: #f87171; }
.fn-promo-lines { display: flex; flex-direction: column; gap: 4px; }
.fn-promo-line { display: flex; justify-content: space-between; font-size: 12px; color: #4ade80; font-weight: 800; }
.fn-promo-line .lbl { color: rgba(255,255,255,.72); font-weight: 600; }