(() => {
  const NS = 'http://www.w3.org/2000/svg';

  const SPRITE = `
  <svg xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0;overflow:hidden" aria-hidden="true">
    <symbol id="tq-quiz" viewBox="0 0 64 64">
      <rect x="7" y="7" width="50" height="50" rx="16" fill="var(--icon-fill, currentColor)" opacity=".20"/>
      <path d="M19 18c8-5 19-6 27-1v31c-8-5-19-4-27 1z" fill="rgba(255,255,255,.58)" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/>
      <path d="M32 37v-2c0-4 7-5 7-12 0-5-4-8-10-8-5 0-8 2-10 5" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>
      <circle cx="32" cy="45" r="2.7" fill="currentColor"/>
      <path d="M11 46c6 4 14 4 20 1M43 14l3-6 3 6 6 3-6 3-3 6-3-6-6-3z" fill="var(--icon-accent2, currentColor)" opacity=".75"/>
    </symbol>

    <symbol id="tq-play" viewBox="0 0 64 64">
      <rect x="8" y="11" width="48" height="42" rx="13" fill="rgba(255,255,255,.38)" stroke="currentColor" stroke-width="3"/>
      <path d="M20 48h24M27 48l-3 7M37 48l3 7" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
      <circle cx="32" cy="28" r="13" fill="var(--icon-fill, currentColor)" opacity=".22"/>
      <path d="M29 20l14 8-14 8z" fill="currentColor"/>
      <circle cx="46" cy="17" r="3" fill="var(--icon-accent2, currentColor)"/>
      <path d="M14 20c4-5 9-7 15-7" fill="none" stroke="rgba(255,255,255,.65)" stroke-width="3" stroke-linecap="round"/>
    </symbol>

    <symbol id="tq-multi" viewBox="0 0 64 64">
      <rect x="8" y="9" width="48" height="46" rx="16" fill="rgba(255,255,255,.35)" stroke="currentColor" stroke-width="3"/>
      <circle cx="25" cy="28" r="9" fill="currentColor" opacity=".85"/>
      <circle cx="39" cy="28" r="9" fill="var(--icon-accent2, currentColor)" opacity=".85"/>
      <path d="M17 47c2-9 14-9 17 0M30 47c2-9 14-9 17 0" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>
      <path d="M32 12l3 6 6 3-6 3-3 6-3-6-6-3 6-3z" fill="rgba(255,255,255,.72)"/>
    </symbol>

    <symbol id="tq-memory" viewBox="0 0 64 64">
      <rect x="14" y="14" width="25" height="34" rx="7" fill="rgba(255,255,255,.58)" stroke="currentColor" stroke-width="3" transform="rotate(-8 26.5 31)"/>
      <rect x="26" y="12" width="25" height="34" rx="7" fill="rgba(255,255,255,.46)" stroke="var(--icon-accent2, currentColor)" stroke-width="3" transform="rotate(8 38.5 29)"/>
      <path d="M31 29l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="currentColor"/>
      <path d="M13 49c9 5 26 5 38-1" fill="none" stroke="rgba(255,255,255,.65)" stroke-width="3" stroke-linecap="round"/>
    </symbol>

    <symbol id="tq-timeline" viewBox="0 0 64 64">
      <rect x="9" y="9" width="46" height="46" rx="16" fill="rgba(255,255,255,.36)" stroke="currentColor" stroke-width="3"/>
      <circle cx="32" cy="32" r="17" fill="none" stroke="currentColor" stroke-width="4"/>
      <path d="M32 17v15l11 7" fill="none" stroke="var(--icon-accent2, currentColor)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M22 12c-4 3-7 7-9 12M44 52c4-2 7-6 9-11" fill="none" stroke="rgba(255,255,255,.72)" stroke-width="3" stroke-linecap="round"/>
      <circle cx="32" cy="32" r="3" fill="currentColor"/>
    </symbol>

    <symbol id="tq-popcorn" viewBox="0 0 64 64">
      <path d="M17 24h30l-4 30H21z" fill="rgba(255,255,255,.58)" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/>
      <path d="M23 25l1 28M32 25v29M41 25l-2 28" stroke="var(--icon-accent2, currentColor)" stroke-width="4" stroke-linecap="round"/>
      <circle cx="21" cy="20" r="6" fill="rgba(255,255,255,.76)" stroke="currentColor" stroke-width="2"/>
      <circle cx="31" cy="17" r="7" fill="rgba(255,255,255,.76)" stroke="currentColor" stroke-width="2"/>
      <circle cx="42" cy="20" r="6" fill="rgba(255,255,255,.76)" stroke="currentColor" stroke-width="2"/>
      <path d="M13 52c9 4 27 5 39-1" fill="none" stroke="rgba(255,255,255,.65)" stroke-width="3" stroke-linecap="round"/>
    </symbol>

    <symbol id="tq-geo" viewBox="0 0 64 64">
      <circle cx="32" cy="31" r="20" fill="rgba(255,255,255,.43)" stroke="currentColor" stroke-width="3"/>
      <path d="M16 32h32M32 11c7 7 7 34 0 41M22 14c-5 11-5 25 0 36M42 14c5 11 5 25 0 36" fill="none" stroke="currentColor" stroke-width="2" opacity=".75"/>
      <path d="M42 12c8 4 13 11 14 20" fill="none" stroke="rgba(255,255,255,.65)" stroke-width="3" stroke-linecap="round"/>
      <path d="M39 24c0-6 5-10 10-10s10 4 10 10c0 8-10 18-10 18S39 32 39 24z" fill="var(--icon-accent2, currentColor)" stroke="rgba(255,255,255,.86)" stroke-width="2" transform="scale(.72) translate(18 5)"/>
    </symbol>

    <symbol id="tq-sondage" viewBox="0 0 64 64">
      <rect x="12" y="12" width="40" height="40" rx="12" fill="rgba(255,255,255,.42)" stroke="currentColor" stroke-width="3"/>
      <path d="M22 44V31M32 44V21M42 44V27" stroke="currentColor" stroke-width="6" stroke-linecap="round"/>
      <path d="M18 48h30" stroke="rgba(255,255,255,.72)" stroke-width="3" stroke-linecap="round"/>
      <circle cx="46" cy="17" r="5" fill="var(--icon-accent2, currentColor)"/>
    </symbol>

    <symbol id="tq-price" viewBox="0 0 64 64">
      <path d="M13 20l24-7 15 15-25 25L12 38z" fill="rgba(255,255,255,.52)" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/>
      <circle cx="39" cy="25" r="4" fill="var(--icon-accent2, currentColor)"/>
      <path d="M25 39h17M28 31h17M33 24v23" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
      <path d="M11 50c10 4 25 4 39-1" fill="none" stroke="rgba(255,255,255,.65)" stroke-width="3" stroke-linecap="round"/>
    </symbol>

    <symbol id="tq-review" viewBox="0 0 64 64">
      <rect x="17" y="12" width="33" height="42" rx="8" fill="rgba(255,255,255,.54)" stroke="currentColor" stroke-width="3"/>
      <path d="M25 24h17M25 33h13M25 42h10" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
      <path d="M42 44l4 4 8-11" fill="none" stroke="var(--icon-accent2, currentColor)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M14 18c3-4 7-6 13-7" fill="none" stroke="rgba(255,255,255,.65)" stroke-width="3" stroke-linecap="round"/>
    </symbol>
  </svg>`;

  function ensureSprite() {
    if (document.getElementById('tq-svg-sprite')) return;
    const wrap = document.createElement('div');
    wrap.id = 'tq-svg-sprite';
    wrap.innerHTML = SPRITE;
    document.body.prepend(wrap);
  }

  function symbolFor(el) {
    const c = el.classList;
    if (c.contains('ui-mark-play')) return 'play';
    if (c.contains('ui-mark-multi')) return 'multi';
    if (c.contains('game-mark-memory')) return 'memory';
    if (c.contains('game-mark-timeline')) return 'timeline';
    if (c.contains('game-mark-popcorn')) return 'popcorn';
    if (c.contains('game-mark-geo') || c.contains('theme-art-geopo') || c.contains('theme-art-paris')) return 'geo';
    if (c.contains('game-mark-sondage') || c.contains('mini-mark-stats') || c.contains('mini-mark-daily')) return 'sondage';
    if (c.contains('game-mark-price')) return 'price';
    if (c.contains('mini-mark-review') || c.contains('theme-art-etymologie') || c.contains('theme-art-insolite') || c.contains('theme-art-enigmes')) return 'review';
    if (c.contains('ui-mark-quiz') || c.contains('mini-mark-quiz') || c.contains('mini-mark-home')) return 'quiz';
    return '';
  }

  function replaceOne(el) {
    if (!el || el.dataset.vectorized === '1') return;
    const id = symbolFor(el);
    if (!id) return;
    const svg = document.createElementNS(NS, 'svg');
    svg.setAttribute('viewBox', '0 0 64 64');
    svg.setAttribute('aria-hidden', 'true');
    svg.className.baseVal = `${el.className} vector-icon`;
    const use = document.createElementNS(NS, 'use');
    use.setAttribute('href', `#tq-${id}`);
    svg.appendChild(use);
    el.dataset.vectorized = '1';
    el.replaceWith(svg);
  }

  function enhance(root = document) {
    ensureSprite();
    root.querySelectorAll && root.querySelectorAll('.ui-mark, .game-mark, .mini-mark, .theme-art').forEach(replaceOne);
  }

  window.TQVectorIcons = { enhance };

  document.addEventListener('DOMContentLoaded', () => {
    enhance();
    const observer = new MutationObserver((items) => {
      for (const item of items) {
        item.addedNodes.forEach((node) => {
          if (node.nodeType === 1) {
            if (node.matches && node.matches('.ui-mark, .game-mark, .mini-mark, .theme-art')) replaceOne(node);
            enhance(node);
          }
        });
      }
    });
    observer.observe(document.body, { childList: true, subtree: true });
  });
})();
