<?php
/**
 * Fichier  : views/inventory.php
 * Auteur   : KREMER Régis
 * Version  : 2.6.76
 * Date     : 2026-07-17
 * Description : Vue — Inventaires physiques : assistant mobile/tablette, comptage terrain et historique.
 *
 * Changelog :
 *   v2.7.0 (2026-03-01) — Vue inventaire enrichie : historique, impression, détail.
 *   v2.6.4 (2026-07-08) — Parcours terrain mobile/tablette : cartes responsives et textes MageStock.
 *   v2.6.22 (2026-07-08) — UX inventaires : filtres de statut et impression A4 homogène.
 *   v2.6.74 (2026-07-17) — INVENTORY MOBILE FLOW1 : assistant en 3 étapes, cartes natives et actions terrain sécurisées.
 *   v2.6.75 (2026-07-17) — INVENTORY RESUME REVIEW2 : brouillons serveur, reprise, modes métier et revue avant stock.
 *   v2.6.76 (2026-07-17) — INVENTORY FIELD RECETTE3 : historique regroupé par magasin et états PWA/conflit renforcés.
 */
/* inventory.php v2.6.76 */ ?>
<link rel="stylesheet" href="<?= htmlspecialchars(assetUrl('css/inventory-enhance.css?v=' . filemtime(__DIR__.'/../assets/css/inventory-enhance.css'))) ?>">

<div class="page-inventory" id="pgInventory" data-inv-view="home">
    <div class="sr-only" id="invA11yLive" aria-live="polite" aria-atomic="true"></div>

    <!-- ══ VUE : ACCUEIL ═══════════════════════════════════════════ -->
    <section id="invViewHome" aria-labelledby="invHomeTitle">
        <div class="inv-page-hero">
            <div class="inv-page-hero__copy">
                <span class="inv-page-kicker">Contrôle du stock</span>
                <h2 class="page-title-inline" id="invHomeTitle">Inventaires</h2>
                <p class="text-muted">Comptez le stock réel, identifiez les écarts et conservez l’historique des sessions.</p>
            </div>
            <button class="btn btn-primary inv-new-trigger" id="btnNewInventory">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                    <path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/>
                </svg>
                Nouvel inventaire
            </button>
        </div>

        <section class="card inv-drafts-shell" id="invDraftsShell" style="display:none" aria-labelledby="invDraftsTitle">
            <div class="card-header">
                <div>
                    <span class="inv-page-kicker">Travail en cours</span>
                    <h3 class="card-title" id="invDraftsTitle">Inventaires à reprendre</h3>
                    <p class="inv-section-hint">Les comptages sont enregistrés sur le serveur et disponibles depuis vos autres appareils.</p>
                </div>
                <span class="badge badge-blue" id="invDraftsCount">0</span>
            </div>
            <div class="inv-drafts-list" id="invDraftsList" role="list" aria-label="Inventaires à reprendre"></div>
        </section>

        <div class="card inv-history-shell">
            <div class="card-header">
                <div>
                    <h3 class="card-title">Historique des inventaires</h3>
                    <p class="inv-section-hint">Les inventaires sont regroupés par magasin. Touchez une fiche pour consulter son détail.</p>
                </div>
                <span class="badge badge-gray" id="invHistoryCount">—</span>
            </div>

            <div class="table-container inv-desktop-table">
                <table class="data-table" id="invHistoryTable">
                    <thead>
                        <tr>
                            <th>Titre</th><th data-sort="date">Date</th><th>Magasin</th><th>Type / périmètre</th>
                            <th class="cell-number">Produits</th><th class="cell-number">Écarts</th>
                            <th>Opérateur</th><th>Résultat</th><th class="cell-actions"></th>
                        </tr>
                    </thead>
                    <tbody id="invHistoryBody"><tr><td colspan="9" class="tbl-empty">Chargement…</td></tr></tbody>
                </table>
            </div>

            <div class="inv-mobile-list" id="invHistoryCards" role="list" aria-label="Historique des inventaires"></div>
        </div>
    </section>

    <!-- ══ VUE : NOUVEAU ═══════════════════════════════════════════ -->
    <section id="invViewNew" style="display:none" aria-labelledby="invNewTitle">
        <div class="inv-flow-heading">
            <button class="btn btn-ghost btn-sm" id="btnBackToHome">
                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                    <line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/>
                </svg>
                Retour
            </button>
            <div>
                <span class="inv-page-kicker">Création guidée</span>
                <h2 class="page-title-inline" id="invNewTitle" tabindex="-1">Nouvel inventaire</h2>
            </div>
        </div>

        <nav class="inv-wizard-progress" id="invWizardProgress" aria-label="Progression de la création">
            <button type="button" class="inv-wizard-step is-active" data-step="1" aria-current="step">
                <span>1</span><strong>Identification</strong>
            </button>
            <span class="inv-wizard-line" aria-hidden="true"></span>
            <button type="button" class="inv-wizard-step" data-step="2" disabled>
                <span>2</span><strong>Périmètre</strong>
            </button>
            <span class="inv-wizard-line" aria-hidden="true"></span>
            <button type="button" class="inv-wizard-step" data-step="3" disabled>
                <span>3</span><strong>Vérification</strong>
            </button>
        </nav>

        <div class="inv-new-layout">
            <div class="card inv-wizard-card">
                <div class="card-body inv-new-form">
                    <section class="inv-wizard-panel" data-step="1" aria-labelledby="invStep1Title">
                        <div class="inv-step-heading">
                            <span class="inv-step-number" aria-hidden="true">1</span>
                            <div><h3 id="invStep1Title" tabindex="-1">Identifier l’inventaire</h3><p>Donnez un nom explicite et choisissez le magasin à contrôler.</p></div>
                        </div>
                        <div class="inv-step-grid">
                            <div class="form-group">
                                <label class="form-label" for="invTitle">Titre de l’inventaire <span class="required-mark" aria-hidden="true">*</span></label>
                                <input type="text" class="form-input" id="invTitle" autocomplete="off"
                                    placeholder="ex. Inventaire annuel 2026 — Voirie Signalisation" aria-required="true">
                                <p class="inv-field-help">Ce titre apparaîtra dans l’historique et sur l’impression.</p>
                            </div>
                            <div class="form-group">
                                <label class="form-label" for="invWhSelect">Magasin <span class="required-mark" aria-hidden="true">*</span></label>
                                <select class="form-select" id="invWhSelect" aria-required="true">
                                    <option value="">Sélectionner un magasin</option>
                                </select>
                                <p class="inv-field-help">Les catégories de l’étape suivante seront limitées à ce magasin.</p>
                            </div>
                        </div>
                        <fieldset class="inv-mode-fieldset">
                            <legend>Type de contrôle</legend>
                            <div class="inv-mode-options">
                                <label class="inv-mode-option" for="invModeFull">
                                    <input type="radio" name="invMode" id="invModeFull" value="full" checked>
                                    <span class="inv-mode-option__copy"><strong>Inventaire complet</strong><small>Tout le magasin doit être compté avant clôture.</small></span>
                                </label>
                                <label class="inv-mode-option" for="invModePartial">
                                    <input type="radio" name="invMode" id="invModePartial" value="partial">
                                    <span class="inv-mode-option__copy"><strong>Contrôle ciblé</strong><small>Choisissez des catégories ; les produits non comptés seront ignorés.</small></span>
                                </label>
                            </div>
                        </fieldset>
                    </section>

                    <section class="inv-wizard-panel" data-step="2" aria-labelledby="invStep2Title">
                        <div class="inv-step-heading">
                            <span class="inv-step-number" aria-hidden="true">2</span>
                            <div><h3 id="invStep2Title" tabindex="-1">Choisir le périmètre</h3><p>Inventoriez tout le magasin ou seulement certaines catégories.</p></div>
                        </div>
                        <div class="inv-full-scope-notice" id="invFullScopeNotice">
                            <strong>Tout le magasin sera inventorié.</strong>
                            <span>Le comptage complet est obligatoire avant l’étape de revue.</span>
                        </div>
                        <div class="form-group" id="invPartialScopeGroup" hidden>
                            <label class="form-label" id="invCategoriesLabel">Catégories ciblées <span class="required-mark" aria-hidden="true">*</span></label>
                            <div class="inv-cat-zone" id="invCatZone" aria-labelledby="invCategoriesLabel">
                                <div class="inv-cat-header">
                                    <button type="button" class="inv-cat-btn-all" id="invCatBtnAll" aria-pressed="true">✓ Toutes les catégories</button>
                                    <label class="inv-cat-search-wrap" for="invCatSearch">
                                        <span class="sr-only">Filtrer les catégories</span>
                                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                                        <input type="search" class="inv-cat-search" id="invCatSearch" placeholder="Rechercher une catégorie…" autocomplete="off">
                                    </label>
                                    <span class="inv-cat-counter" id="invCatCounter"></span>
                                </div>
                                <div class="inv-cat-selected" id="invCatSelected" aria-label="Catégories sélectionnées"></div>
                                <div class="inv-cat-scroll-wrap">
                                    <div class="inv-cat-scroll" id="invCatScroll" tabindex="0">
                                        <div class="inv-cat-chips" id="invCatChips"></div>
                                    </div>
                                    <div class="inv-cat-scroll-fade" id="invCatFade" aria-hidden="true"></div>
                                </div>
                            </div>
                        </div>
                    </section>

                    <section class="inv-wizard-panel" data-step="3" aria-labelledby="invStep3Title">
                        <div class="inv-step-heading">
                            <span class="inv-step-number" aria-hidden="true">3</span>
                            <div><h3 id="invStep3Title" tabindex="-1">Vérifier avant de lancer</h3><p>Contrôlez le périmètre. Aucune correction de stock n’est appliquée à ce stade.</p></div>
                        </div>
                        <dl class="inv-review-grid">
                            <div><dt>Titre</dt><dd id="invReviewTitle">—</dd></div>
                            <div><dt>Type</dt><dd id="invReviewMode">Inventaire complet</dd></div>
                            <div><dt>Magasin</dt><dd id="invReviewWarehouse">—</dd></div>
                            <div><dt>Périmètre</dt><dd id="invReviewCategories">Toutes les catégories</dd></div>
                            <div><dt>Produits concernés</dt><dd id="invReviewProducts">—</dd></div>
                        </dl>
                        <div class="inv-review-note">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
                            Une fois lancé, l’inventaire privilégie le scanner et les produits restant à compter.
                        </div>
                    </section>
                </div>
            </div>

            <aside class="inv-new-aside" aria-label="Aide inventaire">
                <div class="inv-new-tip">
                    <div class="inv-new-tip-title">Comment ça marche ?</div>
                    <div class="inv-new-tip-text">MageStock compare le <strong>stock réel</strong> au stock théorique. Les corrections ne sont appliquées qu’après votre validation finale.</div>
                </div>
                <div class="inv-new-tip">
                    <div class="inv-new-tip-title">Usage terrain</div>
                    <div class="inv-new-tip-text">Sur téléphone et tablette, utilisez en priorité le <strong>scanner continu</strong>. La recherche manuelle reste disponible en secours.</div>
                </div>
            </aside>
        </div>

        <div class="inv-wizard-actions" id="invWizardActions">
            <button class="btn btn-secondary" id="btnCancelNew">Annuler</button>
            <div class="inv-wizard-actions__main">
                <button class="btn btn-ghost" id="btnInvWizardBack" style="display:none">Précédent</button>
                <button class="btn btn-primary" id="btnInvWizardNext">Suivant</button>
                <button class="btn btn-success" id="btnStartInv" style="display:none">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polygon points="5 3 19 12 5 21 5 3"/></svg>
                    Lancer l’inventaire
                </button>
            </div>
        </div>
    </section>

    <!-- ══ VUE : EN COURS ══════════════════════════════════════════ -->
    <section id="invViewProgress" style="display:none" aria-labelledby="invHeaderTitle">
        <div class="inv-header-bar">
            <div class="inv-header-info">
                <div class="inv-header-kicker-row"><span class="inv-page-kicker">Inventaire en cours</span><span class="inv-mode-badge" id="invProgressMode">Complet</span></div>
                <h2 class="inv-header-title" id="invHeaderTitle" tabindex="-1">Inventaire en cours</h2>
                <span class="inv-header-meta" id="invHeaderMeta"></span>
                <span class="inv-save-status" id="invSaveStatus" role="status" aria-live="polite">Enregistré sur le serveur</span>
            </div>
            <div class="inv-progress-actions-desktop">
                <button class="btn btn-ghost btn-sm" id="btnInvPrint">Imprimer</button>
                <button class="btn btn-primary btn-sm" id="btnInvScan">Scanner</button>
                <button class="btn btn-secondary btn-sm" id="btnInvCancel">Quitter</button>
                <button class="btn btn-success" id="btnInvValidate">Revoir et clôturer</button>
            </div>
        </div>

        <div class="inv-conflict-banner" id="invConflictBanner" hidden role="alert">
            <strong>Inventaire verrouillé</strong>
            <span>Une version plus récente existe sur le serveur. Rechargez-la avant de poursuivre afin de protéger les comptages.</span>
            <button type="button" class="btn btn-primary btn-sm" id="btnInvReloadConflict">Recharger la version serveur</button>
        </div>

        <div class="inv-progress-overview">
            <div class="inv-progress-copy">
                <strong id="invMobileProgressText">0 sur 0 produit compté</strong>
                <span id="invMobileProgressSub">0 écart · 0 restant</span>
            </div>
            <span class="inv-progress-pct" id="invProgressPct">0%</span>
            <div class="inv-progress-bar" aria-hidden="true"><div class="inv-progress-fill" id="invProgressBar" style="width:0%"></div></div>
        </div>

        <div class="inv-kpi-row">
            <div class="inv-kpi-card"><div class="inv-kpi-val" id="invTotalCount">0</div><div class="inv-kpi-lbl">Total produits</div></div>
            <div class="inv-kpi-card green"><div class="inv-kpi-val" id="invCheckedCount">0</div><div class="inv-kpi-lbl">Conformes</div></div>
            <div class="inv-kpi-card orange"><div class="inv-kpi-val" id="invDiffCount">0</div><div class="inv-kpi-lbl">Écarts</div></div>
            <div class="inv-kpi-card muted"><div class="inv-kpi-val" id="invPendingCount">0</div><div class="inv-kpi-lbl">À compter</div></div>
        </div>

        <button type="button" class="btn btn-primary inv-mobile-scan-primary" id="btnInvMobileScanTop">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z"/><circle cx="12" cy="13" r="4"/></svg>
            Scanner un produit
        </button>

        <div class="inv-status-toolbar" role="group" aria-label="Filtrer les produits">
            <button type="button" class="inv-status-filter active" data-filter="pending" aria-pressed="true">À compter <span data-inv-filter-count="pending">0</span></button>
            <button type="button" class="inv-status-filter diff" data-filter="diff" aria-pressed="false">Écarts <span data-inv-filter-count="diff">0</span></button>
            <button type="button" class="inv-status-filter ok" data-filter="ok" aria-pressed="false">Conformes <span data-inv-filter-count="ok">0</span></button>
            <button type="button" class="inv-status-filter" data-filter="counted" aria-pressed="false">Comptées <span data-inv-filter-count="counted">0</span></button>
            <button type="button" class="inv-status-filter" data-filter="all" aria-pressed="false">Toutes <span data-inv-filter-count="all">0</span></button>
        </div>

        <div class="card inv-search-card">
            <div class="card-body">
                <label class="search-box" for="invScanInput">
                    <svg class="search-box-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                    <input type="search" id="invScanInput" placeholder="Produit, SKU ou code-barres…" autocomplete="off">
                </label>
                <button class="btn btn-primary" id="btnInvManualAdd">Chercher</button>
            </div>
        </div>

        <div class="card inv-products-shell">
            <div class="card-header">
                <div><h3 class="card-title">Produits à inventorier</h3><p class="inv-section-hint" id="invProductsHint">Les produits restant à compter sont affichés en priorité.</p></div>
                <details class="inv-bulk-actions">
                    <summary class="btn btn-ghost btn-sm">Actions</summary>
                    <div class="inv-actions-popover">
                        <button class="btn btn-ghost" id="btnInvValidateAll">Tout marquer conforme</button>
                        <button class="btn btn-ghost" id="btnInvResetAll">Réinitialiser les comptages</button>
                    </div>
                </details>
            </div>

            <div class="table-container inv-desktop-table">
                <table class="data-table" id="invItemsTable">
                    <thead><tr><th style="width:52px"></th><th>Produit</th><th>SKU</th><th>Catégorie</th><th class="cell-number">Théorique</th><th class="cell-number">Compté</th><th class="cell-number">Écart</th><th class="cell-actions"></th></tr></thead>
                    <tbody id="invItemsBody"></tbody>
                </table>
            </div>

            <div class="inv-mobile-list inv-product-card-list" id="invItemsCards" role="list" aria-label="Produits à inventorier"></div>
            <button type="button" class="btn btn-secondary inv-load-more" id="btnInvLoadMore" style="display:none">Afficher 30 produits de plus</button>
        </div>

        <div class="inv-mobile-action-dock" aria-label="Actions de l’inventaire">
            <button type="button" class="btn btn-primary" id="btnInvMobileScanDock">Scanner</button>
            <button type="button" class="btn btn-success" id="btnInvMobileValidate">Revoir</button>
            <details class="inv-mobile-more" id="invMobileMore">
                <summary class="btn btn-secondary" aria-label="Plus d’actions">•••</summary>
                <div class="inv-mobile-more-menu">
                    <button type="button" id="btnInvMobilePrint">Imprimer</button>
                    <button type="button" id="btnInvMobileValidateAll">Tout marquer conforme</button>
                    <button type="button" id="btnInvMobileResetAll">Réinitialiser</button>
                    <button type="button" id="btnInvMobileCancel">Quitter ou supprimer</button>
                </div>
            </details>
        </div>
    </section>


    <!-- ══ VUE : REVUE AVANT APPLICATION AU STOCK ══════════════════ -->
    <section id="invViewReview" style="display:none" aria-labelledby="invReviewPageTitle">
        <div class="inv-flow-heading inv-review-heading">
            <button class="btn btn-ghost btn-sm" id="btnBackToCounting">
                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
                Revenir au comptage
            </button>
            <div>
                <span class="inv-page-kicker">Étape finale</span>
                <h2 class="page-title-inline" id="invReviewPageTitle" tabindex="-1">Revue des écarts</h2>
                <p class="text-muted" id="invReviewPageMeta"></p>
            </div>
            <button class="btn btn-secondary btn-sm inv-review-print" id="btnReviewPrint">Imprimer</button>
        </div>

        <div class="inv-review-alert" id="invReviewBlocking" style="display:none" role="alert"></div>
        <div class="inv-review-alert is-warning" id="invReviewStockChanged" style="display:none" role="alert"></div>

        <div class="inv-review-summary" id="invReviewSummaryCards" aria-label="Résumé de la revue"></div>

        <div class="card inv-review-diffs-shell">
            <div class="card-header">
                <div><h3 class="card-title">Corrections proposées</h3><p class="inv-section-hint">Seuls les produits comptés seront modifiés au moment de la clôture.</p></div>
                <span class="badge badge-orange" id="invReviewDiffCount">0</span>
            </div>
            <div class="inv-review-empty" id="invReviewNoDiff" style="display:none">Aucune correction nécessaire : les quantités comptées correspondent déjà au stock courant.</div>
            <div class="table-container inv-desktop-table" id="invReviewTableWrap">
                <table class="data-table" id="invReviewTable">
                    <thead><tr><th>Produit</th><th>SKU</th><th class="cell-number">Théorique au lancement</th><th class="cell-number">Compté</th><th class="cell-number">Correction</th><th>État actuel</th></tr></thead>
                    <tbody id="invReviewBody"></tbody>
                </table>
            </div>
            <div class="inv-mobile-list inv-review-card-list" id="invReviewCards" role="list" aria-label="Corrections proposées"></div>
        </div>

        <div class="card inv-review-pending-shell" id="invReviewPendingShell" style="display:none">
            <div class="card-header"><div><h3 class="card-title">Produits non comptés</h3><p class="inv-section-hint" id="invReviewPendingHint"></p></div><span class="badge badge-gray" id="invReviewPendingCount">0</span></div>
            <div class="inv-review-pending-list" id="invReviewPendingList"></div>
        </div>

        <div class="inv-review-confirm" id="invReviewConfirmBox">
            <label for="invReviewConfirm">
                <input type="checkbox" id="invReviewConfirm">
                <span>J’ai vérifié les écarts et je confirme l’application des quantités comptées au stock.</span>
            </label>
        </div>

        <div class="inv-review-actions">
            <button type="button" class="btn btn-secondary" id="btnReviewBackBottom">Modifier les comptages</button>
            <button type="button" class="btn btn-success" id="btnApplyInventory" disabled>Appliquer et clôturer</button>
        </div>
    </section>

    <!-- ══ VUE : DÉTAIL HISTORIQUE ═════════════════════════════════ -->
    <section id="invViewDetail" style="display:none" aria-labelledby="invDetailTitle">
        <div class="inv-flow-heading inv-detail-heading">
            <button class="btn btn-ghost btn-sm" id="btnBackFromDetail">
                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
                Retour
            </button>
            <div><span class="inv-page-kicker">Historique</span><h2 class="page-title-inline" id="invDetailTitle" tabindex="-1">Détail inventaire</h2></div>
            <button class="btn btn-secondary btn-sm inv-detail-print" id="btnDetailPrint">Imprimer</button>
        </div>

        <div class="inv-detail-header card" id="invDetailMeta"></div>

        <div class="card inv-detail-lines-shell">
            <div class="card-header"><div><h3 class="card-title">Lignes inventoriées</h3><div id="invDetailStats" class="flex gap-2"></div></div></div>
            <div class="inv-status-toolbar inv-detail-status-toolbar" role="group" aria-label="Filtrer les lignes inventoriées">
                <button type="button" class="inv-detail-filter active" data-filter="all" aria-pressed="true">Toutes <span data-inv-filter-count="all">0</span></button>
                <button type="button" class="inv-detail-filter" data-filter="counted" aria-pressed="false">Comptées <span data-inv-filter-count="counted">0</span></button>
                <button type="button" class="inv-detail-filter ok" data-filter="ok" aria-pressed="false">Conformes <span data-inv-filter-count="ok">0</span></button>
                <button type="button" class="inv-detail-filter diff" data-filter="diff" aria-pressed="false">Écarts <span data-inv-filter-count="diff">0</span></button>
                <button type="button" class="inv-detail-filter pending" data-filter="pending" aria-pressed="false">Non comptées <span data-inv-filter-count="pending">0</span></button>
            </div>
            <div class="table-container inv-desktop-table">
                <table class="data-table" id="invDetailTable">
                    <thead><tr><th style="width:52px">Photo</th><th>Produit</th><th>SKU</th><th>Catégorie</th><th class="cell-number">Théorique</th><th class="cell-number">Compté</th><th class="cell-number">Écart</th><th>Résultat</th></tr></thead>
                    <tbody id="invDetailBody"></tbody>
                </table>
            </div>
            <div class="inv-mobile-list inv-detail-card-list" id="invDetailCards" role="list" aria-label="Lignes inventoriées"></div>
        </div>
    </section>
</div>
