<!-- File: deck.html - Construction de deck Commander -->
<!-- Desc: Dans l'architecture, je suis la page deck : DOM contractuel + scripts ordonnés. -->
<!-- Version 1.4.38 -->
<!-- Copyright 2026 DNAvatar.org - Arnaud Maignan -->
<!-- Licensed under Apache License 2.0 with Commons Clause. -->
<!-- See LICENSE_HEADER.txt for full terms. -->
<!-- Date: August 26, 2026 10:25 UTC+1 -->
<!-- Logs: -->
<!-- - 1.4.36: loupe déplacée à gauche toute, séparée des params par un filet -->
<!-- - 1.4.35: bouton « sans texte » supprimé du tableau de bord -->
<!-- - 1.4.34: bouton recherche = loupe seule (dans #print-filter, à droite) ; « Filtres : » retiré ; « Remplacer toutes » -->
<!-- - 1.4.33: 📋 copie le deck au format MTG Arena (etait des noms entre guillemets) -->
<!-- - 1.4.32: age = triangles ▲ (recent) / • / ▼ (ancien), inverses -->
<!-- - 1.4.31: #pf-age en mini-carte 3 bandes (uniforme avec bord / cadrage) -->
<!-- - 1.4.30: #print-filter refait — 3 pictos (reglette age, carte bord, carte cadrage) + toggle sans texte ; bouton recherche sur une ligne -->
<!-- - 1.4.29: #print-filter (tableau de bord illustration) remplace #print-pref -->
<!-- - 1.4.28: #print-pref (Ancienne/Moderne/Défaut) sous la recherche ; .scryfall-wm (mot stylé) -->
<!-- - 1.4.38: placeholder #deck-query 4 lignes courtes, textarea rows=4 -->
<!-- - 1.4.27: placeholder #deck-query = format liste MTG Arena (cf. deck-events 1.3.44) -->
<!-- - 1.4.26: bouton #deck-save-new (Nouveau deck vierge) -->
<!-- - 1.4.25: deck-save-hint retire, devient title (infobulle) sur #deck-name -->
<!-- - 1.4.24: hint raccourci (tenait pas sur une ligne a largeur min de colonne) -->
<!-- - 1.4.23: #vault-flag sans data-action (plus de double popup) ; #vault-browse -->
<!-- - 1.4.22: nav Hub → vitrine.html (ancien index Docker) -->
<!-- - 1.4.21: nav Hub → hub.html (plus index/vitrine Docker) -->
<!-- - 1.4.20: #deck-save-hint (nouveau nom → deck vierge) -->
<!-- - 1.4.19: vault.js (coffre navigateur) -->
<!-- - 1.4.18: modal-card-arts + card-caches -->
<!-- - 1.4.17: Filtres : devant #search-colors ; plus Coffre 🏦 dans la colonne -->
<!-- - 1.4.16: Coffre 🏦 ; Chercher = coffre/Scryfall ; plus Compléter -->
<!-- - 1.4.15: #deck-split-cat (largeur catalogue / deck) -->
<!-- - 1.4.14: #vault-colors filtres WUBRG+C -->
<!-- - 1.4.13: #deck-trash (une poubelle, glisser un deck) -->
<!-- - 1.4.12: #search-colors + #deck-colors (filtres WUBRG+C) -->
<!-- - 1.4.11: #deck-page + #deck-split (largeur recherche) -->
<!-- - 1.4.10: placeholder Mox * (glob) -->
<!-- - 1.4.9: plus de jauge skew (valeur figée CSS) -->
<!-- - 1.4.8: #deck-skew jauge skewY flanc -->
<!-- - 1.4.7: placeholder recherche : virgule = séparateur -->
<!-- - 1.4.6: #deck-save id (déplacé au-dessus illustration si deck choisi) -->
<!-- - 1.4.5: signature-boot (local vs dnavatar.org/pages/logo-nonA) -->
<!-- - 1.4.4: #modal-vault catalogue coffre ; #vault-flag bouton -->
<!-- - 1.4.3: alt0sec kill-native-tooltip + tooltips.js -->
<!-- - 1.4.2: 📋 copie les noms entre "…" -->
<!-- - 1.4.1: titre MTG_dnavatar avant coffre ; legal 2 lignes sous le titre -->
<!-- - 1.4.0: nav-legal Fan Content / Scryfall / Apache -->
<!-- - 1.3.9: #lang-bar dans la nav (plus au-dessus) -->
<!-- - 1.3.8: #deck-find préfixe nom → contour blanc -->
<!-- - 1.3.7: #lang-bar au-dessus des onglets -->
<!-- - 1.3.6: #modal-genre liste des cartes qui interdisent un type -->
<!-- - 1.3.5: 📋 copier CSV en bout de #deck-name -->
<!-- - 1.3.4: disquette en bout de #deck-name ; footer signature centré -->
<!-- - 1.3.3: fetch-queue.js FIFO json+image -->
<!-- - 1.3.2: #deck-board en tête de colonne ; 0/100 dans l'encart -->
<!-- - 1.3.1: #deck-catalog-col à droite (liste + Sauver CSV) -->
<!-- - 1.3.0: colonne recherche sticky ; catalogue/sauver/genres/deck à droite ; Compléter -->
<!-- - 1.2.5: #deck-genres + deck-genre.js ; modal légalités -->
<!-- - 1.2.4: modal nom autre face ; verso petit -->
<!-- - 1.2.3: modal DFC #modal-card-img-back -->
<!-- - 1.2.2: 👑 drop commander ; oublier coffre dans la modal -->
<!-- - 1.2.1: #deck-catalog en tête (portraits + oublier) -->
<!-- - 1.2.0: #deck-board sous le nom ; cartes horizontales par genre -->
<!-- - 1.1.1: nav #vault-flag ; titre Deck n/100 -->
<!-- - 1.1.0: catalog CSV, quota, add-all, nom deck nav, import → résultats -->
<!-- - 1.0.1: textarea import liste (lignes / double espace / 1x Name) -->
<!-- - Initial: search + results + commander + list ; modal card -->
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MTG_dnavatar — Deck</title>
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/deck.css">
  <link rel="stylesheet" href="modals/card/card.css">
</head>
<body>
  <nav class="nav">
    <div class="nav-top">
      <strong>MTG_dnavatar</strong>
      <button type="button" id="vault-flag" class="vault-flag"></button>
      <button type="button" id="vault-browse" class="vault-browse" data-action="open-vault" data-tooltip="Voir le coffre (noms)">📇</button>
      <button type="button" id="cache-clear" class="vault-browse" data-action="clear-caches" data-tooltip="Vider les caches (localStorage) et recharger — n'efface pas le coffre">🧹</button>
      <span id="deck-current-name" class="deck-flag"></span>
      <a href="vitrine.html">Hub</a>
      <a href="deck.html" aria-current="page">Deck</a>
      <a href="match.html">Match</a>
      <div id="lang-bar" class="lang-bar"></div>
    </div>
    <div class="nav-legal">
      <span>MTG_dnavatar is unofficial Fan Content permitted under the <a href="https://company.wizards.com/en/legal/fancontentpolicy">Fan Content Policy</a>. Not approved/endorsed by Wizards. Portions of the materials used are property of Wizards of the Coast. ©Wizards of the Coast LLC.</span>
      <span>Données et images via <a href="https://scryfall.com">Scryfall</a> — non affilié à Scryfall, LLC. Code Apache 2.0 + Commons Clause (pas de vente). Noms, textes et illustrations des cartes restent © Wizards of the Coast LLC.</span>
    </div>
  </nav>
  <main id="deck-page" class="deck-page">
    <aside id="deck-search-col">
      <div class="deck-search">
        <textarea id="deck-query" rows="4" placeholder="nom de carte&#10;regex (Mox *)&#10;liste MTG Arena&#10;nom_3 pour la 3e version"></textarea>
        <div id="print-filter" role="group" aria-label="Illustration">
          <svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs>
            <symbol id="pf-lotus" viewBox="0 0 40 40">
              <g fill="currentColor">
                <ellipse cx="20" cy="10.5" rx="4.3" ry="9"/>
                <ellipse cx="20" cy="10.5" rx="4.3" ry="9" transform="rotate(72 20 20)"/>
                <ellipse cx="20" cy="10.5" rx="4.3" ry="9" transform="rotate(144 20 20)"/>
                <ellipse cx="20" cy="10.5" rx="4.3" ry="9" transform="rotate(216 20 20)"/>
                <ellipse cx="20" cy="10.5" rx="4.3" ry="9" transform="rotate(288 20 20)"/>
                <circle cx="20" cy="20" r="3.4"/>
              </g>
            </symbol>
          </defs></svg>

          <button type="button" id="deck-search-go" data-action="search" title="Chercher — coffre puis Scryfall" aria-label="Chercher">🔍</button>
          <span class="pf-sep" aria-hidden="true"></span>

          <div id="pf-age" class="pf-card pf-bands" role="group" aria-label="Âge de l'illustration">
            <button type="button" data-action="print-filter" data-fgroup="age" data-fval="newest" data-on="0" data-tooltip="La plus récente">▲</button>
            <button type="button" data-action="print-filter" data-fgroup="age" data-fval="neutral" data-on="1" data-tooltip="Peu importe l'âge">•</button>
            <button type="button" data-action="print-filter" data-fgroup="age" data-fval="oldest" data-on="0" data-tooltip="La plus ancienne">▼</button>
          </div>

          <button type="button" id="pf-border" class="pf-card" data-action="print-cycle" data-fgroup="border" data-border="" data-tooltip="Couleur du bord — clic pour changer (peu importe → noir → blanc → argent → or)">
            <svg class="pf-card-svg" viewBox="0 0 40 40" aria-hidden="true"><use href="#pf-lotus"/></svg>
          </button>

          <button type="button" id="pf-treat" class="pf-card" data-action="print-cycle" data-fgroup="treat" data-treat="" data-tooltip="Cadrage de l'art — clic pour changer (peu importe → normale → pleine surface → art étendu → sans bord)">
            <span class="pf-artbox"></span>
            <svg class="pf-card-svg" viewBox="0 0 40 40" aria-hidden="true"><use href="#pf-lotus"/></svg>
          </button>
        </div>
        <div class="search-filters">
          <div id="search-colors" class="color-filters"></div>
        </div>
      </div>
      <div id="deck-complete"></div>
      <p id="deck-search-notice" class="notice"></p>
      <div class="deck-results-wrap">
        <h2>Résultats <button type="button" data-action="replace-all" title="Remplacer la version dans le deck, ou ajouter si absente">Remplacer toutes</button> <button type="button" id="deck-next" data-action="next" hidden>Page suivante</button></h2>
        <div id="deck-results" class="card-grid"></div>
      </div>
    </aside>
    <div id="deck-split"></div>
    <div id="deck-main-col">
      <div id="deck-board">
        <div id="deck-meta">
          <div id="deck-genres"></div>
          <input id="deck-find" type="search" placeholder="trouver…" autocomplete="off">
          <div id="deck-colors" class="color-filters"></div>
          <p id="deck-count">0 / 100</p>
        </div>
        <div id="deck-commander" data-action="commander-drop"></div>
        <div id="deck-cards"></div>
      </div>
      <p id="deck-notice" class="notice"></p>
      <p id="deck-quota" class="deck-quota"></p>
    </div>
    <div id="deck-split-cat"></div>
    <aside id="deck-catalog-col">
      <div id="deck-save" class="deck-save">
        <input id="deck-name" type="text" placeholder="Nom" autocomplete="off">
        <button type="button" class="deck-save-new" data-action="new-deck" title="Nouveau deck vierge" aria-label="Nouveau deck vierge">🆕</button>
        <button type="button" class="deck-save-copy" data-action="copy-deck" title="Copier le deck au format MTG Arena" aria-label="Copier le deck (MTG Arena)">📋</button>
        <button type="button" class="deck-save-disk" data-action="save-deck" title="Sauver CSV" aria-label="Sauver CSV">💾</button>
      </div>
      <div id="deck-catalog" class="deck-catalog"></div>
      <div id="deck-trash" class="deck-trash" title="Oublier un deck">🗑</div>
    </aside>
  </main>

  <div id="modal-card" hidden>
    <div class="modal-panel">
      <div class="modal-card-arts">
        <b class="card-caches" aria-hidden="true"><i></i><i></i><i></i><i></i></b>
        <img id="modal-card-img" alt="" referrerpolicy="no-referrer">
        <img id="modal-card-img-back" alt="" referrerpolicy="no-referrer" hidden>
      </div>
      <div>
        <h2 id="modal-card-name"></h2>
        <button type="button" id="modal-card-name-other" hidden></button>
        <p id="modal-card-type"></p>
        <p id="modal-card-legal"></p>
        <p id="modal-card-oracle"></p>
        <button type="button" id="modal-card-forget" data-action="forget-card">Oublier du coffre</button>
        <button type="button" id="modal-card-close">Fermer</button>
      </div>
    </div>
  </div>

  <div id="modal-genre" hidden>
    <div class="modal-panel">
      <h2 id="modal-genre-title"></h2>
      <ul id="modal-genre-list"></ul>
      <button type="button" id="modal-genre-close">Fermer</button>
    </div>
  </div>

  <div id="modal-vault" hidden>
    <div class="modal-panel">
      <h2 id="vault-title">Coffre</h2>
      <div id="vault-kinds"></div>
      <div id="vault-colors" class="color-filters"></div>
      <div class="vault-toolbar">
        <input id="vault-find" type="search" placeholder="trouver…" autocomplete="off">
        <button type="button" data-action="vault-pick-visible">Tout le filtre</button>
        <button type="button" data-action="vault-forget-picked">Oublier la sélection</button>
        <button type="button" data-action="close-vault">Fermer</button>
      </div>
      <div id="vault-grid"></div>
    </div>
  </div>

  <script src="https://dnavatar.org/_interfaces/kill-native-tooltip.js"></script>
  <script>window.killNativeTooltip();</script>
  <script src="https://dnavatar.org/_interfaces/tooltips.js"></script>
  <script src="js/pd.js"></script>
  <script src="js/CONFIG.js"></script>
  <script src="js/STATE.js"></script>
  <script src="js/lang.js"></script>
  <script src="js/storage.js"></script>
  <script src="js/api-local.js"></script>
  <script src="js/vault.js"></script>
  <script src="js/img-queue.js"></script>
  <script src="js/scryfall.js"></script>
  <script src="js/fetch-queue.js"></script>
  <script src="js/deck-label.js"></script>
  <script src="js/deck-genre.js"></script>
  <script src="js/deck-render.js"></script>
  <script src="js/deck-events.js"></script>
  <script src="js/deck-reveal.js"></script>
  <script src="modals/card/card.js"></script>
  <script src="js/deck-boot.js"></script>
  <footer class="site-footer" data-tipeee-footer-inject>
    <script src="js/signature-boot.js"></script>
  </footer>
</body>
</html>