<?php
/**
 * Fichier  : views/products.php
 * Version  : 2.6.109
 * Description : Vue — Page catalogue produits — localisation produit avancée sur plan fini
 *   v2.6.17 (2026-07-08) — Correctif filtres mobiles sans clignotement.
 *   v2.6.29 (2026-07-09) — PLAN 5 : styles des boutons Voir sur le plan.
 *   v2.6.31 (2026-07-09) — Correctif : bouton plan compact, icône SVG et placement non intrusif.
 *   v2.6.39 (2026-07-09) — PLANS LOCALISATION VIEW1 : styles de la modale consultation produit/plan.
 *   v2.6.42 (2026-07-09) — PLANS LOCALISATION2 : vue rapprochée, impression terrain et rendu plan fini renforcé.
 *   v2.6.101 (2026-07-20) — Barre filtres : interactions compactes fiables et compensation du retrait au scroll.
 */
?>
<style>
/* MageStock v2.3.3 — Produits : barre de filtres utilisable au scroll + images au clic */
#pgProducts{--prod-filter-radius:18px;}
#pgProducts .prod-filters-bar{
  display:grid;
  gap:12px;
  padding:14px 16px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:var(--prod-filter-radius);
  background:linear-gradient(180deg,var(--bg-card,#fff),var(--bg-elevated,#f8fafc));
  position:sticky;
  top:0;
  z-index:70;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
  /* v2.6.9 : pas d'animation de hauteur au scroll, évite l'oscillation/flicker. */
  transition:none;
}
#pgProducts .prod-filters-bar.is-compact{
  gap:8px;
  padding:8px 10px;
  border-radius:14px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  box-shadow:0 14px 36px rgba(15,23,42,.16);
  margin-bottom:var(--prod-filter-flow-compensation,0px);
  pointer-events:auto;
  isolation:isolate;
}
[data-theme="dark"] #pgProducts .prod-filters-bar.is-compact{
  background:rgba(15,23,42,.92);
}
#pgProducts .prod-filters-bar.is-compact:not(.is-expanded) .prod-dropdowns-row,
#pgProducts .prod-filters-bar.is-compact:not(.is-expanded) .prod-actions-row,
#pgProducts .prod-filters-bar.is-compact:not(.is-expanded) .prod-filters-divider,
#pgProducts .prod-filters-bar.is-compact:not(.is-expanded) #prodBulkBar{
  display:none!important;
}
#pgProducts .prod-search-row,#pgProducts .prod-dropdowns-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
#pgProducts .prod-filters-bar.is-compact .prod-search-row{gap:8px;flex-wrap:nowrap;position:relative;z-index:2;}
#pgProducts .prod-filters-bar.is-compact .search-box{min-width:0!important;max-width:none!important;position:relative;z-index:3;pointer-events:auto;}
#pgProducts .prod-filters-bar.is-compact #prodSearch,
#pgProducts .prod-filters-bar.is-compact .prod-filter-toggle{position:relative;z-index:4;pointer-events:auto;touch-action:manipulation;}
#pgProducts .prod-dropdowns-row .form-select{min-height:44px;}
#pgProducts .prod-actions-row{padding-top:2px;}
#pgProducts .prod-filter-toggle{display:none;min-height:44px;white-space:nowrap;}
#pgProducts .prod-filters-bar.is-compact .prod-filter-toggle{display:inline-flex;}
#pgProducts .prod-filters-bar.is-expanded .prod-filter-toggle{background:var(--blue,#3b82f6);border-color:var(--blue,#3b82f6);color:#fff;}
#pgProducts .prod-filters-bar.is-compact .view-toggle{display:none;}
#pgProducts .prod-filters-bar.is-compact #prodSearch{min-height:44px;}
#pgProducts #prodBulkBar{box-shadow:0 12px 30px rgba(15,23,42,.08);}
#pgProducts .products-grid{margin-top:14px;}
#pgProducts .prod-thumb-zoomable,#pgProducts .prod-list-img-trigger{cursor:pointer!important;outline:none;}
#pgProducts .prod-thumb-zoomable:hover,#pgProducts .prod-list-img-trigger:hover{transform:none!important;scale:1!important;}
#pgProducts .prod-thumb-zoomable:focus-visible,#pgProducts .prod-list-img-trigger:focus-visible{box-shadow:0 0 0 3px var(--blue-pale,#dbeafe),0 0 0 5px var(--blue,#3b82f6)!important;}
#imgZoomOverlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:9999;padding:24px;background:rgba(15,23,42,.72);}
#imgZoomOverlay.visible{display:flex;}
#imgZoomBg{position:absolute;inset:0;}
#imgZoomImg{position:relative;z-index:1;max-width:min(92vw,980px);max-height:86vh;object-fit:contain;border-radius:18px;background:#fff;box-shadow:0 28px 70px rgba(0,0,0,.35);}
#imgZoomClose{position:fixed;z-index:2;top:18px;right:18px;min-width:44px;min-height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(15,23,42,.88);color:#fff;font-size:20px;cursor:pointer;}
@media (min-width: 1200px){
  #pgProducts .prod-filters-bar.is-compact{max-width:980px;margin-left:auto;margin-right:auto;}
}
@media (max-width: 1024px){
  #pgProducts .prod-filters-bar{top:0;}
  #pgProducts .prod-search-row .search-box{max-width:none!important;}
  #pgProducts .prod-dropdowns-row .form-select{min-width:calc(50% - 6px)!important;flex:1 1 calc(50% - 6px)!important;}
  #pgProducts #prodBulkBar{flex-wrap:wrap!important;}
  #pgProducts #prodBulkBar > div{flex-wrap:wrap!important;}
  #pgProducts #prodBulkBar .form-select{min-width:calc(50% - 6px)!important;max-width:none!important;flex:1 1 calc(50% - 6px)!important;}
}
@media (max-width: 640px){
  #pgProducts .prod-filters-bar{padding:12px;top:0;border-radius:16px;}
  #pgProducts .prod-filters-bar.is-compact{padding:12px;border-radius:16px;}
  #pgProducts .prod-search-row,#pgProducts .prod-dropdowns-row,#pgProducts .prod-actions-row{flex-direction:column;align-items:stretch;}
  #pgProducts .prod-search-row,#pgProducts .prod-filters-bar.is-compact .prod-search-row{display:grid;grid-template-columns:1fr auto;align-items:center;}
  #pgProducts .prod-filters-bar:not(.is-expanded) .prod-dropdowns-row,
  #pgProducts .prod-filters-bar:not(.is-expanded) .prod-actions-row,
  #pgProducts .prod-filters-bar:not(.is-expanded) .prod-filters-divider,
  #pgProducts .prod-filters-bar:not(.is-expanded) #prodBulkBar{display:none!important;}
  #pgProducts .view-toggle{align-self:flex-end;}
  #pgProducts .prod-filter-toggle{display:inline-flex;width:auto;min-width:92px;justify-content:center;}
  #pgProducts .prod-dropdowns-row .form-select,
  #pgProducts #prodBulkBar .form-select{min-width:100%!important;flex:1 1 100%!important;}
  #pgProducts .prod-actions-row .flex{width:100%;justify-content:stretch!important;}
  #pgProducts .prod-actions-row .flex .btn{flex:1 1 100%;min-height:44px;}
  #pgProducts .pagination-bar{gap:10px;flex-direction:column;align-items:stretch;}
  #pgProducts .pagination-controls{width:100%;justify-content:space-between;}
  #imgZoomOverlay{padding:14px;}
  #imgZoomImg{max-width:96vw;max-height:82vh;border-radius:14px;}
}
@media (prefers-reduced-motion: reduce){#pgProducts .prod-filters-bar{transition:none;}}

/* MageStock v2.3.6 — Accessibilité produits : recherche effaçable, pager compact, déclinaisons lisibles en sombre */
#pgProducts .search-box{position:relative;}
#pgProducts .search-box input{padding-right:42px!important;}
#pgProducts .search-clear-btn{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:30px;
  height:30px;
  display:none;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  border-radius:999px;
  background:transparent;
  color:var(--text-muted,#64748b);
  font-size:20px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
}
#pgProducts .search-box.has-value .search-clear-btn{display:inline-flex;}
#pgProducts .search-clear-btn:hover,
#pgProducts .search-clear-btn:focus-visible{
  color:var(--text-primary,#0f172a);
  background:var(--bg-elevated,#f1f5f9);
  border-color:var(--border,#cbd5e1);
  outline:none;
}
[data-theme="dark"] #pgProducts .search-clear-btn:hover,
[data-theme="dark"] #pgProducts .search-clear-btn:focus-visible{
  color:#f8fafc;
  background:rgba(59,130,246,.18);
  border-color:rgba(147,197,253,.45);
}
#pgProducts #prodPager.pagination-bar{
  margin:18px auto 96px!important;
  padding:12px 14px!important;
  max-width:980px!important;
  border:1px solid var(--border,#e2e8f0)!important;
  border-radius:18px!important;
  background:var(--bg-card,#fff)!important;
  box-shadow:0 12px 28px rgba(15,23,42,.08)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
}
#pgProducts #prodPager .pagination-info{font-weight:700;color:var(--text-muted,#64748b)!important;}
#pgProducts #prodPager .pagination-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}

#pgProducts .prod-plan-btn{gap:5px;white-space:nowrap;}
#pgProducts .prod-plan-ico{width:15px;height:15px;display:block;fill:currentColor;flex:0 0 auto;}
#pgProducts .pc2-location-actions{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:5px 14px 0;
  min-height:32px;
}
#pgProducts .prod-plan-card-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:auto;
  min-height:30px;
  padding:5px 10px;
  border:1px solid rgba(37,99,235,.24);
  border-radius:999px;
  background:rgba(37,99,235,.06);
  color:var(--blue,#2563eb);
  font-size:12px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
}
#pgProducts .prod-plan-card-btn:hover,#pgProducts .prod-plan-card-btn:focus-visible{border-color:rgba(37,99,235,.50);background:rgba(37,99,235,.10);box-shadow:0 5px 12px rgba(37,99,235,.10);outline:none;}
[data-theme="dark"] #pgProducts .prod-plan-card-btn{background:rgba(37,99,235,.14);border-color:rgba(96,165,250,.28);}

/* MageStock v2.6.40 — Localisation produit en consultation : plan fini premium, sans édition */
.product-plan-location-modal-shell{
  max-width:min(1180px,calc(100vw - 28px))!important;
  width:min(1180px,calc(100vw - 28px))!important;
}
.product-plan-location-modal-shell .modal-body{padding:0!important;background:linear-gradient(135deg,rgba(37,99,235,.035),rgba(248,250,252,.96));}
.product-plan-location{display:grid;gap:0;color:var(--text-primary,#0f172a);}
.product-plan-location-head{
  display:flex;justify-content:space-between;gap:18px;align-items:flex-start;
  padding:18px 20px;border-bottom:1px solid var(--border,#dbe3ee);background:var(--bg-card,#fff);
}
.product-plan-location-head span{display:block;font-size:11px;font-weight:950;letter-spacing:.09em;text-transform:uppercase;color:var(--blue,#2563eb);}
.product-plan-location-head h3{margin:4px 0 4px;font-size:22px;line-height:1.12;letter-spacing:-.03em;color:var(--text-primary,#0f172a);}
.product-plan-location-head p{margin:0;color:var(--text-muted,#64748b);font-size:13px;line-height:1.35;}
.product-plan-location-head>strong{flex:0 0 auto;max-width:280px;padding:9px 12px;border:1px solid rgba(37,99,235,.20);border-radius:12px;background:rgba(37,99,235,.08);color:var(--blue,#2563eb);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.product-plan-location-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;padding:16px;align-items:stretch;}
.product-plan-location-canvas{min-height:420px;border:1px solid var(--border,#dbe3ee);border-radius:14px;background:linear-gradient(135deg,#f8fafc,#eef4ff);padding:14px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.product-plan-location-svg{display:block;width:100%;height:auto;max-height:62vh;filter:drop-shadow(0 12px 28px rgba(15,23,42,.08));}
.ppl-stage{fill:#fff;stroke:#142238;stroke-width:2.2;vector-effect:non-scaling-stroke;}
.ppl-object-main{stroke:rgba(15,23,42,.30);stroke-width:1.35;vector-effect:non-scaling-stroke;}
.ppl-object-band{fill:rgba(255,255,255,.22);stroke:rgba(15,23,42,.22);stroke-width:1;vector-effect:non-scaling-stroke;}
.ppl-object-text{font-size:13px;font-weight:600;fill:#102034;letter-spacing:-.01em;pointer-events:none;}
.ppl-highlight{fill:rgba(250,204,21,.16);stroke:#f59e0b;stroke-width:4;stroke-dasharray:14 8;vector-effect:non-scaling-stroke;}
.ppl-pin path{fill:#ef4444;stroke:#fff;stroke-width:2;filter:drop-shadow(0 8px 12px rgba(239,68,68,.24));}
.ppl-pin circle{fill:#fff;}
.product-plan-location-info{display:grid;grid-template-columns:1fr;gap:10px;align-content:start;}
.product-plan-location-info section{border:1px solid var(--border,#dbe3ee);border-radius:14px;padding:13px 14px;background:var(--bg-card,#fff);box-shadow:0 10px 22px rgba(15,23,42,.04);}
.product-plan-location-info span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted,#64748b);font-weight:950;}
.product-plan-location-info strong{display:block;margin-top:4px;font-size:15px;line-height:1.2;color:var(--text-primary,#0f172a);word-break:break-word;}
.product-plan-location-info em{display:block;margin-top:3px;font-size:12px;font-style:normal;color:var(--text-muted,#64748b);}
.product-plan-empty{display:grid;gap:12px;color:var(--text-primary,#0f172a);}
.product-plan-empty h3{margin:0;font-size:20px;}
.product-plan-empty p{margin:0;color:var(--text-muted,#64748b);line-height:1.45;}
.product-plan-empty ul{display:grid;gap:8px;margin:0;padding:0;list-style:none;}
.product-plan-empty li{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--border,#dbe3ee);border-radius:12px;background:var(--bg-elevated,#f8fafc);}
.product-plan-empty li span{color:var(--text-muted,#64748b);font-size:12px;}
.product-plan-empty-note{padding:12px;border-radius:12px;border:1px dashed rgba(37,99,235,.35);background:rgba(37,99,235,.06);color:var(--text-muted,#64748b);font-size:13px;line-height:1.4;}
[data-theme="dark"] .product-plan-location-modal-shell .modal-body{background:linear-gradient(135deg,rgba(15,23,42,.98),rgba(30,41,59,.92));}
[data-theme="dark"] .product-plan-location-head,[data-theme="dark"] .product-plan-location-info section{background:#0f172a;border-color:rgba(148,163,184,.22);}
[data-theme="dark"] .product-plan-location-canvas{background:linear-gradient(135deg,#0b1220,#111827);border-color:rgba(148,163,184,.24);}
[data-theme="dark"] .ppl-stage{fill:#111827;stroke:rgba(226,232,240,.46);}
[data-theme="dark"] .ppl-object-main{stroke:rgba(226,232,240,.24);}
[data-theme="dark"] .ppl-object-band{fill:rgba(255,255,255,.14);stroke:rgba(226,232,240,.18);}
[data-theme="dark"] .ppl-object-text{fill:#f8fafc;}
[data-theme="dark"] .product-plan-empty li{background:#0f172a;border-color:rgba(148,163,184,.22);}
@media (max-width:900px){
  .product-plan-location-modal-shell{width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;}
  .product-plan-location-grid{grid-template-columns:1fr;padding:12px;gap:12px;}
  .product-plan-location-canvas{min-height:360px;padding:10px;}
  .product-plan-location-info{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .product-plan-location-head{display:grid;padding:14px;}
  .product-plan-location-head h3{font-size:19px;}
  .product-plan-location-head>strong{max-width:none;width:100%;}
  .product-plan-location-canvas{min-height:300px;align-items:flex-start;}
  .product-plan-location-svg{max-height:46vh;}
  .product-plan-location-info{grid-template-columns:1fr;}
  .product-plan-location-modal-shell .modal-footer{display:grid!important;grid-template-columns:1fr;gap:8px;}
  .product-plan-location-modal-shell .modal-footer .btn{width:100%;min-height:44px;}
}


/* MageStock v2.6.40 — PLANS DESIGN1 : lecture produit façon plan fini */
.product-plan-location-modal-shell{max-width:min(1280px,calc(100vw - 24px))!important;width:min(1280px,calc(100vw - 24px))!important;}
.product-plan-location-modal-shell .modal-body{background:linear-gradient(135deg,rgba(241,245,249,.98),rgba(255,255,255,.98))!important;}
.product-plan-location-head{border-bottom-color:rgba(148,163,184,.28)!important;box-shadow:0 1px 0 rgba(15,23,42,.02);}
.product-plan-location-head>strong{border-radius:10px!important;background:linear-gradient(135deg,rgba(37,99,235,.10),rgba(37,99,235,.04))!important;}
.product-plan-location-grid{grid-template-columns:minmax(0,1fr) 340px!important;gap:18px!important;}
.product-plan-location-canvas{background:linear-gradient(135deg,#f8fafc,#eef4ff)!important;border-color:rgba(100,116,139,.28)!important;border-radius:10px!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.72),0 18px 42px rgba(15,23,42,.06);}
.product-plan-location-svg{filter:drop-shadow(0 16px 26px rgba(15,23,42,.10))!important;}
.ppl-stage{fill:#fff!important;stroke:#101827!important;stroke-width:2.2!important;vector-effect:non-scaling-stroke;}
.ppl-grid{opacity:.72;}
.ppl-grid-major{opacity:.62;}
.ppl-object-main{stroke:rgba(15,23,42,.28)!important;stroke-width:1.25!important;vector-effect:non-scaling-stroke;}
.ppl-object-text{font-size:10px!important;font-weight:500!important;fill:#111827!important;letter-spacing:-.01em;}
.ppl-highlight{fill:rgba(245,158,11,.10)!important;stroke:#f59e0b!important;stroke-width:3.2!important;stroke-dasharray:none!important;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 9px rgba(245,158,11,.22));}
.ppl-pin path{fill:#dc2626!important;stroke:#fff!important;stroke-width:2!important;filter:drop-shadow(0 8px 14px rgba(220,38,38,.24));}
.product-plan-location-info{gap:12px!important;}
.product-plan-location-info section{border-radius:10px!important;border-color:rgba(148,163,184,.26)!important;box-shadow:0 12px 24px rgba(15,23,42,.045)!important;}
.product-plan-location-info span{font-size:9.5px!important;}
.product-plan-location-info strong{font-size:14px!important;}
[data-theme="dark"] .product-plan-location-modal-shell .modal-body{background:linear-gradient(135deg,rgba(15,23,42,.98),rgba(30,41,59,.94))!important;}
[data-theme="dark"] .ppl-stage{fill:#0f172a!important;stroke:rgba(226,232,240,.48)!important;}
[data-theme="dark"] .ppl-grid,[data-theme="dark"] .ppl-grid-major{opacity:.36;}
[data-theme="dark"] .ppl-object-main{stroke:rgba(241,245,249,.25)!important;}
[data-theme="dark"] .ppl-object-text{fill:#f8fafc!important;}
@media (max-width:900px){.product-plan-location-grid{grid-template-columns:1fr!important}.product-plan-location-info{grid-template-columns:repeat(2,minmax(0,1fr))!important}.product-plan-location-canvas{min-height:360px!important}}
@media (max-width:640px){.product-plan-location-info{grid-template-columns:1fr!important}.product-plan-location-canvas{min-height:300px!important}}

#pgProducts #prodPager .pagination-btn{min-height:42px;border-radius:12px;}
#pgProducts #prodPager #prodPageSize{min-height:42px;border-radius:12px;}
[data-theme="dark"] #pgProducts #prodPager.pagination-bar{
  background:#111c2e!important;
  border-color:rgba(148,163,184,.22)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.28)!important;
}
[data-theme="dark"] #pgProducts #prodPager .pagination-info{color:#cbd5e1!important;}
@media (max-width: 760px){
  #pgProducts #prodPager.pagination-bar{max-width:none!important;margin:14px 0 92px!important;align-items:stretch!important;}
}

/* Lisibilité assistant déclinaisons, notamment thème sombre */
.variant-wizard{color:var(--text-primary,#0f172a)!important;}
.variant-wizard .variant-parent-card,
.variant-wizard .variant-values-panel,
.variant-wizard .variant-preview-panel{
  background:var(--bg-card,#fff)!important;
  color:var(--text-primary,#0f172a)!important;
  border-color:var(--border,#e2e8f0)!important;
}
.variant-wizard .variant-muted{color:var(--text-muted,#64748b)!important;}
.variant-wizard .vd-attr{padding:10px;border:1px solid var(--border,#e2e8f0);border-radius:12px;background:var(--bg-elevated,#f8fafc);}
.variant-wizard .variant-chip{
  background:var(--bg-card,#fff)!important;
  color:var(--text-primary,#0f172a)!important;
  border-color:var(--border,#cbd5e1)!important;
  min-height:34px;
}
.variant-wizard .variant-chip input{width:18px;height:18px;accent-color:var(--blue,#3b82f6);}
.variant-wizard .inp,.variant-wizard .sel{
  background:var(--bg-card,#fff)!important;
  color:var(--text-primary,#0f172a)!important;
  border-color:var(--border,#cbd5e1)!important;
}
.variant-wizard .inp::placeholder{color:var(--text-muted,#64748b)!important;opacity:.85;}
.variant-wizard #vdPreview code{color:var(--blue,#2563eb);background:var(--bg-elevated,#f1f5f9);padding:2px 6px;border-radius:8px;}
[data-theme="dark"] .variant-wizard .variant-parent-card,
[data-theme="dark"] .variant-wizard .variant-values-panel,
[data-theme="dark"] .variant-wizard .variant-preview-panel{
  background:#111c2e!important;
  border-color:rgba(148,163,184,.25)!important;
  color:#f8fafc!important;
}
[data-theme="dark"] .variant-wizard .variant-muted{color:#cbd5e1!important;}
[data-theme="dark"] .variant-wizard .vd-attr{background:#0b1220!important;border-color:rgba(148,163,184,.24)!important;}
[data-theme="dark"] .variant-wizard .variant-chip{
  background:#17243a!important;
  color:#f8fafc!important;
  border-color:rgba(147,197,253,.38)!important;
}
[data-theme="dark"] .variant-wizard .inp,
[data-theme="dark"] .variant-wizard .sel{
  background:#0b1220!important;
  color:#f8fafc!important;
  border-color:rgba(147,197,253,.35)!important;
}
[data-theme="dark"] .variant-wizard .inp::placeholder{color:#94a3b8!important;}
[data-theme="dark"] .variant-wizard #vdPreview code{background:#0b1220;color:#93c5fd;}
@media (max-width: 760px){
  .variant-wizard .variant-wizard-grid{grid-template-columns:1fr!important;}
  .variant-wizard .variant-values-panel,.variant-wizard .variant-preview-panel{padding:10px!important;}
}


/* MageStock v2.6.42 — PLANS LOCALISATION2 : vue avancée plan fini + impression terrain */
.product-plan-location--advanced .product-plan-location-grid{grid-template-columns:minmax(0,1fr) 360px!important;gap:18px!important;align-items:start!important;}
.product-plan-location-mapset{display:grid;grid-template-rows:auto auto;gap:14px;min-width:0;}
.product-plan-location-canvas,.product-plan-location-focus{position:relative;min-width:0;}
.product-plan-location-canvas-title,.product-plan-location-focus>div:first-child{position:absolute;z-index:2;left:12px;top:12px;display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid rgba(148,163,184,.26);border-radius:999px;background:rgba(255,255,255,.90);backdrop-filter:blur(8px);box-shadow:0 8px 18px rgba(15,23,42,.07);font-size:11px;color:var(--text-muted,#64748b);}
.product-plan-location-canvas-title strong,.product-plan-location-focus>div:first-child strong{color:var(--text-primary,#0f172a);font-weight:950;}
.product-plan-location-focus{min-height:190px;border:1px solid rgba(245,158,11,.36);border-radius:10px;background:linear-gradient(135deg,#fff7ed,#fffbeb);padding:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.65),0 14px 30px rgba(245,158,11,.10);}
.product-plan-location-focus .product-plan-location-svg{max-height:220px!important;filter:drop-shadow(0 10px 20px rgba(15,23,42,.10))!important;}
.product-plan-location-route{grid-column:1/-1;border-color:rgba(245,158,11,.30)!important;background:linear-gradient(135deg,rgba(255,247,237,.95),rgba(255,255,255,.95))!important;}
.product-plan-location-alt{display:grid!important;gap:8px;border:1px dashed rgba(37,99,235,.28)!important;background:rgba(37,99,235,.045)!important;}
.product-plan-location-alt button{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;border:1px solid rgba(148,163,184,.24);border-radius:10px;background:var(--bg-card,#fff);padding:9px 10px;text-align:left;color:var(--text-primary,#0f172a);cursor:pointer;}
.product-plan-location-alt button:hover,.product-plan-location-alt button:focus-visible{border-color:rgba(37,99,235,.44);box-shadow:0 8px 18px rgba(37,99,235,.08);outline:none;}
.product-plan-location-alt button strong{font-size:12px!important;margin:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.product-plan-location-alt button em{font-size:11px!important;margin:0!important;white-space:nowrap;}
.ppl-highlight-pulse{fill:rgba(245,158,11,.08);stroke:#f59e0b;stroke-width:1.6;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 18px rgba(245,158,11,.28));}
.ppl-callout rect{fill:#fff7ed;stroke:#f59e0b;stroke-width:1.4;vector-effect:non-scaling-stroke;filter:drop-shadow(0 8px 16px rgba(245,158,11,.16));}
.ppl-callout path{stroke:#f59e0b;stroke-width:2;vector-effect:non-scaling-stroke;}
.ppl-callout text{font-size:12px;font-weight:800;fill:#92400e;letter-spacing:-.01em;}
.product-plan-location-svg--focus .ppl-object:not(.is-highlighted){opacity:.34;}
.product-plan-location-svg--focus .ppl-grid,.product-plan-location-svg--focus .ppl-grid-major{opacity:.46;}
[data-theme="dark"] .product-plan-location-canvas-title,[data-theme="dark"] .product-plan-location-focus>div:first-child{background:rgba(15,23,42,.88);border-color:rgba(148,163,184,.22);}
[data-theme="dark"] .product-plan-location-focus{background:linear-gradient(135deg,rgba(69,26,3,.52),rgba(15,23,42,.92));border-color:rgba(245,158,11,.32);}
[data-theme="dark"] .product-plan-location-route{background:linear-gradient(135deg,rgba(69,26,3,.34),rgba(15,23,42,.78))!important;border-color:rgba(245,158,11,.26)!important;}
[data-theme="dark"] .product-plan-location-alt{background:rgba(37,99,235,.09)!important;border-color:rgba(96,165,250,.22)!important;}
[data-theme="dark"] .product-plan-location-alt button{background:rgba(15,23,42,.76);border-color:rgba(148,163,184,.22);}
[data-theme="dark"] .ppl-callout rect{fill:#451a03;stroke:#f59e0b;}
[data-theme="dark"] .ppl-callout text{fill:#fed7aa;}
@media (max-width:980px){.product-plan-location--advanced .product-plan-location-grid{grid-template-columns:1fr!important}.product-plan-location-mapset{grid-template-columns:1fr}.product-plan-location-info{grid-template-columns:repeat(2,minmax(0,1fr))!important}.product-plan-location-route,.product-plan-location-alt{grid-column:1/-1!important}}
@media (max-width:640px){.product-plan-location-canvas-title,.product-plan-location-focus>div:first-child{position:static;margin-bottom:8px;display:flex;justify-content:space-between;border-radius:10px}.product-plan-location-focus{min-height:160px;display:block}.product-plan-location-focus .product-plan-location-svg{max-height:180px!important}.ppl-callout{display:none}}


/* v2.6.67 — Localisation produit unifiée avec le nouveau viewer Plans */
.product-plan-location-modal-shell{max-width:min(1480px,calc(100vw - 28px))!important;width:min(1480px,calc(100vw - 28px))!important;}
.product-plan-location-modal-shell .modal-body{padding:0!important;background:#eef3f9!important;}
.product-plan-location-modal-shell .modal-footer{border-top:1px solid #dbe3ee!important;background:#fff!important;padding:12px 14px!important;}
.product-plan-location{background:#eef3f9!important;color:#0f172a!important;}
.product-plan-location-head{padding:16px 18px!important;background:linear-gradient(180deg,#fff,#f8fafc)!important;border-bottom:1px solid #dbe3ee!important;}
.product-plan-location-head span{font-size:10px!important;letter-spacing:.10em!important;color:#2563eb!important;font-weight:950!important;}
.product-plan-location-head h3{font-size:22px!important;letter-spacing:-.03em!important;color:#0f172a!important;margin:3px 0!important;}
.product-plan-location-head p{font-size:13px!important;color:#64748b!important;max-width:860px!important;}
.product-plan-location-head>strong{border-radius:4px!important;background:#eff6ff!important;border-color:#bfdbfe!important;color:#1d4ed8!important;font-weight:950!important;}
.product-plan-location-grid{grid-template-columns:minmax(0,1fr) 320px!important;gap:16px!important;padding:16px!important;align-items:start!important;}
.product-plan-location-mapset{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;}
.product-plan-location-focus{display:none!important;}
.product-plan-location-canvas{min-height:560px!important;border-radius:6px!important;border:1px solid #cbd5e1!important;background:linear-gradient(180deg,#f6f9fc,#edf3f9)!important;padding:12px!important;display:grid!important;align-items:center!important;justify-items:center!important;overflow:hidden!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.65)!important;}
.product-plan-location-canvas-title{position:absolute!important;left:28px;top:28px;z-index:2;border-radius:999px;background:rgba(255,255,255,.88);border:1px solid #dbe3ee;padding:8px 11px!important;box-shadow:0 8px 20px rgba(15,23,42,.06);}
.product-plan-location-canvas-title strong{font-size:12px!important;color:#0f172a!important;}.product-plan-location-canvas-title span{font-size:11px!important;color:#64748b!important;}
.product-plan-location-svg{display:block!important;width:100%!important;height:auto!important;max-height:70vh!important;background:transparent!important;border:0!important;filter:drop-shadow(0 12px 30px rgba(15,23,42,.08))!important;}
.ppl-shell{fill:transparent!important}.ppl-stage{fill:#fffdf7!important;stroke:#111827!important;stroke-width:2.2!important;vector-effect:non-scaling-stroke!important}.ppl-grid{opacity:.58!important}.ppl-grid-major{opacity:.62!important}.ppl-ruler-tick{stroke:#94a3b8!important;stroke-width:1!important;vector-effect:non-scaling-stroke!important}.ppl-ruler-text{font-size:12px!important;font-weight:850!important;fill:#334155!important;paint-order:stroke;stroke:#f8fafc;stroke-width:3!important;}
.ppl-wall-main{stroke:#334155;stroke-linecap:butt;vector-effect:non-scaling-stroke}.ppl-wall--solid .ppl-wall-main{stroke:#1f2937}.ppl-wall--partition .ppl-wall-main{stroke:#718096}.ppl-wall-axis{stroke:rgba(255,255,255,.45);stroke-width:1;stroke-dasharray:10 8;vector-effect:non-scaling-stroke}.ppl-wall-gridline{stroke:#94a3b8;stroke-width:3;stroke-linecap:butt;vector-effect:non-scaling-stroke}.ppl-wall-gridbar{stroke:#64748b;stroke-width:1.1;vector-effect:non-scaling-stroke}
.ppl-object-main{stroke:rgba(15,23,42,.34)!important;stroke-width:1.25!important;vector-effect:non-scaling-stroke!important;}.ppl-object-text{font-size:11px!important;font-weight:750!important;fill:#0f172a!important;paint-order:stroke;stroke:rgba(255,255,255,.82);stroke-width:3;pointer-events:none!important;}.ppl-highlight-pulse{fill:rgba(22,163,74,.08)!important;stroke:#22c55e!important;stroke-width:2!important;vector-effect:non-scaling-stroke!important}.ppl-highlight{fill:rgba(34,197,94,.10)!important;stroke:#16a34a!important;stroke-width:3!important;stroke-dasharray:none!important;vector-effect:non-scaling-stroke!important;filter:drop-shadow(0 0 12px rgba(22,163,74,.25))}.ppl-pin path{fill:#ef4444!important;stroke:#fff!important;stroke-width:2!important;filter:drop-shadow(0 8px 12px rgba(239,68,68,.24))}.ppl-pin circle{fill:#fff!important}
.ppl-opening-hit{fill:transparent!important;stroke:transparent!important}.ppl-opening-jamb{stroke:#111827;stroke-width:2;stroke-linecap:square;vector-effect:non-scaling-stroke}.ppl-door-leaf{stroke:#111827;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}.ppl-door-arc{fill:none;stroke:#334155;stroke-width:1.1;vector-effect:non-scaling-stroke}.ppl-window-line{stroke:#334155;stroke-width:1.15;vector-effect:non-scaling-stroke}.ppl-window-mullion{stroke:#64748b;stroke-width:.9;vector-effect:non-scaling-stroke}.ppl-passage-line{stroke:#94a3b8;stroke-width:1.5;stroke-dasharray:8 6;vector-effect:non-scaling-stroke}
.product-plan-location-info{display:grid!important;gap:10px!important;align-content:start!important;}.product-plan-location-info section{border-radius:6px!important;border:1px solid #dbe3ee!important;background:#fff!important;box-shadow:none!important;padding:13px 14px!important;}.product-plan-location-info span{font-size:10px!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:#64748b!important;font-weight:950!important;}.product-plan-location-info strong{font-size:14px!important;color:#0f172a!important;line-height:1.2!important;}.product-plan-location-info em{font-size:12px!important;color:#64748b!important;}.product-plan-location-route{border-color:#bfdbfe!important;background:#eff6ff!important;}
@media(max-width:1100px){.product-plan-location-grid{grid-template-columns:1fr!important}.product-plan-location-canvas{min-height:480px!important}.product-plan-location-info{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:680px){.product-plan-location-head{display:grid!important}.product-plan-location-info{grid-template-columns:1fr!important}.product-plan-location-canvas{min-height:340px!important;padding:8px!important}.product-plan-location-svg{max-height:54vh!important}}

</style>

<div class="products" id="pgProducts">

    <!-- Filters Bar — 2 lignes sur tablette, 1 ligne desktop -->
    <div class="filters-bar prod-filters-bar">
        <!-- Ligne 1 : Recherche + vue toggle -->
        <div class="filters-section prod-search-row">
            <div class="search-box" style="flex:1;min-width:200px;max-width:400px">
                <svg class="search-box-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
                </svg>
                <input type="text" id="prodSearch" placeholder="Rechercher produit, SKU, code-barres..." aria-label="Rechercher un produit">
                <button type="button" class="search-clear-btn" id="prodSearchClear" aria-label="Effacer la recherche" title="Effacer la recherche">×</button>
            </div>
            <button type="button" class="btn btn-secondary btn-sm prod-filter-toggle" id="prodFilterToggle" aria-expanded="false" aria-controls="prodFiltersExtra">
                Filtres
            </button>
            <div class="view-toggle" style="flex-shrink:0">
                <button class="view-toggle-btn active" id="viewGrid" title="Vue grille">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/>
                        <rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>
                    </svg>
                </button>
                <button class="view-toggle-btn" id="viewList" title="Vue liste">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/>
                        <line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/>
                        <line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>
                    </svg>
                </button>
            </div>
        </div>

        <div class="filters-divider prod-filters-divider"></div>

        <!-- Ligne 2 : Filtres dropdowns -->
        <div class="filters-section prod-dropdowns-row" id="prodFiltersExtra">
            <select id="prodWhFilter" class="form-select" style="min-width:150px;flex:1">
                <option value="">Tous les magasins</option>
            </select>
            <select id="prodCatFilter" class="form-select" style="min-width:150px;flex:1">
                <option value="">Toutes catégories</option>
            </select>
            <select id="prodBrandFilter" class="form-select" style="min-width:130px;flex:1">
                <option value="">Toutes marques</option>
            </select>
        </div>

        <div class="filters-divider prod-filters-divider"></div>

        <!-- Ligne 3 : Compteur + actions (ergonomie) -->
        <div class="filters-section prod-actions-row" style="display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap">
            <span class="results-count" id="prodCount">0 produit(s)</span>

            <?php if(hasAdminAccess(currentUser())): ?>
            <div class="flex gap-2 flex-wrap" style="justify-content:flex-end">
                <!-- Toggle sélection multiple (visible seulement en vue liste) -->
                <button class="btn btn-ghost btn-sm" id="btnToggleBulk" style="display:none" title="Activer/désactiver la sélection multiple">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
                        <rect x="3" y="3" width="5" height="5" rx="1"/><rect x="3" y="10" width="5" height="5" rx="1"/><rect x="3" y="17" width="5" height="5" rx="1"/>
                        <line x1="12" y1="5.5" x2="21" y2="5.5"/><line x1="12" y1="12.5" x2="21" y2="12.5"/><line x1="12" y1="19.5" x2="21" y2="19.5"/>
                    </svg>
                    Sélection
                </button>
                <button class="btn btn-secondary" id="btnStockEntry">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
                        <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
                        <polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
                    </svg>
                    Entrée de stock
                </button>
                <button class="btn btn-primary" id="btnNewProd">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
                        <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
                    </svg>
                    Nouveau produit
                </button>
                <button class="btn btn-secondary" id="btnImportCSV" title="Importer des produits depuis un fichier CSV">
                    📂 Import CSV
                </button>
            </div>
            <?php endif; ?>
        </div>

        <!-- Barre d'édition de masse (affichée au clic sur "Sélection") -->
        <div id="prodBulkBar" style="display:none;margin-top:10px;background:var(--blue-pale,#eff6ff);border:1.5px solid var(--blue,#3b82f6);border-radius:var(--r-lg,10px);padding:12px 16px;align-items:center;gap:12px;flex-wrap:nowrap;overflow-x:auto">
            <span style="font-weight:700;color:var(--blue,#3b82f6)" id="prodBulkCount">0 sélectionné(s)</span>
            <div style="flex:1;display:flex;gap:8px;flex-wrap:nowrap;align-items:center">
                <!-- ① Magasin en premier — pilote catégorie et marque -->
                <select id="bulkWh" class="form-select" style="min-width:170px;max-width:230px" title="Choisir un magasin pour filtrer les catégories et marques">
                    <option value="">— Changer magasin —</option>
                </select>
                <!-- ①bis Emplacement (dépend du magasin) -->
                <select id="bulkLoc" class="form-select" style="min-width:170px;max-width:230px" title="Choisir un magasin d'abord pour lister les emplacements">
                    <option value="">— Changer emplacement —</option>
                </select>
                <!-- ② Catégorie filtrée selon le magasin -->
                <select id="bulkCat" class="form-select" style="min-width:170px;max-width:230px" title="Choisir un magasin d'abord pour filtrer les catégories">
                    <option value="">— Changer catégorie —</option>
                </select>
                <!-- ③ Marque filtrée selon le magasin + catégorie -->
                <select id="bulkBrand" class="form-select" style="min-width:170px;max-width:230px" title="Choisir une catégorie d'abord pour filtrer les marques">
                    <option value="">— Changer marque —</option>
                </select>
                <button class="btn btn-primary btn-sm" id="btnBulkApply">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
                        <path d="M20 6L9 17l-5-5"/>
                    </svg>
                    Appliquer
                </button>
                <button class="btn btn-secondary btn-sm" id="btnBulkPrint" style="display:none" disabled title="Créer un PDF A4 avec les produits sélectionnés">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
                        <path d="M6 9V2h12v7"/><path d="M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2"/><path d="M6 14h12v8H6z"/>
                    </svg>
                    Imprimer
                </button>
                <button class="btn btn-ghost btn-sm" id="btnBulkCancel">Annuler</button>
            </div>
        </div>
    </div>

    <!-- Grille produits -->
    <div class="products-grid" id="prodGrid"></div>

    <!-- Vue liste (cachée par défaut) -->


    <!-- Toggle activation des cases -->
    <div class="flex items-center gap-2 mb-2" id="prodBulkToggleRow" style="display:none!important">
        <!-- géré par JS via btnToggleBulk -->
    </div>

    <div class="card" id="prodTableWrap" style="display:none">
        <div class="table-container">
            <table class="data-table" id="prodTable">
                <thead>
                    <tr>
                        <th id="thCheck" class="cell-check" style="width:36px;display:none">
                            <input type="checkbox" id="checkAll" title="Tout sélectionner">
                        </th>
                        <th data-sort="name">Produit</th>
                        <th data-sort="sku">SKU</th>
                        <th data-sort="__wh">Magasin</th>
                        <th data-sort="__loc">Emplacement</th>
                        <th data-sort="category">Catégorie</th>
                        <th data-sort="brand">Marque</th>
                        <th class="cell-number" data-sort="__stock">Stock</th>
                        <th class="cell-number" data-sort="__price">Prix</th>
                        <th>Statut</th>
                        <th class="cell-actions"></th>
                    </tr>
                </thead>
                <tbody id="prodTableBody"></tbody>
            </table>
        </div>
    </div>

    <!-- Pagination -->
    <div class="pagination-bar" id="prodPager">
        <div class="pagination-info" id="prodPageInfo">Page 1 / 1</div>
        <div class="pagination-controls">
            <button class="pagination-btn" id="prodPrev" disabled>
                <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.5">
                    <polyline points="15 18 9 12 15 6"/>
                </svg>
                Précédent
            </button>
            <button class="pagination-btn" id="prodNext">
                Suivant
                <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.5">
                    <polyline points="9 18 15 12 9 6"/>
                </svg>
            </button>
            <select id="prodPageSize" class="form-select" style="width:auto">
                <option value="48">48 / page</option>
                <option value="96">96 / page</option>
                <option value="162">162 / page</option>
            </select>
        </div>
    </div>
</div>
