<?php
/**
 * Fichier  : views/plans.php
 * Auteur   : KREMER Régis
 * Version  : 2.6.67
 * Date     : 2026-07-09
 * Description : Vue — Plans d’emplacements / création premium, éditeur type plan 2D et objets métier
 *
 * Changelog :
 *   v2.6.25 (2026-07-09) — Création de l’écran socle : liste, rattachement magasin et préparation éditeur.
 *   v2.6.26 (2026-07-09) — PLAN 2 : ajout éditeur SVG, grille, zoom, déplacement et création d’objets simples.
 *   v2.6.27 (2026-07-09) — PLAN 3 : bibliothèque de composants visuels, rendus SVG enrichis, duplication et alignements.
 *   v2.6.28 (2026-07-09) — PLAN 4 : recherche emplacements, rattachement objet et panneau métier.
 *   v2.6.30 (2026-07-09) — PLAN 6 : boutons impression/export PDF, légende et finalisation responsive.
 *   v2.6.32 (2026-07-09) — PLANS UX1 : séparation accueil/consultation/édition, textes humains et responsive simplifié.
 *   v2.6.33 (2026-07-09) — PLANS UX2 : route édition dédiée, palette compacte et consignes drag & drop.
 *   v2.6.34 (2026-07-09) — PLANS UX3 : création dédiée pleine page, sans canvas ni boutons hors parcours.
 *   v2.6.35 (2026-07-09) — Correctif : formulaire création rendu côté serveur sur /plans-edit?create=1.
 *   v2.6.36 (2026-07-09) — Correctif : outils édition resserrés et actions de rotation visibles.
 *   v2.6.40 (2026-07-09) — PLANS DESIGN1 : terminologie Longueur/Largeur et interface éditeur premium.
 *   v2.6.41 (2026-07-09) — PLANS EDITOR2 : outils de précision, sélection avancée, pan/zoom et confort architecte.
 *   v2.6.43 (2026-07-09) — PLANS PRINT3 : libellés d’impression/export et sortie PDF premium.
 *   v2.6.44 (2026-07-09) — PLANS ARCHITECTE1 : modes Construire/Aménager/Stockage/Lier, vocabulaire plan 2D et aide architecte.
 *   v2.6.45 (2026-07-09) — PLANS WALLS2 : consignes mur par deux points, ouvertures accrochées au mur et pièces fermées détectées.
 *   v2.6.51 (2026-07-09) — PLANS EDITOR PIXEL1 : toolbar haute, bibliothèque gauche et inspecteur droit plein écran.
 *   v2.6.52 (2026-07-09) — PLANS RAIL FIX1 : recherche bibliothèque corrigée et panneau filtres fonctionnel.
 *   v2.6.64 (2026-07-10) — PLANS CREATE UX1 : création avec dimensions en mètres, échelle et aperçu.
 *   v2.6.65 (2026-07-10) — PLANS SCALE FLOOR FRAME1 : cohérence métrique, contour automatique et cloison grille premium.
 *   v2.6.67 (2026-07-10) — PLANS VIEWER LOCALIZE UX1 : consultation plan premium et localisation produit unifiée.
 */
?>
<?php
$isPlansEditorPage = (($page ?? '') === 'plans-edit');
$isPlanCreatePage = $isPlansEditorPage && (($_GET['create'] ?? '') === '1') && empty($_GET['planId']) && empty($_GET['id']);
?>
<div class="page-body plans-page<?= $isPlansEditorPage ? ' plans-page--editor' : '' ?><?= $isPlanCreatePage ? ' plans-page--create' : '' ?>" id="pgPlans" data-plan-page="<?= htmlspecialchars($page ?? 'plans') ?>" data-plan-create="<?= $isPlanCreatePage ? '1' : '0' ?>">

  <section class="plans-hero" aria-labelledby="plansTitle">
    <div class="plans-hero__copy">
      <span class="plans-hero__kicker">Cartographie intérieure</span>
      <h1 class="plans-hero__title" id="plansTitle">Plans d’emplacements</h1>
      <p class="plans-hero__text">Visualisez vos dépôts, pièces, armoires et racks pour retrouver rapidement un produit ou un emplacement. Les plans complètent les emplacements MageStock existants sans les remplacer.</p>
    </div>
    <div class="plans-hero__actions" aria-label="Actions principales des plans">
      <button class="btn btn-primary" type="button" data-plan-action="create" data-plan-admin hidden>+ Créer un plan</button>
      <button class="btn btn-secondary" type="button" data-plan-action="focus-search">Rechercher un plan</button>
      <button class="btn btn-secondary" type="button" id="btnPlansSchema">Aide rapide</button>
    </div>
  </section>

  <div class="plans-stat-grid" aria-label="Résumé des plans d’emplacements">
    <div class="plans-stat-card">
      <span>Plans créés</span>
      <strong id="planStatActive">0</strong>
    </div>
    <div class="plans-stat-card">
      <span>Magasins couverts</span>
      <strong id="planStatWarehouses">0</strong>
    </div>
    <div class="plans-stat-card">
      <span>Objets dessinés</span>
      <strong id="planStatObjects">0</strong>
    </div>
    <div class="plans-stat-card">
      <span>Éléments liés</span>
      <strong id="planStatComponents">0</strong>
    </div>
  </div>

  <div class="plans-layout">
    <aside class="card plans-panel" aria-label="Mes plans d’emplacements">
      <div class="plans-panel-head">
        <div>
          <span class="plans-section-kicker">Mes plans</span>
          <h2>Ouvrir un plan</h2>
          <p>Choisissez un plan existant ou créez-en un nouveau pour un magasin.</p>
        </div>
        <button class="btn btn-primary btn-sm" type="button" id="btnPlanAdd" data-plan-admin hidden>+ Créer</button>
      </div>

      <div class="plans-filter-card" aria-label="Filtres des plans">
        <label>
          <span>Magasin</span>
          <select class="sel" id="planWarehouseFilter">
            <option value="">Tous les magasins</option>
          </select>
        </label>
        <label>
          <span>Recherche</span>
          <input class="inp" id="planSearch" type="search" placeholder="Nom du plan, magasin, dépôt…" autocomplete="off">
        </label>
      </div>

      <div class="plans-list-scroll" id="planRows" aria-live="polite">
        <div class="plans-list-placeholder">Chargement des plans…</div>
      </div>

      <div class="plans-help-card">
        <strong>Parcours recommandé</strong>
        <ol>
          <li>Créer un plan pour un magasin.</li>
          <li>Dessiner les zones, armoires ou racks.</li>
          <li>Relier chaque élément aux emplacements existants.</li>
          <li>Utiliser “Localiser” depuis une fiche produit.</li>
        </ol>
      </div>
    </aside>

    <section class="card plans-editor-card" aria-label="Plan sélectionné">
      <div class="plans-editor-head">
        <div class="plans-editor-head__identity">
          <a class="plans-head-back" href="<?= htmlspecialchars(appUrl('plans')) ?>" id="btnPlanBackToList" hidden aria-label="Retour aux plans">← <span>Retour aux plans</span></a>
          <div class="plans-editor-head__copy">
            <span class="plans-section-kicker" id="planModeLabel"><?= $isPlanCreatePage ? 'Création' : 'Accueil' ?></span>
            <h2 class="plans-editor-title" id="planEditorTitle"><?= $isPlanCreatePage ? 'Créer un plan' : 'Choisissez ou créez un plan' ?></h2>
            <p class="plans-editor-sub" id="planEditorSub"><?= $isPlanCreatePage ? 'Renseignez le magasin et la taille du plan. Le dessin s’ouvrira ensuite dans l’éditeur dédié.' : 'La consultation reste simple. L’édition complète est réservée aux administrateurs.' ?></p>
            <span id="planDirtyState" class="plan-readonly-pill">Aucun plan ouvert</span>
          </div>
        </div>

        <div class="plans-toolbar" id="planToolbar" hidden aria-label="Barre d’outils de l’éditeur de plan">
          <div class="plans-tool-group plans-tool-group--primary" role="group" aria-label="Outils de travail">
            <button class="plan-tool-btn active" type="button" data-tool="select" title="Sélectionner un objet"><span class="plan-tool-icon" aria-hidden="true">▸</span><span>Sélection</span></button>
            <button class="plan-tool-btn" type="button" data-tool="pan" title="Déplacer le plan. Raccourci : maintenir Espace"><span class="plan-tool-icon" aria-hidden="true">✋</span><span>Déplacer</span></button>
            <button class="plan-tool-btn" type="button" data-tool="add:mur" title="Tracer un mur par points"><span class="plan-tool-icon" aria-hidden="true">▰</span><span>Mur</span></button>
            <button class="plan-tool-btn" type="button" data-tool="add:cloison" title="Tracer une cloison pleine par points"><span class="plan-tool-icon" aria-hidden="true">▱</span><span>Cloison</span></button>
            <button class="plan-tool-btn" type="button" data-tool="add:cloison_grille" title="Tracer une cloison grille par points"><span class="plan-tool-icon" aria-hidden="true">▥</span><span>Grille</span></button>
            <button class="plan-tool-btn" type="button" data-tool="add:porte" title="Poser une porte sur un mur"><span class="plan-tool-icon" aria-hidden="true">⌞</span><span>Porte</span></button>
            <button class="plan-tool-btn" type="button" data-tool="add:fenetre" title="Poser une fenêtre sur un mur"><span class="plan-tool-icon" aria-hidden="true">▭</span><span>Fenêtre</span></button>
            <button class="plan-tool-btn" type="button" data-tool="add:zone" title="Ajouter une zone"><span class="plan-tool-icon" aria-hidden="true">□</span><span>Zone</span></button>
            <button class="plan-tool-btn primary" type="button" id="btnPlanFinishWall" data-editor-act="finishWall" hidden>Terminer</button>
          </div>
          <div class="plans-tool-group plans-tool-group--snap" role="group" aria-label="Accrochage et historique">
            <button class="plan-tool-btn active" type="button" id="btnPlanSnap" title="Activer ou désactiver l’accrochage automatique"><span class="plan-tool-icon" aria-hidden="true">#</span><span>Accrochage</span></button>
            <label class="plans-angle-snap" title="Contrainte d’angle pendant le tracé des murs et cloisons">
              <span>Angle</span>
              <select id="planWallAngleSnap" aria-label="Contrainte d’angle des murs et cloisons">
                <option value="free">Libre</option>
                <option value="15" selected>15°</option>
                <option value="30">30°</option>
                <option value="45">45°</option>
                <option value="90">90°</option>
              </select>
            </label>
            <button class="plan-tool-btn" type="button" disabled aria-disabled="true" title="Annuler sera disponible dans un prochain lot"><span class="plan-tool-icon" aria-hidden="true">↶</span><span>Annuler</span></button>
            <button class="plan-tool-btn" type="button" disabled aria-disabled="true" title="Rétablir sera disponible dans un prochain lot"><span class="plan-tool-icon" aria-hidden="true">↷</span><span>Rétablir</span></button>
          </div>
          <div class="plans-tool-group plans-tool-group--viewport" role="group" aria-label="Vue du plan">
            <button class="plan-tool-btn plans-icon-btn" type="button" id="btnPlanZoomOut" disabled aria-label="Dézoomer">−</button>
            <span class="plans-zoom-value" aria-hidden="true">100%</span>
            <button class="plan-tool-btn plans-icon-btn" type="button" id="btnPlanZoomIn" disabled aria-label="Zoomer">+</button>
            <button class="plan-tool-btn" type="button" id="btnPlanFit" disabled title="Adapter le plan à l’écran"><span class="plan-tool-icon" aria-hidden="true">⤢</span><span>Adapter</span></button>
            <button class="plan-tool-btn plans-fs-btn" type="button" id="btnPlanFullscreen" disabled aria-pressed="false" title="Basculer le plein écran"><span class="plan-tool-icon" aria-hidden="true">⛶</span><span>Plein écran</span></button>
          </div>
        </div>

        <div class="plans-editor-actions" aria-label="Actions du plan ouvert">
          <button class="btn btn-primary btn-sm" type="button" id="btnPlanEdit" data-plan-admin hidden disabled>Modifier le plan</button>
          <button class="btn btn-secondary btn-sm plans-secondary-action" type="button" id="btnPlanSearchFocus" disabled>Rechercher un emplacement</button>
          <button class="btn btn-secondary btn-sm plans-secondary-action" type="button" id="btnPlanLegend" disabled>Légende</button>
          <button class="btn btn-secondary btn-sm plans-secondary-action" type="button" id="btnPlanPrint" disabled title="Imprimer une fiche terrain propre du plan ou de la localisation surlignée">Imprimer</button>
          <button class="btn btn-secondary btn-sm plans-secondary-action" type="button" id="btnPlanPdf" disabled title="Exporter en PDF via la fenêtre d’impression optimisée A4">Exporter PDF</button>
          <button class="btn btn-secondary btn-sm" type="button" id="btnPlanCancelEdit" hidden>Quitter l’édition</button>
          <button class="btn btn-primary btn-sm" type="button" id="btnPlanSave" data-plan-admin hidden disabled>Enregistrer</button>
        </div>
      </div>

      <section class="plans-create-screen" id="planCreateScreen" <?= $isPlanCreatePage ? '' : 'hidden' ?> aria-labelledby="planCreateTitle">
        <div class="plans-create-shell">
          <header class="plans-create-hero">
            <div class="plans-create-hero__main">
              <a class="plans-create-back" href="<?= htmlspecialchars(appUrl('plans')) ?>">← Retour aux plans</a>
              <span class="plans-create-step">Configuration du plan</span>
              <h3 id="planCreateTitle">Créer un plan d’emplacement</h3>
              <p>Définissez le magasin, le type de local et ses dimensions réelles. MageStock convertit automatiquement ces mesures pour ouvrir l’éditeur de dessin à la bonne échelle.</p>
            </div>
            <aside class="plans-create-scale-card" aria-label="Échelle utilisée">
              <span class="plans-create-scale-card__label">Échelle utilisée</span>
              <strong>1 unité canvas = 1 cm</strong>
              <small>100 unités = 1 mètre réel</small>
            </aside>
          </header>

          <form class="plans-create-form" id="planCreateForm" novalidate>
            <div class="plans-create-layout">
              <div class="plans-create-main-card">
                <section class="plans-create-block" aria-labelledby="planCreateGeneralTitle">
                  <div class="plans-create-block__head">
                    <span class="plans-create-block__kicker">01</span>
                    <div>
                      <h4 id="planCreateGeneralTitle">Informations générales</h4>
                      <p>Ces informations servent à retrouver le plan et à le rattacher au bon stock.</p>
                    </div>
                  </div>

                  <div class="plans-create-grid plans-create-grid--general">
                    <label class="plans-create-field plans-create-field--wide">
                      <span>Nom du plan <em>obligatoire</em></span>
                      <input class="inp" id="planCreateName" name="name" type="text" placeholder="Ex. Dépôt principal, Atelier EPI, Local d’urgence" autocomplete="off" required>
                    </label>

                    <label class="plans-create-field">
                      <span>Magasin rattaché <em>obligatoire</em></span>
                      <select class="sel" id="planCreateWarehouse" name="warehouseId" required>
                        <option value="">Sélectionner un magasin</option>
                      </select>
                    </label>

                    <label class="plans-create-field">
                      <span>Type de plan</span>
                      <select class="sel" id="planCreateType" name="type">
                        <option value="depot">Dépôt</option>
                        <option value="entrepot">Entrepôt</option>
                        <option value="atelier">Atelier</option>
                        <option value="local">Local</option>
                        <option value="magasin">Magasin</option>
                        <option value="piece">Pièce</option>
                        <option value="zone">Zone</option>
                      </select>
                    </label>
                  </div>
                </section>

                <section class="plans-create-block" aria-labelledby="planCreateDimensionsTitle">
                  <div class="plans-create-block__head">
                    <span class="plans-create-block__kicker">02</span>
                    <div>
                      <h4 id="planCreateDimensionsTitle">Dimensions réelles</h4>
                      <p>Les valeurs sont exprimées en mètres. Exemple : 16 m × 10 m devient un canevas interne de 1600 × 1000 unités.</p>
                    </div>
                  </div>

                  <fieldset class="plans-create-size" aria-label="Formats rapides et dimensions réelles">
                    <legend>Formats rapides</legend>
                    <div class="plans-size-presets" role="group" aria-label="Formats rapides">
                      <button class="plans-size-preset" type="button" data-plan-size="compact" data-width-m="6" data-height-m="4">
                        <strong>Petit local</strong><span>6 × 4 m</span>
                      </button>
                      <button class="plans-size-preset" type="button" data-plan-size="atelier" data-width-m="10" data-height-m="6">
                        <strong>Atelier</strong><span>10 × 6 m</span>
                      </button>
                      <button class="plans-size-preset active" type="button" data-plan-size="standard" data-width-m="16" data-height-m="10">
                        <strong>Dépôt standard</strong><span>16 × 10 m</span>
                      </button>
                      <button class="plans-size-preset" type="button" data-plan-size="large" data-width-m="30" data-height-m="20">
                        <strong>Grand entrepôt</strong><span>30 × 20 m</span>
                      </button>
                      <button class="plans-size-preset plans-size-preset--custom" type="button" data-plan-size="custom">
                        <strong>Personnalisé</strong><span>Dimensions libres</span>
                      </button>
                    </div>

                    <div class="plans-create-dimensions">
                      <label>
                        <span>Longueur réelle</span>
                        <div class="plans-create-input-unit">
                          <input class="inp" id="planCreateWidth" type="number" min="1" max="200" step="0.01" value="16" inputmode="decimal" aria-describedby="planCreateWidthHelp">
                          <strong>m</strong>
                        </div>
                        <small id="planCreateWidthHelp">Distance horizontale du plan.</small>
                      </label>
                      <label>
                        <span>Largeur réelle</span>
                        <div class="plans-create-input-unit">
                          <input class="inp" id="planCreateHeight" type="number" min="1" max="200" step="0.01" value="10" inputmode="decimal" aria-describedby="planCreateHeightHelp">
                          <strong>m</strong>
                        </div>
                        <small id="planCreateHeightHelp">Profondeur verticale du plan.</small>
                      </label>
                    </div>
                  </fieldset>
                </section>

                <section class="plans-create-block plans-create-block--frame" aria-labelledby="planCreateFrameTitle">
                  <div class="plans-create-block__head">
                    <span class="plans-create-block__kicker">03</span>
                    <div>
                      <h4 id="planCreateFrameTitle">Contour au sol</h4>
                      <p>Créez automatiquement la limite du plan pour arriver dans l’éditeur avec un local déjà délimité.</p>
                    </div>
                  </div>

                  <div class="plans-create-frame">
                    <label class="plans-create-frame-toggle">
                      <input type="checkbox" id="planCreateFrame" checked>
                      <span>
                        <strong>Créer le contour du plan à l’ouverture</strong>
                        <small>Ajoute 4 segments modifiables autour du plan selon les dimensions réelles.</small>
                      </span>
                    </label>

                    <div class="plans-create-frame-grid">
                      <label>
                        <span>Type de contour</span>
                        <select class="sel" id="planCreateFrameType">
                          <option value="mur" selected>Murs périphériques</option>
                          <option value="cloison">Cloisons pleines</option>
                          <option value="cloison_grille">Cloisons grille</option>
                        </select>
                      </label>
                      <label>
                        <span>Épaisseur</span>
                        <div class="plans-create-input-unit">
                          <input class="inp" id="planCreateFrameThickness" type="number" min="6" max="45" step="1" value="22" inputmode="numeric">
                          <strong>cm</strong>
                        </div>
                      </label>
                    </div>
                  </div>
                </section>
              </div>

              <aside class="plans-create-preview-card" aria-label="Aperçu du plan">
                <div class="plans-create-preview-card__head">
                  <span class="plans-create-block__kicker">Aperçu</span>
                  <h4>Plan proportionnel</h4>
                  <p>Contrôlez la forme générale avant d’ouvrir l’éditeur.</p>
                </div>

                <div class="plans-create-preview" id="planCreatePreviewBox" aria-hidden="true">
                  <div class="plans-create-preview__grid"></div>
                  <div class="plans-create-preview__shape" id="planCreatePreviewShape">
                    <span class="plans-create-preview__label plans-create-preview__label--top" id="planCreatePreviewLong">16 m</span>
                    <span class="plans-create-preview__label plans-create-preview__label--right" id="planCreatePreviewWide">10 m</span>
                  </div>
                </div>

                <dl class="plans-create-metrics">
                  <div><dt>Surface estimée</dt><dd id="planCreateSurface">160 m²</dd></div>
                  <div><dt>Canevas interne</dt><dd id="planCreateCanvasUnits">1600 × 1000 unités</dd></div>
                  <div><dt>Repère principal</dt><dd id="planCreateGridText">1 grand carreau = 2 m</dd></div>
                  <div><dt>Précision</dt><dd id="planCreateScaleText">1 unité = 1 cm</dd></div>
                </dl>

                <div class="plans-create-help">
                  <strong>Suite du parcours</strong>
                  <ol>
                    <li>Le plan est créé et rattaché au magasin choisi.</li>
                    <li>L’éditeur s’ouvre avec murs, cloisons, ouvertures et objets.</li>
                    <li>Les éléments dessinés pourront ensuite être reliés aux emplacements MageStock.</li>
                  </ol>
                </div>
              </aside>
            </div>

            <div class="plans-create-actions">
              <a class="btn btn-secondary" href="<?= htmlspecialchars(appUrl('plans')) ?>">Annuler</a>
              <button class="btn btn-primary" type="submit" id="btnPlanCreateSubmit">Créer et ouvrir l’éditeur</button>
            </div>
          </form>
        </div>
      </section>

      <div class="plans-welcome" id="plansWelcome">
        <div class="plans-welcome__main">
          <span class="plans-welcome__icon" aria-hidden="true">⌂</span>
          <h3>Créer un plan d’emplacement</h3>
          <p>Construisez d’abord la structure du local avec murs, pièces et ouvertures, puis ajoutez les zones de stockage et reliez les éléments aux emplacements MageStock.</p>
          <div class="plans-welcome__actions">
            <button class="btn btn-primary" type="button" data-plan-action="create" data-plan-admin hidden>Créer mon premier plan</button>
            <button class="btn btn-secondary" type="button" data-plan-action="focus-search">Consulter un plan existant</button>
          </div>
        </div>
        <div class="plans-welcome__steps" aria-label="Étapes d’utilisation">
          <div><strong>1</strong><span>Créer ou ouvrir un plan</span></div>
          <div><strong>2</strong><span>Dessiner les murs par points, puis poser les ouvertures</span></div>
          <div><strong>3</strong><span>Ajouter les armoires, racks et emplacements</span></div>
          <div><strong>4</strong><span>Localiser les produits depuis leur fiche</span></div>
        </div>
      </div>

      <div class="plans-editor-rail" id="planEditorRail">
        <div class="plans-library-head" id="planLibraryHead" hidden>
          <div class="plans-library-titlebar">
            <strong>Bibliothèque d’objets</strong>
          </div>
          <div class="plans-library-search">
            <label class="sr-only" for="planComponentSearch">Rechercher un objet</label>
            <input class="inp" id="planComponentSearch" type="search" placeholder="Rechercher un objet" autocomplete="off" enterkeyhint="search">
            <button class="plans-library-filter" id="planLibraryFilter" type="button" aria-label="Filtrer la bibliothèque" aria-controls="planLibraryFilters" aria-expanded="false"><span aria-hidden="true">☷</span></button>
          </div>
          <div class="plans-library-filter-panel" id="planLibraryFilters" hidden></div>
        </div>
      <div class="plans-component-library" id="planComponentLibrary" hidden aria-label="Ajouter un élément au plan">
        <div class="plans-component-library__head">
          <div>
            <strong>Ajouter un élément</strong>
            <p>Commencez par Construire : tracez les murs par deux clics, posez les portes/fenêtres sur les murs, puis ajoutez le stockage et les liaisons MageStock.</p>
          </div>
        </div>
        <div class="plan-component-empty">Ouvrez un plan en mode édition pour afficher les composants.</div>
      </div>

      <div class="plan-location-search" id="planLocationSearchPanel" hidden>
        <div>
          <strong>Rechercher un emplacement</strong>
          <p>Tapez un code, une zone ou un libellé. Les emplacements déjà placés peuvent être centrés sur le plan.</p>
        </div>
        <div class="plan-location-search__control">
          <input class="inp" id="planLocationSearch" type="search" placeholder="Ex. Rack A, Garage B, Zone peinture…" autocomplete="off">
          <div class="plan-location-results" id="planLocationResults" aria-live="polite"></div>
        </div>
      </div>
      </div><!-- /.plans-editor-rail -->

      <div class="plans-workbench" id="plansWorkbench" hidden>
        <div class="plan-canvas-wrap" id="planCanvasWrap">
          <div class="plan-canvas-empty" id="planCanvasEmpty">
            <div>
              <strong>Plan en cours de chargement</strong><br>
              Le dessin apparaîtra ici dans quelques secondes.
            </div>
          </div>
          <div id="planCanvasHost"></div>
          <div class="plan-canvas-badge" id="planCanvasBadges" hidden></div>
        </div>

        <aside class="plan-inspector" id="planInspector" aria-label="Détails de l’élément">
          <h3>Détails de l’élément</h3>
          <p>Sélectionnez un élément sur le plan pour afficher ses informations.</p>
        </aside>
      </div>
    </section>
  </div>

</div>
