<!doctype html>
<html lang="fr" data-theme="light">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>DATAFIX</title>
    <script>
      (function () {
        try {
          var t = localStorage.getItem("datafixTheme_v1");
          if (t === "light" || t === "dark") {
            document.documentElement.setAttribute("data-theme", t);
          } else if (t === "system") {
            var isDark = !!(
              window.matchMedia &&
              window.matchMedia("(prefers-color-scheme: dark)").matches
            );
            document.documentElement.setAttribute(
              "data-theme",
              isDark ? "dark" : "light",
            );
          } else {
            document.documentElement.setAttribute("data-theme", "light");
          }
        } catch (e) {}
      })();
      (function () {
        try {
          var raw = localStorage.getItem("datafixUiFontScale_v1");
          if (raw == null) return;
          var n = parseFloat(raw);
          if (isFinite(n) && n >= 0.75 && n <= 1.35) {
            document.documentElement.style.setProperty(
              "--ui-font-scale",
              String(n),
            );
          }
        } catch (e) {}
      })();
    </script>
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='app.css') }}?v=90"
    />
  </head>
  <body>
    <header class="topbar">
      <div class="topbar__left">
        <div class="topbar__menu menu-dropdown" id="menuFile">
          <button
            type="button"
            class="btn btn--small btn--icon topbar__menu-toggle"
            id="menuFileToggle"
            aria-haspopup="menu"
            aria-expanded="false"
            aria-label="Menu principal"
            title="Menu principal"
          >
            ☰
          </button>
          <div
            class="menu-dropdown__panel"
            id="menuFilePanel"
            role="menu"
            aria-label="Menu principal"
          >
            <button
              type="button"
              id="menuFileOpenNew"
              class="menu-item"
              role="menuitem"
            >
              <span>Open New Folder</span>
              <span id="menuShortcutOpenFolder" class="menu-item__shortcut"
                >Ctrl+O</span
              >
            </button>
            <button
              type="button"
              id="menuFileCloseFolder"
              class="menu-item"
              role="menuitem"
            >
              <span>Close Folder</span>
              <span id="menuShortcutCloseFolder" class="menu-item__shortcut"
                >Ctrl+Q</span
              >
            </button>
            <button
              type="button"
              id="menuImporterOpen"
              class="menu-item"
              role="menuitem"
            >
              <span>Importer</span>
              <span id="menuShortcutImporter" class="menu-item__shortcut"
                >Ctrl+I</span
              >
            </button>
            <button
              type="button"
              id="menuSettingsOpen"
              class="menu-item"
              role="menuitem"
            >
              <span>Paramètres</span>
              <span id="menuShortcutSettings" class="menu-item__shortcut"
                >Ctrl+P</span
              >
            </button>
          </div>
        </div>
        <div
          class="topbar__history"
          role="toolbar"
          aria-label="Historique des modifications"
        >
          <button
            type="button"
            class="btn btn--small"
            id="btnUndo"
            title="Annuler (Ctrl+Z)"
            aria-label="Annuler"
            disabled
          >
            ↩
          </button>
          <button
            type="button"
            class="btn btn--small"
            id="btnRedo"
            title="Rétablir (Ctrl+Y / Ctrl+Shift+Z)"
            aria-label="Rétablir"
            disabled
          >
            ↪
          </button>
        </div>
        <label class="topbar__batch">
          Lot
          <select id="batchSelect" size="1"></select>
        </label>
        <div
          id="imagesPanelToggleHostToolbar"
          class="images-panel-toggle-host"
          hidden
        ></div>
        <span id="imageTitle" class="muted pane__toolbar-title" hidden></span>
      </div>
      <div class="topbar__middle">
        <div class="topbar__middle-actions">
          <div
            class="topbar-action-group"
            role="group"
            aria-label="Affichage image et surlignage"
          >
            <div class="bdm-view-toolbar" id="bdmViewToolbar" hidden>
              <label class="bdm-auto-zoom topbar-icon-toggle" aria-label="Auto zoom">
                <input type="checkbox" id="bdmAutoZoomToggle" />
                <span class="topbar-icon-toggle__glyph" aria-hidden="true"
                  >&#x2922;</span
                >
              </label>
              <label
                class="topbar-toggle-check topbar-icon-toggle"
                title="Afficher/masquer les rectangles des actes détectés"
                aria-label="Afficher/masquer les rectangles des actes détectés"
              >
                <input type="checkbox" id="bdmActsToggle" />
                <span class="topbar-icon-toggle__glyph" aria-hidden="true"
                  >&#x25A6;</span
                >
              </label>
            </div>
            <label
              class="topbar-toggle-check topbar-icon-toggle"
              title="Afficher ou masquer l'extrait flottant du champ actif."
              aria-label="Afficher ou masquer l'extrait flottant du champ actif"
            >
              <input type="checkbox" id="btnSnippetToggle" />
              <span class="topbar-icon-toggle__glyph" aria-hidden="true"
                >&#x25A4;</span
              >
            </label>
            <label
              class="topbar-toggle-check topbar-icon-toggle rect-auto-zoom"
              title="Auto-zoom et centrage sur le rectangle au focus d'un champ orig. (Ctrl+Alt +/- pour zoomer, Ctrl+Alt ←/→ pour défiler)."
              aria-label="Auto-zoom sur le rectangle de surlignage"
            >
              <input type="checkbox" id="btnRectAutoZoom" checked />
              <span class="topbar-icon-toggle__glyph" aria-hidden="true"
                >&#x2922;</span
              >
            </label>
            <label
              class="topbar-toggle-check topbar-icon-toggle"
              title="Quand activé, le rectangle reste 1 seconde puis disparaît progressivement."
              aria-label="Rectangle visible 1 seconde puis fondu"
            >
              <input type="checkbox" id="btnRectFlash" />
              <span class="topbar-icon-toggle__glyph" aria-hidden="true"
                >&#x25AD;</span
              >
            </label>
            <button
              type="button"
              class="btn btn--small btn--toggle btn--icon topbar-action-group__btn"
              id="btnToggleNextImage"
              aria-pressed="false"
              aria-label="Voir l'image suivante"
              title="Voir l'image suivante"
            >
              &#x25B6;
            </button>
          </div>
          <div
            class="topbar-action-group"
            role="group"
            aria-label="Colonnes des tableaux"
          >
            <label
              class="topbar-toggle-check topbar-icon-toggle"
              title="Fusionner hwr dans la colonne orig. et afficher le % hwr s'il existe"
              aria-label="Fusionner hwr dans la colonne orig. et afficher le % hwr s'il existe"
            >
              <input type="checkbox" id="topbarOptMergeHwrOrigColumn" />
              <span class="topbar-icon-toggle__glyph" aria-hidden="true"
                >&#x29C9;</span
              >
            </label>
            <label
              class="topbar-toggle-check topbar-icon-toggle"
              title="Afficher « hwr: ... » dans la colonne orig. fusionnée"
              aria-label="Afficher « hwr: ... » dans la colonne orig. fusionnée"
            >
              <input type="checkbox" id="topbarOptShowMergedHwrText" />
              <span class="topbar-icon-toggle__glyph" aria-hidden="true"
                >&#x270E;</span
              >
            </label>
          </div>
          <div
            class="topbar-action-group"
            role="group"
            aria-label="Correction par dictionnaire"
          >
            <button
              type="button"
              id="btnApplyDictionaryCorrections"
              class="btn btn--small topbar-action-group__btn btn--autocorrect"
              title="Corriger automatiquement la casse et les accents des champs hwr peu fiables via le dictionnaire général"
              aria-label="Auto-Correct"
              disabled
            >
              Auto-Correct
            </button>
            <button
              type="button"
              id="btnAiPageStructure"
              class="btn btn--small topbar-action-group__btn btn--ai-page-structure"
              title="Détecter le DocType, créer la structure et keyer les champs avec l'AI"
              aria-label="AI Structure"
              disabled
              hidden
            >
              AI Structure
            </button>
            <button
              type="button"
              id="btnAiPageFill"
              class="btn btn--small topbar-action-group__btn btn--ai-page-fill"
              title="Lire toute la page avec l'AI et remplir les champs visibles"
              aria-label="AI Page Fill"
              disabled
            >
              AI Page Fill
            </button>
          </div>
        </div>
      </div>
      <div class="topbar__right">
        <label class="topbar__doctype">
          <span>DocType:</span>
          <select id="docTypeSelect" aria-label="DocType"></select>
        </label>
      </div>
    </header>

    <div
      id="pageStructureSuggestionBackdrop"
      class="page-structure-suggestion__backdrop"
      hidden
    ></div>
    <section
      id="pageStructureSuggestionPanel"
      class="page-structure-suggestion"
      role="dialog"
      aria-modal="true"
      aria-labelledby="pageStructureSuggestionTitle"
      hidden
    >
      <div class="page-structure-suggestion__head">
        <h2 id="pageStructureSuggestionTitle">Integral Keying par AI</h2>
        <button
          type="button"
          id="btnPageStructureSuggestionClose"
          class="btn btn--small"
          aria-label="Fermer"
        >&times;</button>
      </div>
      <div class="page-structure-suggestion__body">
        <p id="pageStructureSuggestionStatus" class="page-structure-suggestion__status"></p>
        <p id="pageStructureSuggestionSummary" class="page-structure-suggestion__summary"></p>
        <div class="page-structure-suggestion__progress-wrap">
          <progress id="pageStructureProgress" max="1" value="0" hidden></progress>
          <span id="pageStructureProgressLabel" hidden></span>
        </div>
        <ol id="pageStructureResults" class="page-structure-suggestion__results"></ol>
      </div>
      <div class="page-structure-suggestion__actions">
        <button
          type="button"
          id="btnPageStructureSuggestionApply"
          class="btn btn--small btn--primary"
          disabled
        >Lancer sur le lot</button>
        <button
          type="button"
          id="btnPageStructureSuggestionCancel"
          class="btn btn--small"
        >Plus tard</button>
      </div>
    </section>

    <section
      id="settingsPanel"
      class="settings-panel"
      aria-label="Paramètres"
      hidden
    >
      <div class="settings-panel__head">
        <h2>Paramètres</h2>
        <button
          type="button"
          id="btnSettingsClose"
          class="btn btn--small"
          aria-label="Fermer"
          data-settings-close="1"
        >
          Fermer
        </button>
      </div>
      <div class="settings-panel__content">
        <aside
          class="settings-tabs settings-tabs--side"
          role="tablist"
          aria-label="Onglets Paramètres"
        >
          <button
            type="button"
            class="settings-tab is-active"
            data-settings-tab="projectKinds"
            role="tab"
            aria-selected="true"
          >
            Types de projet
          </button>
          <button
            type="button"
            class="settings-tab"
            data-settings-tab="fields"
            role="tab"
            aria-selected="false"
          >
            Champs
          </button>
          <button
            type="button"
            class="settings-tab"
            data-settings-tab="appearance"
            role="tab"
            aria-selected="false"
          >
            Apparence
          </button>
          <button
            type="button"
            class="settings-tab"
            data-settings-tab="ai"
            role="tab"
            aria-selected="false"
          >
            Activation de la passerelle
          </button>
          <button
            type="button"
            class="settings-tab"
            data-settings-tab="shortcuts"
            role="tab"
            aria-selected="false"
          >
            Raccourcis
          </button>
        </aside>
        <div class="settings-body">
          <section class="settings-page is-active" data-settings-page="projectKinds">
            <div
              id="projectKindsLockBanner"
              class="project-kinds-lock-banner"
              hidden
            >
              <p id="projectKindsLockBannerText" class="project-kinds-lock-banner__text"></p>
              <div class="project-kinds-lock-banner__actions">
                <button
                  type="button"
                  id="btnProjectKindsSetPassword"
                  class="btn btn--small"
                >
                  Protéger cette section
                </button>
              </div>
            </div>
            <div class="project-kinds-options">
              <label class="fields-option" for="optShowLotAssignmentPrompt">
                <input type="checkbox" id="optShowLotAssignmentPrompt" />
                <span
                  >Afficher la suggestion d'affectation de sous-projet à
                  l'ouverture d'un lot</span
                >
              </label>
            </div>
            <div class="kinds-summary">
              <h3>Lots détectés</h3>
              <span id="detectedLotsCount" class="kinds-summary__count">0</span>
            </div>
            <div class="kinds-table-wrap">
              <table class="kinds-table">
                <thead>
                  <tr>
                    <th>Lot</th>
                    <th>Type</th>
                    <th>Sous-Projet</th>
                    <th>DocTypes</th>
                  </tr>
                </thead>
                <tbody id="projectKindsTableBody"></tbody>
              </table>
            </div>
            <div class="sub-projects-section">
              <div class="sub-projects-head">
                <h3>Sous-types de projet</h3>
                <button
                  type="button"
                  id="btnSubProjectAdd"
                  class="btn btn--small btn--primary"
                >
                  Ajouter
                </button>
              </div>
              <div class="kinds-table-wrap kinds-table-wrap--sub-projects">
                <table class="kinds-table">
                  <thead>
                    <tr>
                      <th>Nom</th>
                      <th>Langue</th>
                      <th>Type racine</th>
                      <th>DocTypes</th>
                    </tr>
                  </thead>
                  <tbody id="subProjectsTableBody"></tbody>
                </table>
              </div>
            </div>
          </section>
          <section class="settings-page" data-settings-page="fields">
            <div class="fields-toolbar">
              <div
                class="fields-kind-tabs"
                role="tablist"
                aria-label="Onglets de type de projet des champs"
                id="fieldsKindTabsContainer"
              >
                <!-- Tabs generated dynamically from sub-projects -->
              </div>
              <div class="wrap-for-toolbar-search-and-actions">
                <div class="fields-toolbar__search">
                  <input
                    type="search"
                    id="fieldsSearchInput"
                    placeholder="Rechercher des champs..."
                    aria-label="Rechercher des champs"
                  />
                </div>
                <div class="fields-toolbar__actions">
                  <button
                    type="button"
                    id="btnSelectAllFields"
                    class="btn btn--small"
                  >
                    Sélectionner tout
                  </button>
                  <button
                    type="button"
                    id="btnSetFieldDefaults"
                    class="btn btn--small"
                  >
                    Définir comme défaut
                  </button>
                  <button
                    type="button"
                    id="btnResetFieldDefaults"
                    class="btn btn--small"
                  >
                    Réinitialiser par défaut
                  </button>
                  <button
                    type="button"
                    id="btnSaveFieldSelections"
                    class="btn btn--small btn--primary"
                    disabled
                  >
                    Enregistrer
                  </button>
                  <span
                    id="fieldsSaveFeedback"
                    class="fields-save-feedback"
                    aria-live="polite"
                  ></span>
                </div>
              </div>
            </div>
            <div class="fields-options">
              <label
                class="fields-option"
                for="optAutoIncrementIndividualNumber"
              >
                <input type="checkbox" id="optAutoIncrementIndividualNumber" />
                <span
                  >Incrémenter automatiquement « Individual Number » sur un
                  nouveau record</span
                >
              </label>
              <label class="fields-option" for="optAutoSkipValidatedRows">
                <input type="checkbox" id="optAutoSkipValidatedRows" />
                <span
                  >Sauter automatiquement les lignes validées pendant la
                  navigation orig.</span
                >
              </label>
              <label class="fields-option" for="optAutoSkipAtFields">
                <input type="checkbox" id="optAutoSkipAtFields" />
                <span
                  >Sauter automatiquement les champs « @ » (Nationalité, Birth
                  Place, Surname, Relationship) pendant la navigation
                  orig.</span
                >
              </label>
              <label class="fields-option" for="optMergeHwrOrigColumn">
                <input type="checkbox" id="optMergeHwrOrigColumn" />
                <span
                  >Fusionner hwr dans la colonne orig. et afficher le % hwr
                  s’il existe</span
                >
              </label>
              <label class="fields-option" for="optShowMergedHwrText">
                <input type="checkbox" id="optShowMergedHwrText" />
                <span
                  >Afficher « hwr: ... » dans la colonne orig. fusionnée</span
                >
              </label>
              <label
                class="fields-option fields-option--inline"
                for="optSuggestRankingMode"
              >
                <select id="optSuggestRankingMode" class="input">
                  <option value="hybrid">
                    Hybride (fréquence puis récence)
                  </option>
                  <option value="frequency_only">Fréquence seulement</option>
                  <option value="recency_only">Récence seulement</option>
                </select>
                <span>Tri des suggestions</span>
              </label>
            </div>
            <div id="fieldsByKindContainer" class="fields-by-kind"></div>
          </section>
          <section class="settings-page" data-settings-page="ai">
            <div class="ai-settings-page">
              <div class="ai-activation-card">
                <h3 id="gatewayActivationTitle">Activation Datafix</h3>
                <p
                  id="gatewayActivationSettingsStatus"
                  class="ai-activation-card__status"
                  data-kind="neutral"
                  aria-live="polite"
                >
                  Vérification de l'activation…
                </p>
                <p class="muted">
                  L'activation autorise uniquement l'accès révocable à la passerelle AI.
                </p>
                <p id="gatewayActivationDescription" class="muted">
                  Saisissez le code à usage unique fourni par Infoscribe. Vous pourrez continuer à travailler manuellement sans activation, mais les fonctions AI resteront indisponibles.
                </p>
                <form id="gatewayActivationForm" class="ai-activation-card__form">
                  <label class="gateway-activation__field" for="gatewayActivationCode">
                    Code d'activation
                  </label>
                  <input
                    type="text"
                    id="gatewayActivationCode"
                    class="input gateway-activation__input"
                    placeholder="DFX-…"
                    autocomplete="off"
                    spellcheck="false"
                    maxlength="200"
                  />
                  <p
                    id="gatewayActivationStatus"
                    class="gateway-activation__status"
                    data-kind="neutral"
                    role="status"
                    aria-live="polite"
                  ></p>
                  <div class="ai-activation-card__actions">
                    <button
                      type="submit"
                      id="btnGatewayActivationSubmit"
                      class="btn btn--small btn--primary"
                    >
                      Activer ce PC
                    </button>
                  </div>
                </form>
              </div>
            </div>
          </section>
          <section class="settings-page" data-settings-page="shortcuts">
            <div class="shortcuts-settings">
              <div class="shortcuts-settings__controls">
                <label class="fields-option" for="optShowShortcutsOnStartup">
                  <input type="checkbox" id="optShowShortcutsOnStartup" />
                  <span>Afficher le panneau des raccourcis au démarrage</span>
                </label>
                <button
                  type="button"
                  id="btnResetKeyboardShortcuts"
                  class="btn btn--small"
                >
                  Réinitialiser les raccourcis
                </button>
              </div>
              <div
                id="shortcutsSettingsList"
                class="shortcuts-list"
                aria-live="polite"
              ></div>
            </div>
          </section>
          <section class="settings-page" data-settings-page="appearance">
            <div class="appearance-settings">
              <div class="appearance-panel">
                <div class="appearance-panel__head">
                  <h3>Thème</h3>
                  <p class="muted">Choisissez le mode d’affichage.</p>
                </div>
                <div class="appearance-theme-picker">
                  <button
                    type="button"
                    id="btnThemeLight"
                    class="btn btn--small"
                    aria-label="Activer le mode clair"
                  >
                    Clair
                  </button>
                  <button
                    type="button"
                    id="btnThemeDark"
                    class="btn btn--small"
                    aria-label="Activer le mode sombre"
                  >
                    Sombre
                  </button>
                  <button
                    type="button"
                    id="btnThemeSystem"
                    class="btn btn--small"
                    aria-label="Utiliser le thème du système"
                  >
                    Système
                  </button>
                </div>
              </div>
              <div class="appearance-panel">
                <div class="appearance-panel__head">
                  <h3>Taille du texte</h3>
                  <p class="muted">
                    Ajuste la taille du texte de toute l’interface (mémorisée
                    sur cet appareil).
                  </p>
                </div>
                <div
                  class="appearance-font-presets"
                  role="group"
                  aria-label="Préréglages de taille du texte"
                >
                  <button
                    type="button"
                    class="btn btn--small appearance-font-presets__btn"
                    data-font-preset="90"
                  >
                    90%
                  </button>
                  <button
                    type="button"
                    class="btn btn--small appearance-font-presets__btn"
                    data-font-preset="100"
                  >
                    100%
                  </button>
                  <button
                    type="button"
                    class="btn btn--small appearance-font-presets__btn"
                    data-font-preset="110"
                  >
                    110%
                  </button>
                  <button
                    type="button"
                    class="btn btn--small appearance-font-presets__btn"
                    data-font-preset="120"
                  >
                    120%
                  </button>
                </div>
                <div class="appearance-settings__control appearance-panel__control">
                  <span class="appearance-settings__bound" aria-hidden="true"
                    >75%</span
                  >
                  <input
                    type="range"
                    id="uiFontSizeRange"
                    class="appearance-settings__range"
                    min="75"
                    max="135"
                    value="100"
                    step="5"
                    aria-valuemin="75"
                    aria-valuemax="135"
                    aria-label="Taille du texte de l’interface"
                  />
                  <span class="appearance-settings__bound" aria-hidden="true"
                    >135%</span
                  >
                </div>
                <p
                  class="appearance-settings__subhint muted appearance-panel__subhint"
                  id="appearanceFontPreviewHint"
                  hidden
                >
                  Relâchez le curseur pour appliquer cette taille partout.
                </p>
              </div>
            </div>
          </section>
        </div>
      </div>
    </section>

    <div
      id="shortcutsFloatingBackdrop"
      class="shortcuts-panel__backdrop"
      hidden
    ></div>
    <section
      id="shortcutsFloatingPanel"
      class="shortcuts-panel"
      aria-live="polite"
      hidden
    >
      <div class="shortcuts-panel__head">
        <h2>Raccourcis clavier</h2>
        <button
          type="button"
          id="btnShortcutsPanelClose"
          class="btn btn--small"
          aria-label="Fermer le panneau des raccourcis"
        >
          Fermer
        </button>
      </div>
      <div id="shortcutsFloatingList" class="shortcuts-list"></div>
    </section>
    <div
      id="shortcutRebindPopover"
      class="shortcut-rebind-popover"
      role="dialog"
      aria-modal="true"
      aria-labelledby="shortcutRebindTitle"
      hidden
    >
      <h3 id="shortcutRebindTitle" class="shortcut-rebind-popover__title"></h3>
      <p id="shortcutRebindHint" class="shortcut-rebind-popover__hint"></p>
      <div
        id="shortcutRebindLiveKeys"
        class="shortcut-rebind-popover__live"
        aria-live="assertive"
        aria-atomic="true"
      ></div>
      <p
        id="shortcutRebindFeedback"
        class="shortcut-rebind-popover__feedback shortcut-rebind-popover__feedback--error"
        hidden
      ></p>
      <div class="shortcut-rebind-popover__actions">
        <button type="button" id="shortcutRebindCancel" class="btn btn--small">
          Annuler
        </button>
      </div>
    </div>
    <div
      id="importerPanelBackdrop"
      class="shortcuts-panel__backdrop"
      hidden
    ></div>
    <section
      id="importerPanel"
      class="shortcuts-panel importer-panel"
      role="dialog"
      aria-modal="true"
      aria-labelledby="importerPanelTitle"
      hidden
    >
      <div class="shortcuts-panel__head">
        <h2 id="importerPanelTitle">Importer un Dictionnaire</h2>
        <button
          type="button"
          id="btnImporterClose"
          class="btn btn--small"
          aria-label="Fermer le panneau Importer"
        >
          Fermer
        </button>
      </div>
      <div class="importer-panel__body">
        <p class="muted importer-panel__intro">
          Importez des fichiers <code>.db3</code> Datafix ou des dictionnaires
          client JSON (<code>.txt</code>, <code>.json</code>). Les fichiers sont
          d'abord analys&eacute;s&nbsp;; le r&eacute;sum&eacute; s'affiche avant
          toute &eacute;criture dans le dictionnaire g&eacute;n&eacute;ral.
        </p>
        <input
          id="importerFileInput"
          type="file"
          accept=".db3,.txt,.json,application/octet-stream,text/plain,application/json"
          multiple
          hidden
        />
        <button
          type="button"
          id="importerDropzone"
          class="importer-dropzone"
          aria-label="Déposer ou choisir des fichiers dictionnaire"
        >
          <span class="importer-dropzone__title"
            >Déposez des fichiers DICTIONARY (.db3) ou client (.txt / .json)</span
          >
          <span class="importer-dropzone__hint"
            >ou cliquez ici pour les sélectionner</span
          >
        </button>
        <div id="importerPreview" class="importer-preview" hidden></div>
        <div class="importer-panel__actions">
          <button
            type="button"
            id="btnImporterRun"
            class="btn btn--small btn--primary"
            disabled
          >
            Importer
          </button>
        </div>
        <div
          id="importerFeedback"
          class="importer-feedback"
          aria-live="polite"
        ></div>
      </div>
    </section>

    <div
      id="recordInsertBackdrop"
      class="record-insert-overlay__backdrop"
      hidden
    ></div>
    <section
      id="recordInsertOverlay"
      class="record-insert-overlay"
      role="status"
      aria-live="polite"
      hidden
    >
      <h2>Ajout du record en cours...</h2>
      <p>Déplacement des records existants pour conserver l'ordre final.</p>
    </section>
    <div
      id="headerAddBackdrop"
      class="header-add-overlay__backdrop"
      hidden
    ></div>
    <section
      id="headerAddOverlay"
      class="header-add-overlay"
      role="status"
      aria-live="polite"
      hidden
    >
      <div class="header-add-overlay__spinner" aria-hidden="true"></div>
      <div class="header-add-overlay__text">
        Ajustement de l'ordre des Headers...
      </div>
    </section>
    <div
      id="headerDeleteBackdrop"
      class="header-delete-overlay__backdrop"
      hidden
    ></div>
    <section
      id="headerDeleteOverlay"
      class="header-delete-overlay"
      role="status"
      aria-live="polite"
      hidden
    >
      <div class="header-delete-overlay__spinner" aria-hidden="true"></div>
      <div class="header-delete-overlay__text">Suppression du header...</div>
    </section>
    <div
      id="recordDeleteBackdrop"
      class="record-delete-overlay__backdrop"
      hidden
    ></div>
    <section
      id="recordDeleteOverlay"
      class="record-delete-overlay"
      role="status"
      aria-live="polite"
      hidden
    >
      <div class="record-delete-overlay__spinner" aria-hidden="true"></div>
      <div class="record-delete-overlay__text">Suppression du record...</div>
    </section>
    <div
      id="docTypeChangeBackdrop"
      class="doc-type-change-overlay__backdrop"
      hidden
    ></div>
    <section
      id="docTypeChangeOverlay"
      class="doc-type-change-overlay"
      role="status"
      aria-live="polite"
      hidden
    >
      <div class="doc-type-change-overlay__spinner" aria-hidden="true"></div>
      <div class="doc-type-change-overlay__text">
        Changement du DocType en cours. Veuillez patienter...
      </div>
    </section>
    <div
      id="reorderOverlayBackdrop"
      class="reorder-overlay__backdrop"
      hidden
    ></div>
    <section
      id="reorderOverlay"
      class="reorder-overlay"
      role="status"
      aria-live="polite"
      hidden
    >
      <div class="reorder-overlay__spinner" aria-hidden="true"></div>
      <div class="reorder-overlay__text">
        Réorganisation en cours. Veuillez patienter...
      </div>
    </section>
    <div
      id="dictAutocorrectResultsBackdrop"
      class="dict-autocorrect-results__backdrop"
      hidden
    ></div>
    <section
      id="dictAutocorrectResultsPanel"
      class="dict-autocorrect-results"
      role="dialog"
      aria-modal="true"
      aria-labelledby="dictAutocorrectResultsTitle"
      hidden
    >
      <h2 id="dictAutocorrectResultsTitle">Résultats de la correction</h2>
      <p id="dictAutocorrectResultsSummary" class="dict-autocorrect-results__summary"></p>
      <div
        id="dictAutocorrectResultsList"
        class="dict-autocorrect-results__list"
        role="region"
        aria-label="Détail par champ"
      ></div>
      <div class="dict-autocorrect-results__buttons">
        <button
          type="button"
          id="btnDictAutocorrectResultsOk"
          class="btn btn--small btn--primary"
        >
          OK
        </button>
      </div>
    </section>
    <div
      id="dictAutocorrectBackdrop"
      class="dict-autocorrect-overlay__backdrop"
      hidden
    ></div>
    <section
      id="dictAutocorrectOverlay"
      class="dict-autocorrect-overlay"
      role="status"
      aria-live="polite"
      aria-busy="true"
      hidden
    >
      <div class="dict-autocorrect-overlay__header">
        <div class="dict-autocorrect-overlay__spinner" aria-hidden="true"></div>
        <div id="dictAutocorrectOverlayText" class="dict-autocorrect-overlay__text">
          Correction par dictionnaire en cours. Veuillez patienter...
        </div>
      </div>
      <ol
        id="dictAutocorrectOverlaySteps"
        class="dict-autocorrect-overlay__steps"
        hidden
      ></ol>
      <div
        id="dictAutocorrectOverlayTotal"
        class="dict-autocorrect-overlay__total"
        hidden
      ></div>
    </section>
    <div
      id="autocorrectChoiceBackdrop"
      class="confirm-action__backdrop"
      hidden
    ></div>
    <section
      id="autocorrectChoicePanel"
      class="confirm-action autocorrect-choice"
      role="dialog"
      aria-modal="true"
      aria-labelledby="autocorrectChoiceTitle"
      hidden
    >
      <h2 id="autocorrectChoiceTitle">Choisir le système de correction</h2>
      <p>Quelle correction voulez-vous utiliser maintenant ?</p>
      <p id="autocorrectChoiceHint" class="autocorrect-choice__hint"></p>
      <div class="confirm-action__buttons autocorrect-choice__buttons">
        <button
          type="button"
          id="btnAutocorrectChoiceCancel"
          class="btn btn--small"
        >
          Annuler
        </button>
        <button
          type="button"
          id="btnAutocorrectChoiceDictionary"
          class="btn btn--small btn--primary"
        >
          Dictionnaire
        </button>
        <button
          type="button"
          id="btnAutocorrectChoiceAi"
          class="btn btn--small btn--primary"
        >
          AI
        </button>
      </div>
    </section>
    <div
      id="projectKindsPasswordBackdrop"
      class="confirm-action__backdrop"
      hidden
    ></div>
    <section
      id="projectKindsPasswordPanel"
      class="confirm-action project-kinds-password"
      role="dialog"
      aria-modal="true"
      aria-labelledby="projectKindsPasswordTitle"
      hidden
    >
      <h2 id="projectKindsPasswordTitle">Déverrouiller Types de projet</h2>
      <p id="projectKindsPasswordMessage"></p>
      <label
        class="type-to-confirm__field"
        id="projectKindsCurrentPasswordWrap"
        for="projectKindsCurrentPasswordInput"
        hidden
      >
        <span>Mot de passe actuel</span>
        <input
          type="password"
          id="projectKindsCurrentPasswordInput"
          class="input"
          autocomplete="current-password"
          spellcheck="false"
        />
      </label>
      <label class="type-to-confirm__field" for="projectKindsPasswordInput">
        <span id="projectKindsPasswordInputLabel">Mot de passe</span>
        <input
          type="password"
          id="projectKindsPasswordInput"
          class="input"
          autocomplete="new-password"
          spellcheck="false"
        />
      </label>
      <p id="projectKindsPasswordError" class="project-kinds-password__error" hidden></p>
      <div class="confirm-action__buttons">
        <button
          type="button"
          id="btnProjectKindsPasswordCancel"
          class="btn btn--small"
        >
          Annuler
        </button>
        <button
          type="button"
          id="btnProjectKindsPasswordOk"
          class="btn btn--small btn--primary"
        >
          Déverrouiller
        </button>
      </div>
    </section>
    <div
      id="confirmActionBackdrop"
      class="confirm-action__backdrop"
      hidden
    ></div>
    <section
      id="confirmActionPanel"
      class="confirm-action"
      role="dialog"
      aria-modal="true"
      aria-labelledby="confirmActionTitle"
      hidden
    >
      <div class="confirm-action__head">
        <h2 id="confirmActionTitle">Confirmation</h2>
        <button
          type="button"
          id="btnConfirmActionClose"
          class="btn btn--small confirm-action__close"
          aria-label="Fermer"
        >
          &times;
        </button>
      </div>
      <p id="confirmActionWarning" class="confirm-action__warning" hidden></p>
      <p id="confirmActionMessage"></p>
      <div class="confirm-action__buttons confirm-action__buttons--split">
        <button
          type="button"
          id="btnConfirmActionCancel"
          class="btn btn--small"
        >
          Annuler
        </button>
        <button
          type="button"
          id="btnConfirmActionOk"
          class="btn btn--small btn--primary"
        >
          Confirmer
        </button>
      </div>
    </section>
    <div
      id="typeToConfirmBackdrop"
      class="confirm-action__backdrop type-to-confirm-backdrop"
      hidden
    ></div>
    <section
      id="typeToConfirmPanel"
      class="confirm-action type-to-confirm"
      role="dialog"
      aria-modal="true"
      aria-labelledby="typeToConfirmTitle"
      hidden
    >
      <h2 id="typeToConfirmTitle">Confirmation</h2>
      <p id="typeToConfirmMessage"></p>
      <label class="type-to-confirm__field" for="typeToConfirmInput">
        <span id="typeToConfirmInputLabel">Confirmation</span>
        <input
          type="text"
          id="typeToConfirmInput"
          class="input"
          autocomplete="off"
          spellcheck="false"
        />
      </label>
      <div class="confirm-action__buttons">
        <button
          type="button"
          id="btnTypeToConfirmCancel"
          class="btn btn--small"
        >
          Annuler
        </button>
        <button
          type="button"
          id="btnTypeToConfirmOk"
          class="btn btn--small btn--danger"
          disabled
        >
          Supprimer
        </button>
      </div>
    </section>
    <div
      id="lotAssignmentBackdrop"
      class="confirm-action__backdrop"
      hidden
    ></div>
    <section
      id="lotAssignmentPanel"
      class="confirm-action lot-assignment-panel"
      role="dialog"
      aria-modal="true"
      aria-labelledby="lotAssignmentTitle"
      hidden
    >
      <h2 id="lotAssignmentTitle">Affectation du lot</h2>
      <p id="lotAssignmentMessage"></p>
      <p id="lotAssignmentHint" class="lot-assignment-panel__hint"></p>
      <p class="lot-assignment-panel__settings-note">
        Vous pouvez changer l'assignation depuis Paramètres &gt; Types de projet &gt; colonne Sous-Projet.
      </p>
      <label class="lot-assignment-panel__field" for="lotAssignmentSelect">
        Sous-projet
      </label>
      <select id="lotAssignmentSelect" class="lot-assignment-panel__select"></select>
      <label class="fields-option lot-assignment-panel__never-show" for="lotAssignmentNeverShow">
        <input type="checkbox" id="lotAssignmentNeverShow" />
        <span>Ne plus afficher ce message</span>
      </label>
      <div class="confirm-action__buttons">
        <button
          type="button"
          id="btnLotAssignmentAccept"
          class="btn btn--small btn--primary"
        >
          Accepter
        </button>
      </div>
    </section>
    <div
      id="subProjectAssignBackdrop"
      class="confirm-action__backdrop"
      hidden
    ></div>
    <section
      id="subProjectAssignPanel"
      class="confirm-action sub-project-assign-panel"
      role="dialog"
      aria-modal="true"
      aria-labelledby="subProjectAssignTitle"
      hidden
    >
      <h2 id="subProjectAssignTitle">Changer le sous-projet</h2>
      <p id="subProjectAssignMessage" class="lot-assignment-panel__hint"></p>
      <label class="lot-assignment-panel__field" for="subProjectAssignSelect">
        Sous-projet
      </label>
      <select id="subProjectAssignSelect" class="lot-assignment-panel__select"></select>
      <div class="confirm-action__buttons">
        <button
          type="button"
          id="btnSubProjectAssignCancel"
          class="btn btn--small"
        >
          Annuler
        </button>
        <button
          type="button"
          id="btnSubProjectAssignApplyThisLot"
          class="btn btn--small btn--primary"
        >
          Appliquer à ce lot
        </button>
        <button
          type="button"
          id="btnSubProjectAssignApplyAllLots"
          class="btn btn--small btn--primary"
        >
          Appliquer à tous les lots détectés
        </button>
      </div>
    </section>

    <div
      id="uiToastMessage"
      class="ui-toast"
      role="status"
      aria-live="polite"
      hidden
    ></div>

    <main class="layout" id="mainLayout">
      <aside class="sidebar">
        <div class="sidebar__head">
          <span class="sidebar__head-title">Images</span>
          <button
            type="button"
            id="btnImagesPanelToggle"
            class="btn btn--small btn--icon"
            aria-label="Afficher ou masquer la liste des images"
            aria-controls="imageList"
            aria-expanded="true"
            title="Afficher ou masquer la liste des images"
          >
            &#x25C0;
          </button>
        </div>
        <ul class="img-list" id="imageList"></ul>
      </aside>

      <div
        class="resizer resizer--sidebar"
        id="sidebarResizer"
        role="separator"
        aria-orientation="vertical"
        aria-label="Redimensionner la liste des images"
        tabindex="0"
      ></div>

      <section class="pane pane--image">
        <div class="img-wrap" id="imgWrap">
          <div class="img-pan" id="imgPan" hidden>
            <div id="imgCanvas" class="img-canvas">
              <img id="pageImg" alt="Document" draggable="false" />
              <div id="actRectsLayer" class="act-rects-layer" hidden></div>
              <div id="highlightRect" class="highlight-rect"></div>
              <input
                type="text"
                id="floatingInput"
                class="floating-input"
                autocomplete="off"
                spellcheck="false"
                hidden
              />
            </div>
          </div>
          <p id="noImg" class="muted">Sélectionnez un lot puis une image.</p>
        </div>
      </section>

      <div
        class="resizer"
        id="splitResizer"
        role="separator"
        aria-orientation="vertical"
        aria-label="Redimensionner le panneau formulaire"
        tabindex="0"
      ></div>

      <section class="pane pane--form" id="formPane">
        <div id="formEmpty" class="muted">Chargement…</div>
        <div id="formContent" hidden>
          <div class="form-pane__scroll">
            <p
              id="formNonDataMessage"
              class="form-pane__non-data-message muted"
              hidden
            >
              DocType Non-Data, Pas de Headers et Records
            </p>
            <div class="block" id="headerBlock">
              <h2>Header (sections)</h2>
              <div class="fields" id="headerFields"></div>
              <div class="header-add-section-wrap">
                <button
                  type="button"
                  id="btnAddHeaderSection"
                  class="btn btn--small"
                >
                  + Ajouter une section Header
                </button>
              </div>
              <div class="bdm-mixed-add-wrap" id="bdmMixedAddWrap" hidden>
                <button
                  type="button"
                  id="btnAddBdmHeaderSection"
                  class="btn btn--small"
                >
                  + Add BDM header section
                </button>
              </div>
            </div>
            <div class="form-record-count-bar" id="formRecordCountBar" hidden>
              <span class="form-record-count" aria-live="polite">
                <span class="form-record-count__label"
                  >Records sur cette image</span
                >
                <span class="form-record-count__value" id="formRecordCount"
                  >0</span
                >
              </span>
            </div>
            <div id="recordsBlock"></div>
          </div>
        </div>
      </section>
    </main>

    <footer class="status-bar" aria-label="Barre d'état">
      <span class="status-segment" id="statusContext">Lot/Image: -</span>
      <button
        type="button"
        class="status-segment status-segment--button"
        id="statusBar"
        title="Cliquer pour voir et copier le détail complet de l'état"
      >
        État: Chargement...
      </button>
      <span
        class="status-segment status-segment--pan status-segment--right"
        id="statusPan"
        hidden
        title="Manual pan (px) when auto zoom is off; use Zoom control for magnification"
      >
        <span class="bdm-view-toolbar__coords bdm-view-toolbar__coords--status">
          <label class="bdm-coord">
            <span class="muted">Pan X</span>
            <input
              type="text"
              id="bdmPanXInput"
              class="bdm-coord-input"
              inputmode="numeric"
              autocomplete="off"
              aria-label="Pan X pixels"
            />
          </label>
          <label class="bdm-coord">
            <span class="muted">Pan Y</span>
            <input
              type="text"
              id="bdmPanYInput"
              class="bdm-coord-input"
              inputmode="numeric"
              autocomplete="off"
              aria-label="Pan Y pixels"
            />
          </label>
        </span>
      </span>
      <span class="status-segment status-segment--zoom" id="statusZoom">
        <span class="status-zoom-label">Zoom:</span>
        <input
          type="number"
          id="zoomValueDisplay"
          class="status-zoom-value-input"
          min="10"
          max="400"
          step="1"
          value="100"
          inputmode="numeric"
          aria-label="Zoom percentage"
          title="Type a value from 10 to 400"
        />
        <input
          type="range"
          id="zoomRange"
          min="10"
          max="400"
          value="100"
          step="1"
          class="status-zoom-slider"
          aria-label="Zoom slider"
        />
      </span>
    </footer>

    <div
      id="statusDetailsBackdrop"
      class="status-details__backdrop"
      hidden
    ></div>
    <section
      id="statusDetailsDialog"
      class="status-details"
      aria-label="Détail de l'état"
      hidden
    >
      <div class="status-details__head">
        <h2>Détail complet de l'état</h2>
        <button type="button" id="btnStatusDetailsClose" class="btn btn--small">
          Fermer
        </button>
      </div>
      <textarea
        id="statusDetailsText"
        class="status-details__text"
        readonly
      ></textarea>
      <div class="status-details__actions">
        <button type="button" id="btnStatusDetailsCopy" class="btn btn--small">
          Copier
        </button>
      </div>
    </section>

    <input type="hidden" id="projectRoot" />

    <!-- Sub-project create / edit floating panel -->
    <div
      id="subProjectEditorBackdrop"
      class="sub-project-editor-backdrop"
      hidden
    ></div>
    <section
      id="subProjectEditorWrap"
      class="sub-project-editor-panel"
      role="dialog"
      aria-modal="true"
      aria-labelledby="subProjectEditorTitle"
      hidden
    >
      <div class="sub-project-editor-panel__head">
        <h2 id="subProjectEditorTitle" class="sub-project-editor-panel__title">
          Nouveau sous-type
        </h2>
        <button
          type="button"
          id="btnSubProjectEditorClose"
          class="btn btn--small"
          aria-label="Fermer"
        >
          &times;
        </button>
      </div>
      <div class="sub-project-editor-panel__body">
        <label class="sub-project-field">
          <span>Nom</span>
          <input
            type="text"
            id="subProjectEditorName"
            class="input"
            autocomplete="off"
          />
        </label>
        <label class="sub-project-field">
          <span>Langue</span>
          <select
            id="subProjectEditorLanguage"
            class="input"
            aria-label="Langue du sous-projet"
          >
            <option value="">Sélectionner…</option>
            <option value="Allemand">Allemand</option>
            <option value="Anglais">Anglais</option>
            <option value="Arabe">Arabe</option>
            <option value="Chinois">Chinois</option>
            <option value="Danois">Danois</option>
            <option value="Espagnol">Espagnol</option>
            <option value="Finlandais">Finlandais</option>
            <option value="Français">Français</option>
            <option value="Grec">Grec</option>
            <option value="Hébreu">Hébreu</option>
            <option value="Hongrois">Hongrois</option>
            <option value="Italien">Italien</option>
            <option value="Japonais">Japonais</option>
            <option value="Latin">Latin</option>
            <option value="Malagasy">Malagasy</option>
            <option value="Néerlandais">Néerlandais</option>
            <option value="Norvégien">Norvégien</option>
            <option value="Polonais">Polonais</option>
            <option value="Portugais">Portugais</option>
            <option value="Roumain">Roumain</option>
            <option value="Russe">Russe</option>
            <option value="Suédois">Suédois</option>
            <option value="Tchèque">Tchèque</option>
            <option value="Turc">Turc</option>
          </select>
        </label>
        <fieldset class="sub-project-root-fieldset">
          <legend>Type racine</legend>
          <label class="sub-project-radio">
            <input
              type="radio"
              name="subProjectRootKind"
              value="Census"
            />
            Census
          </label>
          <label class="sub-project-radio">
            <input
              type="radio"
              name="subProjectRootKind"
              value="BDM"
              checked
            />
            BDM
          </label>
        </fieldset>
        <label class="sub-project-field sub-project-field--checkbox">
          <span>
            <input type="checkbox" id="subProjectEditorIntegralKeying" />
            Integral Keying
          </span>
          <small class="muted">
            Indexation Intégrale : ne pas écrire dans HeaderGrid / RecordGrid (coordonnées désactivées).
          </small>
        </label>
        <div class="sub-project-field">
          <span>Importer le fichier CI</span>
          <small class="muted">
            Importez les DocTypes, les Champs et les Keying Instructions depuis le fichier CI (.xlsx) du lot.
          </small>
          <div class="ci-import-row">
            <button
              type="button"
              id="btnCiImport"
              class="btn btn--small"
            >
              Importer le fichier CI (.xlsx)
            </button>
            <input
              type="file"
              id="subProjectCiFile"
              accept=".xlsx,.xls"
              style="display: none"
              aria-hidden="true"
            />
            <span
              id="ciImportStatus"
              class="ci-import-status"
              aria-live="polite"
            ></span>
          </div>
          <div
            id="subProjectDocTypesPreview"
            class="doctype-tags-wrap"
            aria-label="DocTypes sélectionnés"
          ></div>
          <input type="hidden" id="subProjectEditorDocTypes" />
        </div>
      </div>
      <div class="sub-project-editor-panel__footer">
        <button
          type="button"
          id="btnSubProjectSave"
          class="btn btn--small btn--primary"
        >
          Enregistrer
        </button>
        <button
          type="button"
          id="btnSubProjectCancel"
          class="btn btn--small"
        >
          Annuler
        </button>
      </div>
    </section>

    <!-- Sub-project profile panel -->
    <div id="subProfileBackdrop" class="sub-profile-backdrop" hidden></div>
    <section
      id="subProfilePanel"
      class="sub-profile-panel"
      role="dialog"
      aria-modal="true"
      aria-labelledby="subProfileTitle"
      hidden
    >
      <div class="sub-profile-panel__head">
        <div class="sub-profile-panel__title-row">
          <span id="subProfileKindBadge" class="kind-badge"></span>
          <h2 id="subProfileTitle" class="sub-profile-panel__title"></h2>
          <input
            type="text"
            id="subProfileTitleInput"
            class="sub-profile-panel__title-input"
            hidden
            autocomplete="off"
            aria-label="Nom du sous-projet"
          />
        </div>
        <div class="sub-profile-panel__actions">
          <button
            type="button"
            id="btnProfileClose"
            class="btn btn--small"
            aria-label="Fermer"
          >
            &times;
          </button>
        </div>
      </div>
      <nav class="sub-profile-tabs" role="tablist" aria-label="Détails du sous-projet">
        <button type="button" class="sub-profile-tab" data-sub-profile-tab="overview">Vue d'ensemble</button>
        <button type="button" class="sub-profile-tab" data-sub-profile-tab="doctypes">DocTypes</button>
        <button type="button" class="sub-profile-tab" data-sub-profile-tab="fields">Champs</button>
        <button type="button" class="sub-profile-tab" data-sub-profile-tab="instructions">Instructions</button>
        <button type="button" class="sub-profile-tab" data-sub-profile-tab="sources">Lots et références</button>
      </nav>
      <div class="sub-profile-panel__body">
        <section class="sub-profile-tab-panel" data-sub-profile-panel="overview">
          <div class="sub-profile-section sub-profile-section--language">
            <h3 class="sub-profile-section__title">Langue</h3>
            <div id="subProfileLanguageValue" class="sub-profile-language-value"></div>
            <select id="subProfileLanguageInput" class="sub-profile-language-input" hidden aria-label="Langue du sous-projet">
              <option value="">Sélectionner…</option>
            </select>
          </div>
          <div class="sub-profile-section sub-profile-section--integral-keying">
            <h3 class="sub-profile-section__title">Integral Keying</h3>
            <div id="subProfileIntegralKeyingValue" class="sub-profile-language-value"></div>
            <label id="subProfileIntegralKeyingEdit" class="sub-project-field--checkbox" hidden>
              <input type="checkbox" id="subProfileIntegralKeyingInput" />
              Indexation Intégrale (pas d’écriture HeaderGrid / RecordGrid)
            </label>
          </div>
          <div id="subProfileCiOverview" class="sub-profile-ci-grid"></div>
        </section>

        <section class="sub-profile-tab-panel" data-sub-profile-panel="doctypes" hidden>
          <div class="sub-profile-section">
            <h3 class="sub-profile-section__title">DocTypes</h3>
            <div id="subProfileDocTypes" class="doctype-tags-wrap sub-profile-doctypes"></div>
          </div>
          <div id="subProfileCiDoctypeDetails" class="sub-profile-ci-cards"></div>
        </section>

        <section class="sub-profile-tab-panel" data-sub-profile-panel="fields" hidden>
          <div class="sub-profile-section sub-profile-section--fields">
            <h3 class="sub-profile-section__title">Champs du projet</h3>
            <div id="subProfileFooterSearchWrap" class="sub-profile-panel__footer-search sub-profile-fields-search-wrap" hidden>
              <input type="search" id="subProfileFieldSearch" class="sub-profile-field-search" placeholder="Rechercher un champ…" autocomplete="off" aria-label="Rechercher un champ" />
            </div>
            <div class="sub-profile-fields-wrap">
              <table class="sub-profile-fields-table">
                <thead>
                  <tr>
                    <th>Libellé</th><th>Nom du champ</th><th>Header</th><th>Priorité</th>
                    <th>Seuil Rekey</th><th>Review Blanks</th><th>Dictionnaire</th>
                  </tr>
                </thead>
                <tbody id="subProfileFieldsBody"></tbody>
              </table>
            </div>
          </div>
        </section>

        <section class="sub-profile-tab-panel" data-sub-profile-panel="instructions" hidden>
          <div class="sub-profile-section">
            <h3 class="sub-profile-section__title">Instructions spéciales</h3>
            <div id="subProfileCiSpecialInstructions" class="sub-profile-ci-list"></div>
          </div>
          <div class="sub-profile-section sub-profile-section--keying-instructions">
            <h3 class="sub-profile-section__title">Keying Instructions par champ</h3>
            <div class="sub-profile-keying-wrap">
              <table class="sub-profile-keying-table">
                <thead><tr><th>Field Label</th><th>Keying Instructions</th></tr></thead>
                <tbody id="subProfileKeyingInstructionsBody"></tbody>
              </table>
            </div>
          </div>
          <div class="sub-profile-section">
            <h3 class="sub-profile-section__title">Validation avant soumission</h3>
            <div id="subProfileCiValidation" class="sub-profile-ci-list"></div>
          </div>
        </section>

        <section class="sub-profile-tab-panel" data-sub-profile-panel="sources" hidden>
          <div id="subProfileCiSource" class="sub-profile-ci-grid"></div>
          <div id="subProfileCiManifestSummary" class="sub-profile-ci-grid"></div>
          <div id="subProfileCiAssetSummary" class="sub-profile-ci-grid"></div>
          <div class="sub-profile-section">
            <h3 class="sub-profile-section__title">Lots déclarés dans le CI</h3>
            <input id="subProfileCiManifestSearch" type="search" class="sub-profile-field-search" placeholder="Rechercher un lot…" autocomplete="off" />
            <p id="subProfileCiManifestStatus" class="muted"></p>
            <div class="sub-profile-ci-manifest-wrap">
              <table class="sub-profile-fields-table">
                <thead><tr><th>Lot</th><th>Images prévues</th><th>Type</th><th>Feuille source</th></tr></thead>
                <tbody id="subProfileCiManifestBody"></tbody>
              </table>
            </div>
          </div>
        </section>
      </div>
      <footer class="sub-profile-panel__footer">
        <div class="sub-profile-panel__footer-actions">
          <button
            type="button"
            id="btnProfileEdit"
            class="btn btn--small"
            title="Modifier le nom, la langue, les DocTypes et les seuils Rekey"
          >
            Modifier
          </button>
          <button type="button" id="btnProfileDelete" class="btn btn--small btn--danger">
            Supprimer
          </button>
          <button
            type="button"
            id="btnProfileThresholdSave"
            class="btn btn--small btn--primary"
            hidden
          >
            Enregistrer
          </button>
        </div>
      </footer>
    </section>

    <script type="module" src="{{ url_for('static', filename='app.js') }}?v=131"></script>
  </body>
</html>
