/* ============================================
   VNESYS FAQ — OLED Dark & Amber Gold Theme
   Extracted from faq.html inline <style>
============================================ */
:root {
      --faq-bg: #000;
      --faq-surface: #0c0c0c;
      --faq-surface-soft: rgba(255,255,255,.028);
      --faq-line: rgba(255,255,255,.10);
      --faq-text: #f8f7f4;
      --faq-muted: #aaa9a5;
      --faq-gold: #d4af37;
      --faq-gold-bright: #f1c64c;
      --faq-gold-pale: #fff0bd;
      --faq-radius: 24px;
      --faq-shadow: 0 24px 70px rgba(0,0,0,.58);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-width: 320px;
      padding-top: 69px;
      background: var(--faq-bg);
      color: var(--faq-text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.55;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      z-index: -2;
      inset: 0;
      opacity: .23;
      pointer-events: none;
      background-image: linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
      background-size: 46px 46px;
      mask-image: linear-gradient(to bottom, black, transparent 85%);
    }

    .faq-page a { color: inherit; text-decoration: none; }
    .faq-container { width: min(1080px, calc(100% - 40px)); margin: 0 auto; }

    .faq-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 8px 12px;
      border: 1px solid rgba(212,175,55,.38);
      border-radius: 999px;
      color: #ffe9a9;
      background: rgba(212,175,55,.09);
      font-size: .73rem;
      font-weight: 900;
      letter-spacing: .11em;
      text-transform: uppercase;
    }
    .faq-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--faq-gold-bright); box-shadow: 0 0 16px var(--faq-gold); }

    .faq-hero { position: relative; overflow: hidden; padding: 96px 0 67px; text-align: center; background: radial-gradient(circle at 18% 25%, rgba(212,175,55,.15), transparent 27rem), radial-gradient(circle at 82% 52%, rgba(212,175,55,.1), transparent 30rem); }
    .faq-hero h1 { max-width: 820px; margin: 17px auto; font-size: clamp(3rem, 7vw, 5.8rem); line-height: .94; letter-spacing: -.078em; }
    .faq-gold-text { background: linear-gradient(112deg, #fff9dc, var(--faq-gold-bright) 57%, #a76f0d); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .faq-hero p { max-width: 660px; margin: 0 auto; color: var(--faq-muted); font-size: 1.05rem; }

    .faq-search-wrap { position: relative; max-width: 710px; margin: 32px auto 0; }
    .faq-search-wrap svg { position: absolute; top: 50%; left: 18px; width: 21px; height: 21px; color: var(--faq-gold-bright); transform: translateY(-50%); pointer-events: none; }
    .faq-search {
      width: 100%;
      min-height: 60px;
      padding: 0 50px;
      border: 1px solid rgba(212,175,55,.38);
      border-radius: 17px;
      outline: none;
      color: var(--faq-text);
      background: rgba(13,13,13,.88);
      box-shadow: var(--faq-shadow), 0 0 42px rgba(212,175,55,.08);
      font: inherit;
      font-size: .97rem;
    }
    .faq-search::placeholder { color: #77746d; }
    .faq-search:focus { border-color: var(--faq-gold-bright); box-shadow: var(--faq-shadow), 0 0 0 4px rgba(212,175,55,.12); }
    .faq-search-clear { position: absolute; top: 50%; right: 13px; display: none; width: 33px; height: 33px; border: 0; border-radius: 10px; color: #211702; background: var(--faq-gold-bright); cursor: pointer; transform: translateY(-50%); font-size: 1.2rem; }
    .faq-search-clear.visible { display: grid; place-items: center; }

    .faq-main { padding: 66px 0 42px; }
    .faq-top { display: flex; justify-content: space-between; align-items: end; gap: 25px; margin-bottom: 25px; }
    .faq-heading { max-width: 650px; }
    .faq-heading h2 { margin: 13px 0 8px; font-size: clamp(2rem, 4vw, 3.15rem); line-height: 1; letter-spacing: -.058em; }
    .faq-heading p { margin: 0; color: var(--faq-muted); }
    .faq-result-count { color: #aaa18b; font-size: .85rem; white-space: nowrap; }

    .faq-category-nav { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 30px; }
    .faq-filter { padding: 10px 14px; border: 1px solid var(--faq-line); border-radius: 999px; color: #bebdb9; background: rgba(255,255,255,.025); cursor: pointer; font: inherit; font-size: .85rem; font-weight: 800; transition: background .2s ease, color .2s ease, border-color .2s ease; }
    .faq-filter:hover, .faq-filter.active { border-color: rgba(212,175,55,.5); color: #fff0bc; background: rgba(212,175,55,.12); }

    .faq-group { margin: 0 0 44px; }
    .faq-group[hidden], .faq-item[hidden] { display: none; }
    .faq-group-title { display: flex; align-items: center; gap: 11px; margin: 0 0 13px; color: var(--faq-gold-pale); font-size: 1.02rem; font-weight: 900; letter-spacing: -.015em; }
    .faq-group-title span { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(212,175,55,.35); border-radius: 10px; color: var(--faq-gold-bright); background: rgba(212,175,55,.09); font-size: .9rem; }

    .faq-list { display: grid; gap: 11px; }
    .faq-item { overflow: hidden; border: 1px solid var(--faq-line); border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018)); transition: border-color .2s ease, background .2s ease; }
    .faq-item[open] { border-color: rgba(212,175,55,.45); background: rgba(212,175,55,.055); }
    .faq-item summary { position: relative; padding: 20px 60px 20px 21px; cursor: pointer; color: var(--faq-text); list-style: none; font-size: 1rem; font-weight: 800; }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after { content: "+"; position: absolute; top: 50%; right: 19px; display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid rgba(212,175,55,.33); border-radius: 9px; color: var(--faq-gold-bright); background: rgba(212,175,55,.07); transform: translateY(-50%); font-size: 1.25rem; font-weight: 400; }
    .faq-item[open] summary::after { content: "−"; color: #211702; background: var(--faq-gold-bright); }
    .faq-answer { max-width: 890px; padding: 0 21px 21px; color: #bbb9b3; font-size: .94rem; line-height: 1.75; }
    .faq-answer p { margin: 0; }
    .faq-answer p + p { margin-top: 12px; }
    .faq-answer a { color: var(--faq-gold-bright); text-decoration: underline; text-underline-offset: 3px; }

    .faq-no-results { display: none; padding: 35px 22px; border: 1px dashed rgba(212,175,55,.36); border-radius: 19px; color: var(--faq-muted); text-align: center; background: rgba(212,175,55,.04); }
    .faq-no-results.visible { display: block; }
    .faq-no-results strong { display: block; margin-bottom: 6px; color: var(--faq-gold-pale); font-size: 1.08rem; }

    .faq-help { padding: 28px 0 96px; }
    .faq-help-inner { position: relative; overflow: hidden; padding: 47px 28px; border: 1px solid rgba(212,175,55,.38); border-radius: 29px; text-align: center; background: radial-gradient(circle at 50% 120%, rgba(212,175,55,.42), transparent 53%), linear-gradient(145deg, rgba(42,31,7,.88), rgba(8,8,8,.96)); }
    .faq-help-inner h2 { max-width: 630px; margin: 0 auto 11px; font-size: clamp(2rem,4vw,3.25rem); line-height: 1; letter-spacing: -.06em; }
    .faq-help-inner p { max-width: 570px; margin: 0 auto 23px; color: #c4bfb2; }
    .faq-help-button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border-radius: 13px; color: #211701 !important; background: linear-gradient(135deg, #ffe28d, var(--faq-gold)); box-shadow: 0 13px 32px rgba(212,175,55,.2); font-weight: 900; transition: transform .2s ease, box-shadow .2s ease; }
    .faq-help-button:hover { transform: translateY(-2px); box-shadow: 0 17px 40px rgba(212,175,55,.32); }

    /* FOOTER (uniformisé - identique à earn.html) */
    footer {
      border-top: 1px solid #1C1C20;
      background: #050507;
      padding: 40px 5%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 20px;
    }
    footer .logo img { height: 32px; opacity: 0.6; filter: brightness(2); }
    footer p { font-size: 0.8rem; color: #71717A; }
    footer nav a { color: #71717A; text-decoration: none; font-size: 0.8rem; margin-left: 20px; transition: color 0.2s; }
    footer nav a:hover { color: #F59E0B; }
    footer > a { color: #71717A; text-decoration: none; font-size: 0.8rem; transition: color 0.2s; }
    footer > a:hover { color: #F59E0B; }

    @media (max-width: 860px) { body { padding-top: 62px; } }
    @media (max-width: 600px) {
      .faq-container { width: min(100% - 28px, 1080px); }
      .faq-hero { padding: 68px 0 52px; }
      .faq-hero h1 { font-size: clamp(2.8rem, 14vw, 4.2rem); }
      .faq-hero p { font-size: .96rem; }
      .faq-main { padding-top: 53px; }
      .faq-top { display: block; }
      .faq-result-count { display: block; margin-top: 14px; }
      .faq-category-nav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; }
      .faq-filter { flex: 0 0 auto; }
      .faq-item summary { padding: 18px 54px 18px 17px; font-size: .94rem; }
      .faq-answer { padding: 0 17px 18px; font-size: .9rem; }
      footer { flex-direction: column; text-align: center; }
      footer nav a { margin: 0 10px; }
    }