/* =========================================================
   PLAN D'IMPLANTATION MAGASIN
   Réutilise les variables de thème définies dans style.css.
   ========================================================= */

/* Couleurs des types d'éléments merchandising */
:root{
  --el-tg:      #ff7a3d;   /* tête de gondole */
  --el-plot:    #ffb020;   /* plot */
  --el-gondole: #4b93ff;   /* gondole / rayon */
  --el-promo:   #e5484d;   /* zone promo */
  --el-caisse:  #30a46c;   /* caisse */
  --el-entree:  #8b5cf6;   /* entrée */
  --el-reserve: #7c8194;   /* réserve */
  --sol-mur:    #3a3f4d;   /* mur */
  --sol-allee:  #23262f;   /* allée */
  --sol-zone:   #2c2f26;   /* zone au sol */
}

.plan-nom-input{
  background:var(--panel-2); border:1px solid var(--panel-border);
  color:var(--ink); border-radius:var(--radius-sm);
  padding:8px 12px; font-size:13px; min-width:220px; font-family:inherit;
}
.plan-nom-input:focus{ outline:none; border-color:var(--amber); }

/* -------- Disposition en 3 colonnes -------- */
.impl-layout{
  display:grid;
  grid-template-columns:230px 1fr 300px;
  gap:14px;
  padding:14px;
  align-items:start;
  min-height:calc(100vh - 62px);
}

/* -------- Barre d'outils gauche -------- */
.impl-tools{
  display:flex; flex-direction:column; gap:14px;
  position:sticky; top:14px;
}
.tool-group{
  background:var(--panel); border:1px solid var(--panel-border);
  border-radius:var(--radius); padding:12px;
}
.tool-group-title{
  font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--amber); font-weight:700; margin-bottom:6px;
}
.tool-hint{ font-size:11px; color:var(--ink-faint); margin:0 0 9px; line-height:1.4; }
.tool-btns{ display:flex; flex-direction:column; gap:5px; }
.tool-btn{
  display:flex; align-items:center; gap:9px;
  background:var(--panel-2); border:1px solid var(--panel-border);
  color:var(--ink-dim); border-radius:var(--radius-sm);
  padding:8px 10px; font-size:12.5px; cursor:pointer; font-family:inherit;
  text-align:left; transition:.14s ease;
}
.tool-btn:hover{ color:var(--ink); border-color:#454b5e; }
.tool-btn.active{
  background:var(--amber); color:var(--amber-ink); border-color:var(--amber);
  font-weight:600;
}
.tool-ico{ width:18px; text-align:center; flex:none; font-size:14px; }
.tool-ico.sw-mur, .tool-ico.sw-allee, .tool-ico.sw-zone{
  height:14px; border-radius:3px;
}
.tool-ico.sw-mur{ background:var(--sol-mur); border:1px solid #4a5060; }
.tool-ico.sw-allee{ background:var(--sol-allee); border:1px solid #3a3f4d; }
.tool-ico.sw-zone{ background:var(--sol-zone); border:1px solid #414731; }

/* Pastilles de couleur des éléments */
.el-pastille{
  width:16px; height:16px; border-radius:4px; flex:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);
}
.tool-btn.active .el-pastille{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.4); }
.el-tg{ background:var(--el-tg); }
.el-plot{ background:var(--el-plot); }
.el-gondole{ background:var(--el-gondole); }
.el-promo{ background:var(--el-promo); }
.el-caisse{ background:var(--el-caisse); }
.el-entree{ background:var(--el-entree); }
.el-reserve{ background:var(--el-reserve); }

/* Liste des plans enregistrés */
.plans-list{ display:flex; flex-direction:column; gap:5px; max-height:230px; overflow:auto; }
.plan-item{
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  background:var(--panel-2); border:1px solid var(--panel-border);
  border-radius:var(--radius-sm); padding:7px 9px;
}
.plan-item-info{ min-width:0; cursor:pointer; flex:1; }
.plan-item-info b{ font-size:12.5px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.plan-item-info span{ font-size:10.5px; color:var(--ink-faint); }
.plan-item.actif{ border-color:var(--amber); }

/* -------- Scène (grille) -------- */
.impl-stage{
  background:var(--panel); border:1px solid var(--panel-border);
  border-radius:var(--radius); padding:12px;
  display:flex; flex-direction:column; gap:10px;
  min-width:0;
}
.impl-stage-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap;
}
.stage-bar-left, .stage-bar-right{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#zoomLabel{ font-size:12px; color:var(--ink-dim); font-family:var(--font-mono); min-width:48px; text-align:center; }
.bar-sep{ width:1px; height:20px; background:var(--panel-border); margin:0 2px; }
.grille-taille{
  display:flex; align-items:center; gap:4px;
  background:var(--panel-2); border:1px solid var(--panel-border);
  border-radius:var(--radius-sm); padding:3px 7px;
}
.grille-taille input{
  width:38px; background:transparent; border:none; color:var(--ink);
  font-size:12px; font-family:var(--font-mono); text-align:center; padding:2px;
}
.grille-taille input:focus{ outline:none; }
.grille-taille span{ font-size:11px; color:var(--ink-faint); }
.mini-check{ display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--ink-dim); cursor:pointer; }
.mini-check input{ width:14px; height:14px; accent-color:var(--amber); }

.impl-canvas-wrap{
  overflow:auto;
  background:
    var(--bg-workbench);
  border:1px solid var(--panel-border);
  border-radius:var(--radius-sm);
  padding:20px;
  min-height:420px;
  max-height:calc(100vh - 210px);
}
/* Le plan lui-même : grille de cellules */
.impl-canvas{
  position:relative;
  margin:0 auto;
  background:#191c23;
  box-shadow:0 6px 30px rgba(0,0,0,.35);
  --cell:26px;
}
.impl-canvas.avec-grille{
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:var(--cell) var(--cell);
}

/* Cellules de sol dessinées (murs, allées, zones) */
.sol-cell{ position:absolute; width:var(--cell); height:var(--cell); }
.sol-cell.mur{ background:var(--sol-mur); }
.sol-cell.allee{ background:var(--sol-allee); }
.sol-cell.zone{ background:var(--sol-zone); }

/* Éléments merchandising posés */
.impl-element{
  position:absolute;
  border-radius:6px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; overflow:hidden;
  border:2px solid rgba(0,0,0,.28);
  box-shadow:0 2px 8px rgba(0,0,0,.3);
  transition:box-shadow .12s ease, transform .06s ease;
  user-select:none;
}
.impl-element:hover{ box-shadow:0 4px 14px rgba(0,0,0,.45); }
.impl-element.selection{ outline:2px solid var(--amber); outline-offset:1px; z-index:5; }
.impl-element .el-nom{
  font-size:10px; font-weight:700; color:#fff; line-height:1.05;
  text-align:center; padding:1px 4px; text-shadow:0 1px 2px rgba(0,0,0,.5);
  overflow:hidden; max-width:100%;
  /* Deux lignes maximum, puis coupure nette : mieux qu'un texte qui déborde */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow-wrap:anywhere;
}
.impl-element .el-compte{
  font-size:9px; color:rgba(255,255,255,.85);
  background:rgba(0,0,0,.28); border-radius:99px; padding:0 5px; margin-top:1px;
}

/* Élément vertical (plus haut que large) : le nom pivote de 90° pour suivre la
   hauteur. On mesure la contrainte de largeur du texte sur la HAUTEUR de l'élément
   grâce à la rotation, ce qui évite de tronquer un long nom de rayon. */
.impl-element.el-vertical{ flex-direction:row; }
.impl-element.el-vertical .el-nom-rot{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  transform:rotate(-90deg);
  /* Après rotation, la « largeur » du bloc suit la hauteur de l'élément. */
  white-space:nowrap;
}
.impl-element.el-vertical .el-nom{ max-width:none; white-space:nowrap; }

.impl-element .el-poignee{
  position:absolute; right:1px; bottom:1px;
  width:11px; height:11px; cursor:nwse-resize;
  background:
    linear-gradient(135deg, transparent 45%, rgba(255,255,255,.7) 45%, rgba(255,255,255,.7) 55%, transparent 55%);
}
.type-tg{ background:var(--el-tg); }
.type-plot{ background:var(--el-plot); border-radius:50%; }
.type-gondole{ background:var(--el-gondole); }
.type-promo{ background:var(--el-promo); border-style:dashed; }
.type-caisse{ background:var(--el-caisse); }
.type-entree{ background:var(--el-entree); }
.type-reserve{ background:var(--el-reserve); }

/* Bandeau d'indicateurs (URGENT + icônes) en haut de l'élément.
   Il est en flux (pas en absolu) pour ne pas recouvrir le nom sur les
   éléments peu hauts, où la place manque. */
.impl-element .el-indicateurs{
  display:flex; align-items:center; gap:3px; flex-wrap:wrap; justify-content:center;
  pointer-events:none; max-width:100%; margin-bottom:1px;
}
.impl-element .el-urgent{
  font-size:8px; font-weight:800; letter-spacing:.03em;
  background:#e5484d; color:#fff; padding:1px 4px; border-radius:99px;
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.impl-element .el-ico{ font-size:12px; line-height:1; filter:drop-shadow(0 1px 1px rgba(0,0,0,.4)); }

/* Pastille de statut, coin bas-gauche */
.impl-element .el-statut{
  position:absolute; left:2px; bottom:2px;
  font-size:11px; line-height:1; pointer-events:none;
  text-shadow:0 1px 2px rgba(0,0,0,.55);
}
.el-statut.st-afaire{ color:#fff; opacity:.6; }
.el-statut.st-encours{ color:#ffd75e; }
.el-statut.st-fait{ color:#6ff2a8; }

/* L'état d'avancement teinte discrètement l'élément entier */
.impl-element.st-fait{ opacity:.72; }
.impl-element.st-encours{ box-shadow:0 0 0 2px rgba(255,196,0,.5), 0 2px 8px rgba(0,0,0,.3); }
.impl-element.est-urgent{ box-shadow:0 0 0 2px #e5484d, 0 2px 10px rgba(229,72,77,.5); }
@keyframes pulse-urgent{ 0%,100%{ box-shadow:0 0 0 2px #e5484d, 0 2px 10px rgba(229,72,77,.4);} 50%{ box-shadow:0 0 0 3px #e5484d, 0 2px 16px rgba(229,72,77,.7);} }
.impl-element.est-urgent{ animation:pulse-urgent 1.8s ease-in-out infinite; }

.impl-stage-hint{ font-size:11.5px; color:var(--ink-faint); margin:0; }

/* Légende récapitulative : masquée à l'écran, imprimée sous le plan */
.impl-legende{ display:none; }
.legende-titre{ font-size:15px; margin:0 0 10px; color:#111; }
.legende-item{ break-inside:avoid; margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid #ddd; }
.legende-head{ display:flex; align-items:center; gap:8px; font-size:13px; color:#111; flex-wrap:wrap; }
.legende-head .el-pastille{ width:13px; height:13px; }
.legende-type{ font-size:10px; color:#777; text-transform:uppercase; letter-spacing:.04em; }
.legende-statut{ font-size:10px; padding:1px 6px; border-radius:99px; border:1px solid #bbb; color:#444; }
.legende-statut.st-fait{ background:#e4f6ec; border-color:#8fd8ab; color:#1c7a45; }
.legende-statut.st-encours{ background:#fff4d6; border-color:#e5c14e; color:#8a6400; }
.legende-urgent{ font-size:10px; font-weight:800; background:#e5484d; color:#fff; padding:1px 6px; border-radius:99px; }
.legende-icones{ font-size:11px; color:#444; margin:3px 0 0 21px; }
.legende-note{ font-size:11px; color:#555; font-style:italic; margin:3px 0 0 21px; }
.legende-produits{ margin:4px 0 0 21px; padding:0 0 0 16px; font-size:12px; color:#222; }
.legende-produits li{ margin:1px 0; }
.legende-ean{ font-family:var(--font-mono, monospace); font-size:11px; color:#555; }

/* -------- Inspecteur (panneau droit) -------- */
.impl-inspector{
  background:var(--panel); border:1px solid var(--panel-border);
  border-radius:var(--radius); padding:14px;
  position:sticky; top:14px; min-height:200px;
}
.inspector-vide p{ font-size:12.5px; color:var(--ink-faint); line-height:1.5; margin:0; }

.inspector-head{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.insp-nom{
  flex:1; min-width:0; background:var(--panel-2); border:1px solid var(--panel-border);
  color:var(--ink); border-radius:var(--radius-sm); padding:7px 9px; font-size:13px; font-weight:600;
  font-family:inherit;
}
.insp-nom:focus{ outline:none; border-color:var(--amber); }
.insp-type{ font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; margin-bottom:3px; }
.insp-maj{ font-size:10.5px; color:var(--ink-faint); font-style:italic; margin-bottom:12px; }

.insp-label{ display:block; font-size:11px; color:var(--ink-dim); margin-bottom:4px; }
.insp-note{
  width:100%; box-sizing:border-box; background:var(--panel-2); border:1px solid var(--panel-border);
  color:var(--ink); border-radius:var(--radius-sm); padding:8px; font-size:12px; font-family:inherit;
  resize:vertical; margin-bottom:6px;
}
.insp-note:focus{ outline:none; border-color:var(--amber); }

/* Statut d'avancement + urgent */
.insp-statut-ligne{ display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.statut-btns{ display:flex; gap:4px; flex:1; }
.statut-btn{
  flex:1; background:var(--panel-2); border:1px solid var(--panel-border);
  color:var(--ink-dim); border-radius:var(--radius-sm); padding:6px 4px;
  font-size:11px; cursor:pointer; font-family:inherit; transition:.14s ease;
}
.statut-btn:hover{ color:var(--ink); }
.statut-btn.active{ font-weight:700; color:#fff; }
.statut-btn.st-afaire.active{ background:#5a6478; border-color:#5a6478; }
.statut-btn.st-encours.active{ background:#d99a00; border-color:#d99a00; color:#1c1400; }
.statut-btn.st-fait.active{ background:#1f9d57; border-color:#1f9d57; }
.urgent-check{
  display:flex; align-items:center; gap:5px; font-size:12px; cursor:pointer;
  color:var(--el-promo); font-weight:600; flex:none;
}
.urgent-check input{ width:15px; height:15px; accent-color:var(--el-promo); }

/* Grille d'icônes sélectionnables */
.icones-grille{ display:grid; grid-template-columns:repeat(5, 1fr); gap:5px; margin-bottom:14px; }
.icone-btn{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  background:var(--panel-2); border:1px solid var(--panel-border);
  border-radius:var(--radius-sm); cursor:pointer; font-size:16px; transition:.12s ease;
}
.icone-btn:hover{ border-color:var(--amber); }
.icone-btn.active{ background:var(--amber); border-color:var(--amber); box-shadow:0 0 0 1px var(--amber); }
.icone-glyphe{ line-height:1; }

.insp-section-titre{
  font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--amber); font-weight:700; margin:16px 0 8px;
}
.insp-ajout{ display:flex; gap:6px; margin-bottom:7px; }
.insp-ajout-libre{ flex-wrap:wrap; }
.insp-ajout-libre .insp-input{ flex:1 1 120px; }
.insp-ajout-libre .insp-ean{ flex:1 1 90px; font-family:var(--font-mono, monospace); }
.insp-select, .insp-input{
  flex:1; min-width:0; background:var(--panel-2); border:1px solid var(--panel-border);
  color:var(--ink); border-radius:var(--radius-sm); padding:7px 9px; font-size:12px; font-family:inherit;
}
.insp-select:focus, .insp-input:focus{ outline:none; border-color:var(--amber); }

.insp-produits{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:5px; }
.insp-produit{
  display:flex; align-items:center; gap:8px;
  background:var(--panel-2); border:1px solid var(--panel-border);
  border-radius:var(--radius-sm); padding:6px 9px; font-size:12px;
}
.insp-produit .prod-infos{ flex:1; min-width:0; }
.insp-produit .prod-nom{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.insp-produit .prod-ean{ display:block; font-size:10px; color:var(--ink-faint); font-family:var(--font-mono, monospace); }
.insp-produit .prod-source{ font-size:9px; color:var(--ink-faint); text-transform:uppercase; flex:none; }
.insp-produit .prod-suppr{
  background:none; border:none; color:var(--ink-faint); cursor:pointer; font-size:14px; flex:none; padding:0 2px;
}
.insp-produit .prod-suppr:hover{ color:var(--el-promo); }

/* -------- Infobulle produits au survol -------- */
.impl-tooltip{
  position:fixed; z-index:1000; pointer-events:none;
  max-width:250px;
  background:var(--panel-3); border:1px solid var(--panel-border);
  border-radius:var(--radius-sm); padding:9px 11px;
  box-shadow:0 8px 26px rgba(0,0,0,.5);
  font-size:12px;
}
.impl-tooltip .tt-titre{ display:flex; align-items:center; gap:7px; font-weight:700; color:var(--ink); margin-bottom:2px; }
.impl-tooltip .tt-titre .el-pastille{ width:12px; height:12px; }
.impl-tooltip .tt-urgent{ font-size:9px; font-weight:800; background:#e5484d; color:#fff; padding:1px 5px; border-radius:99px; margin-left:auto; }
.impl-tooltip .tt-meta{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.impl-tooltip .tt-statut{ font-size:10px; font-weight:600; }
.impl-tooltip .tt-statut.st-fait{ color:#2fbd6e; }
.impl-tooltip .tt-statut.st-encours{ color:#e5b023; }
.impl-tooltip .tt-statut.st-afaire{ color:var(--ink-faint); }
.impl-tooltip .tt-maj{ font-size:10px; color:var(--ink-faint); font-style:italic; }
.impl-tooltip .tt-type{ font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin-bottom:5px; }
.impl-tooltip .tt-icones{ font-size:11px; color:var(--ink-dim); margin-bottom:5px; }
.impl-tooltip .tt-note{ font-size:11px; font-style:italic; color:var(--ink-dim); margin-bottom:5px; }
.impl-tooltip .tt-produits{ margin:0; padding-left:16px; color:var(--ink); }
.impl-tooltip .tt-produits li{ margin:1px 0; }
.impl-tooltip .tt-ean{ font-family:var(--font-mono, monospace); font-size:10px; color:var(--ink-faint); }
.impl-tooltip .tt-vide{ font-size:11px; color:var(--ink-faint); font-style:italic; }

/* =========================================================
   THÈME CLAIR
   Surcharge les variables de couleur quand body.theme-clair.
   ========================================================= */
body.theme-clair{
  --bg-workbench:#eef1f6;
  --panel:#ffffff;
  --panel-2:#f4f6fa;
  --panel-3:#e9edf3;
  --panel-border:#d5dae4;
  --ink:#1c2230;
  --ink-dim:#5a6478;
  --ink-faint:#9aa3b5;
  background:#e4e8ef;
  color:var(--ink);
}
body.theme-clair .topbar{ background:#ffffff; }
body.theme-clair .brand-mark{ color:#fff; }
body.theme-clair .impl-canvas{ background:#ffffff; box-shadow:0 4px 22px rgba(30,40,70,.12); }
body.theme-clair .impl-canvas.avec-grille{
  background-image:
    linear-gradient(to right, rgba(0,0,0,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.06) 1px, transparent 1px);
}
body.theme-clair .impl-canvas-wrap{ background:#dfe4ec; }
body.theme-clair .sol-cell.mur{ background:#8a93a6; }
body.theme-clair .sol-cell.allee{ background:#e7ebf1; }
body.theme-clair .sol-cell.zone{ background:#dbe6cf; }
body.theme-clair .tool-btn.active{ color:var(--amber-ink); }
body.theme-clair .impl-tooltip{ background:#fff; box-shadow:0 8px 26px rgba(30,40,70,.22); }
/* Les pastilles et éléments merchandising gardent leurs couleurs vives :
   elles ressortent bien sur fond clair comme sur fond sombre. */
@media print{
  @page{ size:A4 landscape; margin:8mm; }
  html, body{ height:auto !important; min-height:0 !important; background:#fff !important; }
  .topbar, .impl-tools, .impl-inspector, .impl-stage-bar, .impl-stage-hint, .toast{ display:none !important; }
  .impl-layout{ display:block !important; padding:0 !important; min-height:0 !important; }
  .impl-stage{ border:0 !important; background:#fff !important; padding:0 !important; }
  .impl-canvas-wrap{
    overflow:visible !important; max-height:none !important; border:0 !important;
    background:#fff !important; padding:0 !important;
  }
  .impl-canvas{ box-shadow:none !important; background:#fff !important; }
  .impl-canvas.avec-grille{
    background-image:
      linear-gradient(to right, rgba(0,0,0,.08) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(0,0,0,.08) 1px, transparent 1px) !important;
  }
  .impl-element, .sol-cell{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  /* La légende récapitulative s'imprime sous le plan, sur une nouvelle page. */
  .impl-legende{ display:block !important; margin-top:14px; page-break-before:always; }
}

/* =========================================================
   SCANNER DE CODE-BARRES
   ========================================================= */

.scan-panneau{
  position:fixed; z-index:400; inset:0;
  background:var(--bg-workbench);
  display:flex; flex-direction:column;
  padding:14px;
  gap:12px;
  overflow-y:auto;
}
.scan-panneau[hidden]{ display:none; }
.scan-head{
  display:flex; align-items:center; justify-content:space-between;
  font-size:15px; color:var(--ink); flex:none;
}

.scan-video-wrap{
  position:relative; flex:none;
  width:100%; max-width:520px; margin:0 auto;
  aspect-ratio:4/3;
  background:#000; border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--panel-border);
}
.scan-video-wrap.sans-camera{ aspect-ratio:auto; min-height:96px; background:var(--panel-2); }
.scan-video-wrap.sans-camera video, .scan-video-wrap.sans-camera .scan-viseur{ display:none; }
#scanVideo{ width:100%; height:100%; object-fit:cover; display:block; }

/* Viseur : cadre au centre pour guider le cadrage */
.scan-viseur{
  position:absolute; left:12%; right:12%; top:30%; bottom:30%;
  border:2px solid rgba(255,176,32,.9); border-radius:8px;
  box-shadow:0 0 0 2000px rgba(0,0,0,.28);
  pointer-events:none;
}
.scan-etat{
  position:absolute; left:0; right:0; bottom:0; margin:0;
  padding:9px 12px; font-size:12px; line-height:1.45;
  color:#fff; background:rgba(0,0,0,.6); text-align:center;
}
.scan-video-wrap.sans-camera .scan-etat{
  position:static; background:none; color:var(--ink-dim); text-align:left;
}

.scan-manuel{ flex:none; max-width:520px; width:100%; margin:0 auto; }

/* Résultats de recherche */
.scan-resultat{ flex:1; max-width:520px; width:100%; margin:0 auto; }
.scan-code{
  font-family:var(--font-mono, monospace); font-size:13px; color:var(--ink);
  padding:8px 0; border-bottom:1px solid var(--panel-border); margin-bottom:10px;
}
.scan-nb{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--amber); font-weight:700; margin-bottom:8px; }
.scan-vide{ font-size:12.5px; color:var(--ink-faint); }
.scan-aucun{
  background:var(--panel-2); border:1px solid var(--panel-border);
  border-radius:var(--radius-sm); padding:14px; color:var(--ink);
}
.scan-aucun p{ margin:5px 0 0; font-size:12.5px; color:var(--ink-dim); }

.scan-item{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:var(--panel-2); border:1px solid var(--panel-border);
  border-radius:var(--radius-sm); padding:11px; margin-bottom:7px;
  cursor:pointer; font-family:inherit; color:var(--ink);
}
.scan-item:hover{ border-color:var(--amber); }
.scan-item-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.scan-item-txt b{ font-size:13.5px; }
.scan-item-meta{ font-size:11px; color:var(--ink-faint); }
.scan-item-note{ font-size:11px; color:var(--ink-dim); font-style:italic; }
.scan-item-etat{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex:none; }
.scan-urgent{ font-size:9px; font-weight:800; background:#e5484d; color:#fff; padding:1px 6px; border-radius:99px; }
.scan-statut{ font-size:10px; color:var(--ink-faint); }
.scan-statut.st-fait{ color:#2fbd6e; }
.scan-statut.st-encours{ color:#e5b023; }

/* =========================================================
   MOBILE / SMARTPHONE
   Sur petit écran, on passe d'un layout 3 colonnes à un plan
   plein écran + panneaux coulissants (outils, plans, inspecteur)
   ouverts depuis une barre de navigation en bas.
   ========================================================= */

.mobile-bar{ display:none; }
.mobile-overlay{ display:none; }
/* Bouton de fermeture des volets : utile seulement en mode mobile */
.panneau-fermer{ display:none; }

@media (max-width:860px){

  /* ---- Barre du haut : compacte, sur deux rangées maîtrisées ---- */
  .topbar{
    padding:8px 10px; gap:8px;
    flex-wrap:wrap; row-gap:8px;
    position:sticky; top:0; z-index:120;
  }
  .brand{ flex:1 1 auto; min-width:0; }
  .brand-text p{ display:none; }
  .brand-text h1{ font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .brand-mark{ width:30px; height:30px; font-size:12px; }
  .topbar-actions{
    order:3; flex:1 1 100%;
    display:flex; gap:6px; align-items:center;
  }
  .plan-nom-input{ min-width:0; flex:1 1 auto; font-size:13px; padding:8px 10px; }
  /* Le retour aux fiches se réduit à une flèche pour gagner de la place */
  .topbar-actions a.btn{ flex:none; padding:8px 10px; font-size:0; }
  .topbar-actions a.btn::before{ content:'←'; font-size:15px; }
  #btnNouveauPlan{ flex:none; padding:8px 11px; font-size:0; }
  #btnNouveauPlan::before{ content:'＋'; font-size:15px; }
  #btnEnregistrerPlan{ flex:none; padding:8px 13px; font-size:12.5px; white-space:nowrap; }

  /* ---- Layout : le plan occupe l'écran ---- */
  .impl-layout{ display:block; padding:0; min-height:0; }

  /* ---- Scène ---- */
  .impl-stage{
    border-radius:0; border-left:0; border-right:0;
    padding:8px 8px 6px; gap:8px;
  }
  /* Barre de scène : une seule ligne défilante horizontalement si besoin */
  .impl-stage-bar{
    flex-wrap:nowrap; overflow-x:auto; gap:8px;
    padding-bottom:2px;
    scrollbar-width:none;
  }
  .impl-stage-bar::-webkit-scrollbar{ display:none; }
  .stage-bar-left, .stage-bar-right{ flex-wrap:nowrap; flex:none; }
  .impl-stage-bar .btn{ white-space:nowrap; }
  /* Redondant avec la barre du bas ou peu utile au doigt : on masque */
  .grille-taille, #btnTheme, #btnScanDesktop, .bar-sep, .impl-stage-hint{ display:none; }

  .impl-canvas-wrap{
    height:calc(100vh - 232px); height:calc(100dvh - 232px);
    min-height:240px; max-height:none;
    padding:10px;
    touch-action:pan-x pan-y;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }

  /* ---- Panneaux coulissants (outils / inspecteur) ---- */
  .impl-tools, .impl-inspector{
    position:fixed; z-index:200;
    /* top:auto est indispensable : la règle desktop pose top:14px pour le
       position:sticky, et un top + bottom simultanés décollent le volet du bas. */
    top:auto; left:0; right:0; bottom:0;
    width:100%; box-sizing:border-box;
    max-height:72vh; max-height:72dvh; overflow-y:auto;
    padding:12px 14px calc(16px + env(safe-area-inset-bottom));
    border-radius:18px 18px 0 0;
    border-left:0; border-right:0; border-bottom:0;
    box-shadow:0 -8px 30px rgba(0,0,0,.45);
    transform:translateY(100%);
    transition:transform .26s ease, visibility 0s linear .26s;
    visibility:hidden;          /* fermé = non cliquable */
    margin:0;
    overscroll-behavior:contain;
  }
  .impl-tools.ouvert, .impl-inspector.ouvert{
    transform:translateY(0); visibility:visible;
    transition:transform .26s ease, visibility 0s;
  }
  /* Bouton « Fermer » collé en haut du volet, toujours atteignable */
  .panneau-fermer{
    display:block; position:sticky; top:0; z-index:2;
    margin:0 0 10px auto;
    background:var(--panel-2); border:1px solid var(--panel-border);
    color:var(--ink-dim); border-radius:99px;
    padding:7px 16px; font-size:12.5px; font-family:inherit; cursor:pointer;
  }
  .panneau-fermer:active{ background:var(--panel-3); }

  /* Poignée de préhension */
  .impl-tools::before, .impl-inspector::before{
    content:''; display:block; width:38px; height:4px; border-radius:99px;
    background:var(--panel-border); margin:0 auto 12px; flex:none;
  }
  .impl-tools{ gap:12px; }
  .tool-group{ padding:11px; }

  /* ---- Barre de navigation du bas ---- */
  .mobile-bar{
    display:flex; position:fixed; z-index:150;
    left:0; right:0; bottom:0;
    background:var(--panel); border-top:1px solid var(--panel-border);
    padding:5px 2px calc(5px + env(safe-area-inset-bottom));
  }
  .mob-btn{
    flex:1; min-width:0;
    display:flex; flex-direction:column; align-items:center; gap:2px;
    background:none; border:none; color:var(--ink-dim);
    font-size:10px; font-family:inherit; cursor:pointer;
    padding:6px 2px; border-radius:10px;
  }
  .mob-btn span:last-child{
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .mob-btn:disabled{ opacity:.35; }
  .mob-btn .mob-ico{ font-size:17px; line-height:1; }
  .mob-btn.actif{ color:var(--amber); }
  .mob-btn-scan .mob-ico{ color:var(--amber); }

  .mobile-overlay{
    display:block; position:fixed; inset:0; z-index:180;
    background:rgba(0,0,0,.5);
  }
  .mobile-overlay[hidden]{ display:none; }

  /* Espace réservé à la barre du bas */
  body{ padding-bottom:calc(58px + env(safe-area-inset-bottom)); }

  /* ---- Cibles tactiles agrandies ---- */
  .tool-btn{ padding:11px 12px; font-size:13px; }
  .btn, .btn-sm{ min-height:36px; }
  .insp-produit{ padding:10px 11px; }
  .insp-nom{ font-size:15px; padding:9px 10px; }   /* 15px : évite le zoom auto iOS */
  .insp-note, .insp-input, .insp-select{ font-size:15px; padding:9px 10px; }
  .plan-nom-input{ font-size:15px; }

  /* Statuts : trois boutons qui tiennent toujours sur la largeur */
  .insp-statut-ligne{ gap:8px; }
  .statut-btns{ flex:1 1 100%; min-width:0; }
  .statut-btn{ flex:1 1 0; min-width:0; padding:11px 2px; font-size:12px; }
  .urgent-check{ flex:none; font-size:13px; }

  /* Icônes : 5 colonnes confortables */
  .icones-grille{ grid-template-columns:repeat(5, 1fr); gap:6px; margin-bottom:12px; }
  .icone-btn{ font-size:19px; border-radius:10px; }

  /* Liste des plans : plus haute, elle est le point d'entrée sur mobile */
  .plans-list{ max-height:none; }
  .plan-item{ padding:10px 11px; }

  /* Scanner plein écran */
  .scan-panneau{ padding:12px 12px calc(12px + env(safe-area-inset-bottom)); }
  .scan-video-wrap{ aspect-ratio:3/4; max-height:52vh; max-height:52dvh; }
  .scan-item{ padding:12px 11px; }
}

/* ---- Très petits écrans ---- */
@media (max-width:400px){
  .brand-text h1{ font-size:14px; }
  .mob-btn{ font-size:9px; }
  .mob-btn .mob-ico{ font-size:16px; }
  .icones-grille{ grid-template-columns:repeat(4, 1fr); }
  .statut-btn{ font-size:11px; }
}

/* ---- Paysage bas de plafond : on récupère de la hauteur ---- */
@media (max-width:860px) and (orientation:landscape){
  .impl-canvas-wrap{ height:calc(100vh - 190px); height:calc(100dvh - 190px); }
  .impl-tools, .impl-inspector{ max-height:80vh; max-height:80dvh; }
  .scan-video-wrap{ aspect-ratio:16/9; max-height:44vh; max-height:44dvh; }
}

/* -------- Responsive intermédiaire (tablette) : colonnes empilées -------- */
@media (min-width:861px) and (max-width:1100px){
  .impl-layout{ grid-template-columns:1fr; }
  .impl-tools, .impl-inspector{ position:static; }
}