Outils

Pour la préparation de vos événements

Outils techniques

Une boîte à outils pensée pour accélérer le travail sur le terrain et en préparation d’événement. Calculateurs de puissance, de câblage, de distance de projection et autres ressources techniques, tout au même endroit pour éviter de reprendre les calculs à la main à chaque mandat.

<!DOCTYPE html>
<html>
<div id="eclat-calc-stage">
<style>
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

#eclat-calc-stage{
  --bleu:#0E4C81;
  --bleu-2:#1C7BC0;
  --bleu-pale:#E7F0F7;
  --bleu-tres-pale:#F4F8FC;
  --encre:#16202B;
  --gris:#44505C;
  --gris-2:#5A6773;
  --ligne:#D5DEE6;
  --fond:#F1F5F8;
  --blanc:#FFFFFF;

max-width:520px;
  margin:0 auto;
  padding:28px 20px 60px;
  display:flex;
  flex-direction:column;
  gap:20px;
  background:var(--fond);
  color:var(--encre);
  font-family:'Inter',system-ui,sans-serif;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}
#eclat-calc-stage *{box-sizing:border-box;margin:0;padding:0}
#eclat-calc-stage h1,#eclat-calc-stage h2{font-family:'Barlow Condensed','Inter',sans-serif;text-transform:uppercase;letter-spacing:.05em}

#eclat-calc-stage .brand h1{font-weight:700;font-size:20px;line-height:1;color:var(--bleu)}
#eclat-calc-stage .brand p{font-size:11px;color:var(--gris-2);margin-top:4px}
#eclat-calc-stage .brand .bar{height:2px;width:34px;background:var(--bleu-2);margin-top:9px}

#eclat-calc-stage .blk{border:1px solid var(--ligne);border-radius:6px;background:var(--blanc);overflow:hidden}
#eclat-calc-stage .blk>.tete{padding:8px 12px;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.09em;font-size:13px;font-weight:600;color:var(--bleu);background:var(--bleu-tres-pale)}
#eclat-calc-stage .blk>.body{padding:14px}

#eclat-calc-stage .champ{display:flex;flex-direction:column;gap:8px;padding:10px 0;border-bottom:1px solid var(--ligne)}
#eclat-calc-stage .champ:last-of-type{border-bottom:0}
#eclat-calc-stage .champ label{font-size:10px;color:var(--gris);letter-spacing:.08em;text-transform:uppercase;font-weight:600}
#eclat-calc-stage .step{display:flex;align-items:center;gap:8px}
#eclat-calc-stage .step button{width:30px;height:30px;border:1px solid var(--ligne);background:var(--blanc);color:var(--bleu);border-radius:4px;cursor:pointer;font-size:16px;line-height:1}
#eclat-calc-stage .step button:hover{border-color:var(--bleu-2);background:var(--bleu-pale)}
#eclat-calc-stage .step button:disabled{opacity:.35;cursor:not-allowed}
#eclat-calc-stage .step .v{font-family:'JetBrains Mono',monospace;font-size:17px;font-weight:700;min-width:38px;text-align:center}
#eclat-calc-stage .sub{font-size:11px;color:var(--gris)}
#eclat-calc-stage .sub b{color:var(--bleu)}

#eclat-calc-stage .shead{border-bottom:2px solid var(--bleu);padding-bottom:8px}
#eclat-calc-stage .shead h2{font-size:19px;font-weight:700;color:var(--bleu)}

#eclat-calc-stage .kv{display:flex;flex-direction:column}
#eclat-calc-stage .kv .r{display:flex;justify-content:space-between;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--ligne)}
#eclat-calc-stage .kv .r:last-child{border-bottom:0}
#eclat-calc-stage .kv .r .n{font-size:14px}
#eclat-calc-stage .kv .r .v{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:19px;color:var(--bleu);white-space:nowrap}
</style>

<div class="brand">
    <h1>Calculateur de stages</h1>
    <p>Éclat — préparation entrepôt</p>
    <div class="bar"></div>
  </div>

<div class="blk">
    <div class="tete">Dimensions</div>
    <div class="body">
      <div class="champ">
        <label>Largeur du stage (pi)</label>
        <div class="step"><button data-adj="largeur" data-d="-4">−</button><span class="v" data-out="vLargeur">12</span><button data-adj="largeur" data-d="4">+</button></div>
      </div>
      <div class="champ">
        <label>Profondeur du stage (pi)</label>
        <div class="step"><button data-adj="profondeur" data-d="-4">−</button><span class="v" data-out="vProfondeur">8</span><button data-adj="profondeur" data-d="4">+</button></div>
      </div>
      <div class="champ">
        <span class="sub">Panneaux en largeur : <b data-out="panLargeur">3</b></span>
        <span class="sub">Panneaux en profondeur : <b data-out="panProfondeur">2</b></span>
      </div>
    </div>
  </div>

<div>
    <div class="shead"><h2 data-out="titreStage">Stage — 12 × 8 pi</h2></div>
    <div class="kv">
      <div class="r"><div class="n">Panneaux</div><div class="v" data-out="rPanneaux">6</div></div>
      <div class="r"><div class="n">Poteaux carrés</div><div class="v" data-out="rPoteauxCarres">17</div></div>
      <div class="r"><div class="n">Poteaux ronds</div><div class="v" data-out="rPoteauxRonds">17</div></div>
      <div class="r"><div class="n">Pattes</div><div class="v" data-out="rPattes">12</div></div>
      <div class="r"><div class="n">Jupe 3 faces (pi)</div><div class="v" data-out="rJupe">28</div></div>
    </div>
  </div>

var PANNEAU_PI = 4;
  var MIN_PI = 4, MAX_PI = 100;
  var S = { largeur:12, profondeur:8 };

function calc(){
    var panL = S.largeur/PANNEAU_PI;
    var panP = S.profondeur/PANNEAU_PI;
    return {
      panL: panL, panP: panP,
      panneaux: panL*panP,
      poteauxCarres: panL*(panP+1) + panP*(panL+1),
      poteauxRonds: panL*(panP+1) + panP*(panL+1),
      pattes: (panL+1)*(panP+1),
      jupe: panP*PANNEAU_PI*2 + panL*PANNEAU_PI
    };
  }

function set(name, val){
    var el = root.querySelector('[data-out="' + name + '"]');
    if(el) el.textContent = val;
  }

function render(){
    var d = calc();
    set('vLargeur', S.largeur);
    set('vProfondeur', S.profondeur);
    set('panLargeur', d.panL);
    set('panProfondeur', d.panP);
    set('titreStage', 'Stage — ' + S.largeur + ' × ' + S.profondeur + ' pi');
    set('rPanneaux', d.panneaux);
    set('rPoteauxCarres', d.poteauxCarres);
    set('rPoteauxRonds', d.poteauxRonds);
    set('rPattes', d.pattes);
    set('rJupe', d.jupe);

root.querySelectorAll('[data-adj="largeur"]').forEach(function(b){
      var next = S.largeur + parseInt(b.dataset.d, 10);
      b.disabled = next < MIN_PI || next > MAX_PI;
    });
    root.querySelectorAll('[data-adj="profondeur"]').forEach(function(b){
      var next = S.profondeur + parseInt(b.dataset.d, 10);
      b.disabled = next < MIN_PI || next > MAX_PI;
    });
  }

root.addEventListener('click', function(ev){
    var el = ev.target.closest('[data-adj]');
    if(!el || !root.contains(el)) return;
    var champ = el.dataset.adj;
    var next = S[champ] + parseInt(el.dataset.d, 10);
    if(next >= MIN_PI && next <= MAX_PI){
      S[champ] = next;
      render();
    }
  });

render();
})();
</script>
</div>
</html>

<!DOCTYPE html>
<html lang="fr-CA">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Liste d'écran LED — Éclat Audiovisuel</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');
:root{
  /* --- couleurs Éclat : ajuste ces deux valeurs si tu as les hex exacts --- */
  --bleu:#0E4C81;
  --bleu-2:#1C7BC0;
  --bleu-pale:#E7F0F7;
  --bleu-tres-pale:#F4F8FC;
  --encre:#16202B;
  --gris:#44505C;
  --gris-2:#5A6773;
  --ligne:#D5DEE6;
  --fond:#F1F5F8;
  --blanc:#FFFFFF;
  --ambre:#D9871B;
  --ambre-pale:#FBF2E2;
  --rouge:#C0442C;
  --vert-ok:#2F7D4F;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--fond);color:var(--encre);font-family:'Inter',system-ui,sans-serif;font-size:13px;-webkit-font-smoothing:antialiased}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
h1,h2,h3{font-family:'Barlow Condensed','Inter',sans-serif;text-transform:uppercase;letter-spacing:.05em}
.shell{display:grid;grid-template-columns:302px 1fr;min-height:100vh;align-items:start}
@media (max-width:960px){.shell{grid-template-columns:1fr}}
/* ---------------- console ---------------- */
.rail{background:var(--blanc);border-right:1px solid var(--ligne);padding:16px 14px 28px;display:flex;flex-direction:column;gap:11px;min-height:100vh}
.brand h1{font-weight:700;font-size:19px;line-height:1;color:var(--bleu)}
.brand p{font-size:10.5px;color:var(--gris-2);margin-top:3px;font-family:'Inter',sans-serif}
.brand .bar{height:2px;width:34px;background:var(--bleu-2);margin-top:8px}
details.blk{border:1px solid var(--ligne);border-radius:5px;background:var(--blanc);overflow:hidden}
details.blk>summary{cursor:pointer;padding:7px 10px;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.09em;font-size:12.5px;font-weight:600;color:var(--bleu);background:var(--bleu-tres-pale);list-style:none;display:flex;justify-content:space-between;align-items:center}
details.blk>summary::-webkit-details-marker{display:none}
details.blk>summary::after{content:'+';color:var(--bleu-2);font-size:14px;line-height:1}
details.blk[open]>summary::after{content:'–'}
details.blk>.body{padding:10px;display:flex;flex-direction:column;gap:9px}
label.lb{display:block;font-size:9px;color:var(--gris);letter-spacing:.09em;text-transform:uppercase;font-weight:600;margin-bottom:3px}
input[type=text],input[type=number],select{width:100%;background:var(--blanc);border:1px solid var(--ligne);border-radius:3px;color:var(--encre);padding:5px 7px;font-family:'JetBrains Mono',monospace;font-size:12.5px}
input:focus,select:focus{outline:0;border-color:var(--bleu-2);box-shadow:0 0 0 3px rgba(28,123,192,.15)}
input[type=range]{accent-color:var(--bleu-2);width:100%}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
.sub{font-size:9.5px;color:var(--gris);margin-top:3px;display:block;line-height:1.35}
.modtitre{display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.05em;font-weight:600;font-size:12.5px;color:var(--encre);background:var(--bleu-pale);border-left:2px solid var(--bleu);padding:5px 8px;border-radius:0 3px 3px 0}
.seg{display:grid;border:1px solid var(--ligne);border-radius:4px;overflow:hidden}
.seg.c2{grid-template-columns:1fr 1fr}.seg.c3{grid-template-columns:1fr 1fr 1fr}
.seg button{background:var(--blanc);color:var(--gris);border:0;padding:6px 3px;cursor:pointer;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.06em;font-weight:600;font-size:12.5px}
.seg button+button{border-left:1px solid var(--ligne)}
.seg button[aria-pressed="true"]{background:var(--bleu);color:#fff}
button:focus-visible{outline:2px solid var(--bleu-2);outline-offset:2px}
.step{display:flex;align-items:center;gap:6px}
.step button{width:24px;height:24px;border:1px solid var(--ligne);background:var(--blanc);color:var(--bleu);border-radius:3px;cursor:pointer;font-size:13px;line-height:1}
.step button:hover{border-color:var(--bleu-2);background:var(--bleu-pale)}
.step .v{font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:700;min-width:26px;text-align:center}
.rowbtn{display:flex;gap:5px}
.rowbtn button{flex:1;background:var(--blanc);border:1px solid var(--ligne);color:var(--bleu);padding:6px;border-radius:3px;cursor:pointer;font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.06em;font-weight:600;font-size:12px}
.rowbtn button:hover{border-color:var(--bleu-2);background:var(--bleu-pale)}
.rowbtn button.pri{background:var(--bleu);border-color:var(--bleu);color:#fff}
.rowbtn button.pri:hover{background:var(--bleu-2);border-color:var(--bleu-2)}
.tabs{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.tabs .t{background:var(--blanc);border:1px solid var(--ligne);border-radius:3px;padding:4px 8px;font-size:11.5px;cursor:pointer;display:flex;gap:6px;align-items:center}
.tabs .t.on{border-color:var(--bleu);background:var(--bleu);color:#fff}
.tabs .t i{font-style:normal;opacity:.6}
.tabs .t i:hover{opacity:1}
.tabs .add{background:transparent;border:1px dashed var(--gris-2);color:var(--gris);border-radius:3px;padding:4px 8px;cursor:pointer;font-size:11.5px}
.chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.chips button{border:1px solid var(--ligne);background:var(--blanc);color:var(--bleu);border-radius:3px;padding:3px 7px;font-family:'JetBrains Mono',monospace;font-size:11px;cursor:pointer}
.chips button:hover{border-color:var(--bleu-2);background:var(--bleu-pale)}
.chips button.on{background:var(--bleu);border-color:var(--bleu);color:#fff}
.lien{background:none;border:0;color:var(--bleu-2);font-family:'Inter',sans-serif;font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;cursor:pointer;padding:0}
.lien:hover{color:var(--bleu);text-decoration:underline}
.specs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px 10px}
.specs div{min-width:0}
.specs .k{font-size:9px;color:var(--gris-2);letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.specs .v{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--encre);margin-top:1px}
.specs .v2{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--gris);margin-top:1px}
.avis{background:var(--ambre-pale);border:1px solid #EBD5AC;border-radius:3px;padding:6px 8px;font-size:9.5px;color:#7A5405;line-height:1.35}
/* ---------------- feuille ---------------- */
.sheet{padding:18px 22px 44px;overflow-x:hidden}
@media (max-width:600px){.sheet{padding:20px 15px 44px}}
.shead{display:flex;align-items:baseline;justify-content:space-between;border-bottom:2px solid var(--bleu);padding-bottom:6px;margin-bottom:13px;gap:10px;flex-wrap:wrap}
.shead h2{font-size:18px;font-weight:700;color:var(--bleu)}
.projet{font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gris);margin-bottom:2px}
.tag{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;padding:3px 7px;border-radius:3px;letter-spacing:.04em}
.tag.int{background:var(--bleu-pale);color:var(--bleu)}
.tag.ext{background:var(--ambre);color:#fff}
.tag.plancher{background:var(--gris);color:#fff}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));gap:7px;margin-bottom:14px}
.stat{background:var(--blanc);border:1px solid var(--ligne);border-left:2px solid var(--bleu-2);padding:7px 9px;border-radius:3px}
.stat .k{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);font-weight:600}
.stat .v{font-family:'JetBrains Mono',monospace;font-size:15.5px;font-weight:700;margin-top:3px;color:var(--bleu)}
.stat .s{font-size:9.5px;color:var(--gris);margin-top:2px}
.panel{background:var(--blanc);border:1px solid var(--ligne);padding:12px;margin-bottom:14px;border-radius:4px}
.panel>h3{font-size:11.5px;letter-spacing:.12em;color:var(--bleu);border-bottom:1px solid var(--ligne);padding-bottom:6px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.viewsel{display:flex;gap:5px}
.viewsel button{border:1px solid var(--ligne);background:var(--blanc);color:var(--gris);border-radius:3px;padding:3px 8px;font-size:10.5px;cursor:pointer;font-family:'Inter',sans-serif;letter-spacing:0;text-transform:none}
.viewsel button.on{background:var(--bleu);color:#fff;border-color:var(--bleu)}
.plotwrap{overflow-x:auto;background:var(--bleu-tres-pale);border:1px solid var(--ligne);border-radius:3px;padding:10px}
svg.plan{display:block;height:auto!important;max-width:100%}
.zoomsel{display:flex;align-items:center;gap:4px}
.zoomsel button{border:1px solid var(--ligne);background:var(--blanc);color:var(--bleu);border-radius:3px;width:22px;height:22px;font-size:12px;line-height:1;cursor:pointer}
.zoomsel button:hover{border-color:var(--bleu-2);background:var(--bleu-pale)}
.zoomsel .z{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--gris);min-width:34px;text-align:center}
.legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:9px;padding-top:8px;border-top:1px dashed var(--ligne);font-size:10.5px;color:var(--gris)}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;display:inline-block;border-radius:2px}
.groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:14px}
.group h3{font-size:11px;letter-spacing:.12em;color:var(--gris);border-bottom:1px solid var(--ligne);padding-bottom:5px;margin-bottom:1px;display:flex;align-items:center;gap:6px}
.group h3 em{width:8px;height:8px;border-radius:50%;display:inline-block;font-style:normal}
.item{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:5px 0;border-bottom:1px solid #EDF1F4}
.item .n{font-size:12.5px}
.item .n small{display:block;color:var(--gris);font-size:9.5px;margin-top:1px}
.item .q{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:14px;white-space:nowrap;color:var(--bleu)}
.item.spare .q{color:var(--rouge)}
.item.fort{border-bottom:0;border-top:1px solid var(--ligne);margin-top:2px}
.item.fort .n{font-weight:600}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(206px,1fr));gap:0 22px}
.kv .r{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:4px 0;border-bottom:1px solid #EDF1F4}
.kv .r .n{font-size:12px;line-height:1.25}
.kv .r .n small{display:block;color:var(--gris);font-size:9.5px}
.kv .r .v{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px;color:var(--bleu);white-space:nowrap}
.kv .r.fort .n{font-weight:600}
table.load{width:100%;border-collapse:collapse;font-size:12px;align-self:start}
table.load td{padding:4px 0;border-bottom:1px solid #EDF1F4}
table.load td:last-child{text-align:right;font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--bleu)}
table.load td small{color:var(--gris);font-weight:400;display:block;font-size:9.5px}
.note{margin-top:11px;padding:8px 11px;border-left:2px solid var(--bleu-2);background:var(--bleu-tres-pale);font-size:11.5px;color:var(--gris);line-height:1.5;border-radius:0 4px 4px 0}
.note.warn{border-color:var(--ambre);background:var(--ambre-pale);color:#7A5405}
.note b{color:var(--encre)}
.empty{padding:60px 20px;text-align:center;color:var(--gris-2)}
@media print{
  body{background:#fff;font-size:9px}
  .shell{grid-template-columns:1fr;min-height:0}
  .rail{display:none}
  .sheet{padding:0}
  .viewsel,.rowbtn,.zoomsel{display:none}
  .shead{padding-bottom:3px;margin-bottom:4px}
  .shead h2{font-size:14px}
  .projet{font-size:8px;letter-spacing:.1em;margin-bottom:1px}
  .tag{font-size:8px;padding:2px 5px}
  /* bandeau d'infos réduit au minimum lisible */
  .stats{gap:3px;margin-bottom:4px;grid-template-columns:repeat(6,1fr)}
  .stat{padding:3px 5px;border-left-width:2px}
  .stat .k{font-size:6.5px;letter-spacing:.06em}
  .stat .v{font-size:11px;margin-top:1px}
  .stat .s{font-size:7px}
  .panel{padding:5px;margin-bottom:4px;break-inside:avoid;border-color:#ccc}
  .panel>h3{font-size:8.5px;padding-bottom:2px;margin-bottom:4px}
  /* Une seule page : la feuille fait exactement la hauteur de la page et le
     panneau du plan absorbe tout l'espace laissé par les autres blocs. */
  /* hauteur réelle de la zone imprimable, en mm : 100vh vaut la hauteur de
     l'écran dans certains navigateurs, ce qui débordait sur une 2e page */
  /* Hauteur en millimètres réels. Ni 100vh ni height:100% ne sont fiables ici :
     selon le navigateur ils se résolvent sur la fenêtre plutôt que sur la page,
     ce qui déborde sur une 2e feuille. Le sélecteur Format PDF doit donc
     correspondre à l'orientation choisie dans le dialogue d'impression. */
  .sheet{display:flex;flex-direction:column;height:var(--haut-page,183mm);overflow:hidden;padding-top:4mm;break-inside:avoid;page-break-inside:avoid}
  .stats,.shead{flex:0 0 auto}
  .panel{flex:0 0 auto}
  .plan-panel{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
  .plan-panel .plotwrap{flex:1 1 auto;min-height:0;display:flex}
  .plotwrap{background:#fff;border:0;padding:0;overflow:hidden}
  svg.plan{width:100%!important;height:100%!important;max-height:none;flex:1 1 auto;min-height:0}
  .legend{font-size:6.5px;gap:6px;margin-top:3px;padding-top:3px}
  .legend i{width:7px;height:7px}
  .kv{gap:0 14px}
  .kv .r{padding:2px 0}
  .kv .r .n{font-size:8px}
  .kv .r .n small{font-size:6.5px}
  .kv .r .v{font-size:9px}
  .groups{gap:9px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .group h3{font-size:8px;padding-bottom:3px}
  .item{padding:2px 0}
  .item .n{font-size:8px}
  .item .n small{font-size:6.5px}
  .item .q{font-size:10px}
  .note{font-size:7.5px;padding:5px 7px;margin-top:6px;border-left-width:2px}
}
</style>
<style id="reglePage">@page{ size:letter landscape; margin:7mm }</style>
</head>
<body>
<div class="shell">

<aside class="rail">
  <div class="brand">
    <h1>Liste d'écran LED</h1>
    <p>Éclat Audiovisuel — préparation entrepôt</p>
    <div class="bar"></div>
  </div>
  <div>
    <label class="lb" for="projet">Nom du projet</label>
    <input type="text" id="projet" placeholder="Ex. Festival d'été — scène principale" autocomplete="off">
  </div>
  <div>
    <label class="lb">Écrans du projet</label>
    <div class="tabs" id="tabs"></div>
  </div>
  <details class="blk" open>
    <summary>Panneau</summary>
    <div class="body">
      <div class="modtitre"><span>YESTECH MG9 P2.9 outdoor</span>
        <button class="lien" id="editPanneau">Modifier</button></div>
      <div class="specs" id="specsRO"></div>
      <div id="specsEd" style="display:none">
      <div class="grid3">
        <div><label class="lb">Larg. mm</label><input type="number" id="mW" step="1"></div>
        <div><label class="lb">Haut. mm</label><input type="number" id="mH" step="1"></div>
        <div><label class="lb">Pitch</label><input type="number" id="mPitch" step="0.001"></div>
      </div>
      <div class="grid3">
        <div><label class="lb">Rés. H</label><input type="number" id="mResH" step="1"></div>
        <div><label class="lb">Rés. V</label><input type="number" id="mResV" step="1"></div>
        <div><label class="lb">Poids lb</label><input type="number" id="mWt" step="0.1"></div>
      </div>
      <div class="grid3">
        <div><label class="lb">Pan./coffre</label><input type="number" id="mCase" step="1"></div>
        <div><label class="lb">W max</label><input type="number" id="mPmax" step="1"></div>
        <div><label class="lb">W moy.</label><input type="number" id="mPavg" step="1"></div>
      </div>
      <span class="sub">Puissances à confirmer sur la fiche technique du MG9. Les valeurs modifiées ne s'appliquent qu'à cet écran.</span>
      </div>
  </details>
  <details class="blk" open>
    <summary>Dimensions</summary>
    <div class="body">
      <div class="seg c2" role="group">
        <button data-mode="grid" aria-pressed="true">Grille</button>
        <button data-mode="size" aria-pressed="false">Mesure</button>
      </div>
      <div id="modeGrid">
        <div class="grid2">
          <div><label class="lb">Colonnes</label>
            <div class="step"><button data-adj="cols" data-d="-1">−</button><span class="v" id="vCols">6</span><button data-adj="cols" data-d="1">+</button></div>
          </div>
          <div><label class="lb">Rangées</label>
            <div class="step"><button data-adj="rows" data-d="-1">−</button><span class="v" id="vRows">4</span><button data-adj="rows" data-d="1">+</button></div>
          </div>
        </div>
      </div>
      <div id="modeSize" style="display:none">
        <div class="seg c2" role="group" style="margin-bottom:12px">
          <button data-unit="m" aria-pressed="true">Mètres</button>
          <button data-unit="ft" aria-pressed="false">Pieds</button>
        </div>
        <div class="grid2">
          <div><label class="lb">Largeur</label><input type="number" id="inW" step="0.1"><span class="sub u-lbl">m</span></div>
          <div><label class="lb">Hauteur</label><input type="number" id="inH" step="0.1"><span class="sub u-lbl">m</span></div>
        </div>
      </div>
      <div>
        <label class="lb">Ratio cible</label>
        <select id="ratio">
          <option value="0">Libre</option>
          <option value="1.7778">16:9</option>
          <option value="1.6">16:10</option>
          <option value="1.3333">4:3</option>
          <option value="2">2:1</option>
          <option value="2.3529">2.35:1</option>
          <option value="3">3:1</option>
        </select>
        <span class="sub" id="ratioHint"></span>
      </div>
      <div>
        <label class="lb">Installation</label>
        <div class="seg c3" role="group">
          <button data-env="int" aria-pressed="false">Intérieur</button>
          <button data-env="ext" aria-pressed="true">Extérieur</button>
          <button data-env="plancher" aria-pressed="false">Plancher</button>
        </div>
      </div>
    </div>
  </details>
  <details class="blk" open>
    <summary>Puissance</summary>
    <div class="body">
      <div>
        <label class="lb">Niveau de dim — <span id="dimVal" class="mono">100</span> %</label>
        <input type="range" id="dim" min="10" max="100" step="5" value="100">
      </div>
      <div>
        <label class="lb">Tension</label>
        <div class="seg c3" role="group">
          <button data-v="120" aria-pressed="false">120 V</button>
          <button data-v="208" aria-pressed="true">208 V</button>
          <button data-v="240" aria-pressed="false">240 V</button>
        </div>
      </div>
      <div>
        <label class="lb">Ampères / circuit</label>
        <div class="seg c3" role="group">
          <button data-a="15" aria-pressed="false">15 A</button>
          <button data-a="20" aria-pressed="true">20 A</button>
          <button data-a="30" aria-pressed="false">30 A</button>
        </div>
      </div>
      <div>
        <label class="lb">Découpage réseau</label>
        <div class="seg c2" role="group">
          <button data-c5="max" aria-pressed="true">Min. de Cat5</button>
          <button data-c5="power" aria-pressed="false">Suivre le courant</button>
        </div>
        <span class="sub" id="c5Hint"></span>
      </div>
      <div>
        <label class="lb">Base de calcul des circuits</label>
        <div class="seg c2" role="group">
          <button data-pb="max" aria-pressed="true">Puiss. max</button>
          <button data-pb="avg" aria-pressed="false">Puiss. moy.</button>
        </div>
        <span class="sub">La règle 80 % (CSA C22.1) est toujours appliquée.</span>
      </div>
    </div>
  </details>
  <details class="blk" open>
    <summary>Accroche & poids</summary>
    <div class="body">
      <div id="blocMoteurs">
        <label class="lb">Moteurs / points de levage</label>
        <div class="step"><button data-adj="motors" data-d="-1">−</button><span class="v" id="vMotors">2</span><button data-adj="motors" data-d="1">+</button></div>
        <span class="sub">Sert au calcul de charge par moteur.</span>
      </div>
      <div class="modtitre"><span>Poids unitaires (lb)</span>
        <button class="lien" id="editPoids">Modifier</button></div>
      <div class="specs" id="poidsRO"></div>
      <div id="poidsEd" style="display:none">
        <div class="grid2">
          <div><label class="lb">Bumper 1000</label><input type="number" id="wBar1000" value="20" step="0.5"></div>
          <div><label class="lb">Bumper 500</label><input type="number" id="wBar500" value="12" step="0.5"></div>
        </div>
        <div class="grid3" style="margin-top:9px">
          <div><label class="lb">Manille</label><input type="number" id="wShackle" value="0.5" step="0.1"></div>
          <div><label class="lb">Turnbuckle</label><input type="number" id="wTurn" value="2" step="0.1"></div>
          <div><label class="lb">Steelflex</label><input type="number" id="wFlex" value="2" step="0.1"></div>
        </div>
        <span class="sub">Poids en livres, par pièce. À remplacer par les valeurs réelles de l'inventaire.</span>
      </div>
    </div>
  </details>
  <div>
    <label class="lb">Format PDF</label>
    <div class="seg c2" role="group">
      <button data-fmt="paysage" aria-pressed="true">Paysage</button>
      <button data-fmt="portrait" aria-pressed="false">Portrait</button>
    </div>
    <span class="sub" id="fmtHint"></span>
  </div>
  <div class="rowbtn">
    <button id="btnCopy">Copier</button>
    <button id="btnCsv">CSV</button>
    <button id="btnPrint">PDF</button>
  </div>
  <div class="rowbtn">
    <button id="btnSave" class="pri">Sauvegarder le projet</button>
    <button id="btnOpen">Ouvrir</button>
  </div>
  <input type="file" id="fichierProjet" accept=".json,application/json" style="display:none">
  <span class="sub" id="etatFichier">Le fichier .json rouvre le projet complet : écrans, panneau, poids et réglages.</span>
</aside>
<main class="sheet" id="sheet"></main>
</div>
<script>
/* =======================================================================
   RÈGLES
   ======================================================================= */
const R = {
  backupPanneau  : 1,
  bumperRetraitMM: 500,     // bumper = largeur écran − 500 mm
  ptsParBar1000  : 2,       // points d'accroche sur une barre de 1000 mm
  ptsParBar500   : 1,       // points d'accroche sur une barre de 500 mm
  maxPanneauxCat5: 23,      // valeur fixe
  panneauxParMG9 : 50,
  mg9Min         : 2,
  facteurCSA     : 0.80,
  conn: { int:{parPanneau:2, backup:5}, ext:{parPanneau:3, backup:10}, plancher:{parPanneau:2, backup:5} },
  /* Plancher : l'écran est empilé au sol, bumper en bas, aucune accroche. */
  plancher: { connVertPar1000:4, connVertPar500:2,
              pattePar1000:4,   pattePar500:2,
              panneauxParU:4,   uMin:4 },
  /* Extérieur seulement — plaques grand vent aux croisements de 4 panneaux.
     Une rangée de croisements sur deux porte des plaques AVEC clamp,
     en commençant par la première (entre la rangée 1 et la rangée 2). */
  vent: { boulonsParPlaque:4, panneauxParCle:50, cleMin:1, cleMax:3, cadenceClamp:3 }
};
const LB = 0.45359237, FT = 0.3048;
const ZOOMS = [0.4,0.5,0.6,0.75,0.9,1,1.25,1.5,2];
const CELL_PX = 34, MARGE_PLAN = 182;   // doivent rester alignés sur plan()
/* Par défaut le plan est à sa taille naturelle ; il n'est réduit que
   s'il dépasse une largeur confortable à l'écran. */
const zoomDefaut = d => {
  const W = d.nW*CELL_PX + MARGE_PLAN;
  return [...ZOOMS].reverse().find(z => W*z <= 1000 && z <= 1) || ZOOMS[0];
};
const CIRC_COL = ['#D9871B','#3D8A5B','#8E5FB0','#C0442C','#2A9D8F','#B07A3E','#7BA23F','#C25E8A','#6E7B8A','#A0762B'];
const COL_CAT5 = '#0E4C81';
const MODELE_DEF = {
  nom:'YESTECH MG9 P2.9 outdoor',
  w:500, h:500, pitch:2.976, resH:168, resV:168,
  wt:14.6,            // 6.6 kg selon la fiche constructeur
  perCase:10,
  pMax:120, pAvg:65   // estimations — à confirmer
};
const nouvelEcran = (n) => ({
  nom:'Écran '+n, modele:{...MODELE_DEF}, mode:'grid', unit:'m',
  cols:6, rows:4, inW:3, inH:2, ratio:0, env:'ext',
  dim:100, volts:208, amps:20, pBase:'max', cat5Mode:'max', motors:2, vue:'avant', calque:'tout', zoom:1
});
let S = { ecrans:[nouvelEcran(1)], actif:0, projet:'', editPanneau:false, editPoids:false, formatPDF:'paysage',
          wBar1000:20, wBar500:12, wShackle:0.5, wTurn:2, wFlex:2 };
const E = () => S.ecrans[S.actif];
/* =======================================================================
   CALCUL
   Convention : la colonne 1 est celle de DROITE (vue avant).
   Le panneau #1 = R1C1 = haut à droite. Le câblage part de la droite.
   ======================================================================= */
function calc(e){
  const m = e.modele;
  const pw = m.w/1000, ph = m.h/1000;
  let nW, nH;
  if(e.mode === 'grid'){ nW = e.cols; nH = e.rows; }
  else {
    const k = e.unit === 'ft' ? FT : 1;
    nW = Math.max(0, Math.ceil((e.inW*k)/pw - 1e-6));
    nH = Math.max(0, Math.ceil((e.inH*k)/ph - 1e-6));
  }
  if(!nW || !nH) return null;
  const total = nW*nH;
  const realW = nW*pw, realH = nH*ph;
  const resW = nW*m.resH, resH = nH*m.resV;
  const perCase = Math.max(1, m.perCase||10);
  const coffres = Math.ceil((total + R.backupPanneau)/perCase);
  const fournis = coffres*perCase;
  const spares  = fournis - total;
  /* --- bumper : barres de 1000 puis une de 500 si la longueur est impaire --- */
  const estPlancher = e.env === 'plancher';
  const bumperM = Math.max(0, realW - R.bumperRetraitMM/1000);
  const demis   = Math.round(bumperM/0.5);          // nb de sections de 500 mm
  const bar1000 = Math.floor(demis/2);
  const bar500  = demis % 2;
  /* au plancher le bumper sert de base : pas de point d'accroche */
  const points  = estPlancher ? 0 : bar1000*R.ptsParBar1000 + bar500*R.ptsParBar500;
  /* --- quincaillerie propre au montage au plancher --- */
  const P = R.plancher;
  const connVert = estPlancher ? bar1000*P.connVertPar1000 + bar500*P.connVertPar500 : 0;
  const pattes   = estPlancher ? bar1000*P.pattePar1000    + bar500*P.pattePar500    : 0;
  const connU    = estPlancher ? Math.max(P.uMin, Math.ceil(total/P.panneauxParU))   : 0;
  const kgPan  = total * m.wt * LB;
  const kgBar  = (bar1000*S.wBar1000 + bar500*S.wBar500) * LB;
  const kgHard = points * (S.wShackle + S.wTurn + S.wFlex) * LB;
  const kgTot  = kgPan + kgBar + kgHard;
  const motors = Math.max(1, e.motors);
  /* --- puissance --- */
  const wPan   = e.pBase === 'avg' ? (m.pAvg||m.pMax) : m.pMax;
  const dimK   = e.dim/100;
  const wMax   = total*m.pMax;
  const wDim   = total*wPan*dimK;
  const capW   = e.volts*e.amps*R.facteurCSA;
  const parCirc= Math.max(1, Math.floor(capW/Math.max(1, wPan*dimK)));
  const ampsTot  = wDim/e.volts;
  /* --- Tout arrive à droite. Une rangée = 1 Cat5 + 1 circuit AC.
         L'écran est d'abord découpé en blocs de colonnes selon la capacité
         d'un circuit ; le réseau suit ces mêmes frontières pour que le Cat5
         et le courant restent ensemble. Un bloc trop large pour un seul Cat5
         est subdivisé en runs égaux, toujours à l'intérieur du bloc.
         La numérotation descend colonne par colonne : bloc 1 rangées 1..n,
         puis bloc 2 rangées 1..n, etc. --- */
  /* Découpage en blocs de largeur ÉQUILIBRÉE : on prend le nombre minimal de
     blocs, puis on répartit les colonnes également au lieu de remplir au
     maximum et de laisser un reliquat. 28 colonnes à 27 max -> 14 + 14,
     jamais 27 + 1. */
  const repartir = (c0deb, c1fin, maxTaille) => {
    const out = [], large = c1fin - c0deb + 1;
    const n = Math.ceil(large/maxTaille);
    const base = Math.floor(large/n), reste = large % n;
    let c = c0deb;
    for(let i=0;i<n;i++){
      const t = base + (i < reste ? 1 : 0);
      out.push({c0:c, c1:c+t-1});
      c += t;
    }
    return out;
  };
  const acBlocs = repartir(0, nW-1, parCirc);
  /* Deux stratégies de découpage réseau, au choix :
     'max'   — le moins de Cat5 possible, la rangée étant divisée en runs ÉGAUX
               (24 de large -> 2 runs de 12, jamais 23 + 1).
     'power' — les runs Cat5 respectent les frontières des circuits et sont
               subdivisés à l'intérieur d'un bloc s'il dépasse la limite Cat5. */
  const decoupeEgale = (c0deb, c1fin) => repartir(c0deb, c1fin, R.maxPanneauxCat5);
  /* découpage calé sur les circuits, et découpage en parts égales sur toute la rangée */
  const decoupeAlignee = [];
  acBlocs.forEach(b=> decoupeAlignee.push(...decoupeEgale(b.c0, b.c1)));
  const decoupeLibre = decoupeEgale(0, nW-1);
  const cat5Blocs = [];
  if(e.cat5Mode === 'power'){
    cat5Blocs.push(...decoupeAlignee);
  } else {
    /* « Cat5 max 23 » vise le minimum de câbles. Quand l'alignement sur les
       circuits n'en coûte aucun de plus, on le prend : à nombre de câbles
       égal, un run qui ne traverse pas un circuit vaut toujours mieux. */
    cat5Blocs.push(...(decoupeAlignee.length <= decoupeLibre.length ? decoupeAlignee : decoupeLibre));
  }
  /* les deux découpages coïncident-ils exactement ? */
  const blocsAlignes = cat5Blocs.length === acBlocs.length &&
    cat5Blocs.every((b,i)=> b.c0 === acBlocs[i].c0 && b.c1 === acBlocs[i].c1);
  const acParRangee   = acBlocs.length;
  const cat5ParRangee = cat5Blocs.length;
  const circuits      = nH*acParRangee;
  const cables        = nH*cat5ParRangee;
  const acMap = [];
  acBlocs.forEach((b,k)=>{ for(let r=0;r<nH;r++) acMap.push({r, c0:b.c0, c1:b.c1, no: k*nH + r + 1}); });
  const cat5Map = [];
  cat5Blocs.forEach((b,k)=>{ for(let r=0;r<nH;r++) cat5Map.push({r, c0:b.c0, c1:b.c1, no: k*nH + r + 1}); });
  const blocDeColonne = new Array(nW);
  acBlocs.forEach((b,k)=>{ for(let c=b.c0;c<=b.c1;c++) blocDeColonne[c] = k; });
  /* un run Cat5 chevauche-t-il deux circuits ? (plus grave qu'un simple décalage) */
  const runsTraversent = cat5Blocs.some(b => blocDeColonne[b.c0] !== blocDeColonne[b.c1]);
  const circMap = Array.from({length:nH}, (_,r)=>
    Array.from({length:nW}, (_,c)=> blocDeColonne[c]*nH + r));
  /* --- plaques grand vent (extérieur) ---
     Une plaque à chaque croisement interne de 4 panneaux :
     (nW-1) colonnes de croisement × (nH-1) rangées de croisement.
     Les rangées de croisement alternent : 1re avec clamp, 2e sans, etc. */
  const ventCol   = Math.max(0, nW-1);
  const ventRang  = Math.max(0, nH-1);
  /* Cadence 1-2-1-2-1 : une rangée de croisements AVEC clamp, puis deux sans. */
  const ventRangClamp  = Math.ceil(ventRang/R.vent.cadenceClamp);
  const ventRangSimple = ventRang - ventRangClamp;
  const ventClamp = e.env==='ext' ? ventRangClamp  * ventCol : 0;
  const ventSimple= e.env==='ext' ? ventRangSimple * ventCol : 0;
  const ventTotal = ventClamp + ventSimple;
  const ventBoulons = ventTotal * R.vent.boulonsParPlaque;
  const ventCle   = ventTotal ? Math.min(R.vent.cleMax, Math.max(R.vent.cleMin, Math.ceil(total/R.vent.panneauxParCle))) : 0;
  const mg9 = Math.max(R.mg9Min, Math.ceil(total/R.panneauxParMG9));
  const cc  = R.conn[e.env];
  const connBase = total*cc.parPanneau;
  return {nW,nH,total,realW,realH,resW,resH,pw,ph,
          coffres,fournis,spares,perCase,
          bumperM,bar1000,bar500,points,
          kgPan,kgBar,kgHard,kgTot,motors,
          cat5ParRangee,acParRangee,cables,cat5Map,acMap,blocsAlignes,runsTraversent,acBlocs,cat5Blocs,
          wPan,wMax,wDim,capW,parCirc,circuits,ampsTot,circMap,
          estPlancher,connVert,pattes,connU,
          ventCol,ventRang,ventRangClamp,ventRangSimple,ventClamp,ventSimple,ventTotal,ventBoulons,ventCle,
          mg9,connBase,connBackup:cc.backup,connTotal:connBase+cc.backup,connPar:cc.parPanneau,
          visMin:m.pitch, visOpt:m.pitch*2.5};
}
/* =======================================================================
   PLAN
   ======================================================================= */
function plan(e,d){
  const CELL = 34, PAD = 54, BH = 13, GAP = 22, MARGE = 74;  // MARGE = place des étiquettes d'entrée
  const miroirTmp = e.vue === 'arriere';
  const plancher  = d.estPlancher;                 // bumper sous l'écran
  const gx = PAD + (miroirTmp ? MARGE : 0);
  const gy = PAD + (plancher ? 0 : BH + GAP);
  const gw = d.nW*CELL, gh = d.nH*CELL;
  const yBumper = plancher ? gy + gh + GAP : PAD;
  const yCotes  = plancher ? yBumper + BH + 48 : gy + gh + 24;
  const W = gw + PAD*2 + MARGE, H = yCotes + 34;
  const miroir = miroirTmp;
  const showNet = e.calque === 'tout' || e.calque === 'reseau';
  const showAC  = e.calque === 'tout' || e.calque === 'ac';
  const showVent= e.calque === 'tout' || e.calque === 'vent';
  /* colonne logique -> position à l'écran.
     Vue avant : C1 à droite.  Vue arrière : C1 à gauche. */
  const px = c => gx + (miroir ? c : d.nW-1-c)*CELL;
  /* étiquette compacte avec fond blanc, lisible par-dessus les teintes */
  const etiq = (x, yBase, txt, couleur, larg) =>
      `<rect x="${x-larg/2}" y="${yBase-8}" width="${larg}" height="10.5" rx="1.5" fill="#fff" opacity=".93"/>`
    + `<text x="${x}" y="${yBase}" text-anchor="middle" font-family="JetBrains Mono,monospace" font-size="8" font-weight="700" fill="${couleur}">${txt}</text>`;
  const zoom = e.zoom || zoomDefaut(d);
  let s = `<svg class="plan" width="${Math.round(W*zoom)}" height="${Math.round(H*zoom)}" viewBox="0 0 ${W} ${H}" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Plan de l'écran">`;
  /* ---- bumper + points d'accroche (ou base au sol) ---- */
  if(d.bumperM > 0){
    const bw = (d.bumperM/d.pw)*CELL, bx = gx + (gw-bw)/2, by = yBumper;
    s += `<rect x="${bx}" y="${by}" width="${bw}" height="${BH}" fill="#D9871B" rx="1.5"/>`;
    /* séquence des barres, de gauche à droite */
    /* La barre de 500 mm, quand il y en a une, se place au centre du bumper
       plutôt qu'à une extrémité — l'assemblage reste symétrique. */
    const bars = Array(d.bar1000).fill(1000);
    if(d.bar500) bars.splice(Math.floor(d.bar1000/2), 0, 500);
    let xcur = bx;
    bars.forEach((len,i)=>{
      const bwPx = (len/1000/d.pw)*CELL;   // largeur de la barre en pixels
      const nPts = len === 1000 ? R.ptsParBar1000 : R.ptsParBar500;
      if(plancher){
        /* pattes sous la barre, même répartition que les points d'accroche */
        const nPattes = len === 1000 ? R.plancher.pattePar1000 : R.plancher.pattePar500;
        for(let k=0;k<nPattes;k++){
          const cx = xcur + bwPx*(k+0.5)/nPattes;
          s += `<line x1="${cx}" y1="${by+BH}" x2="${cx}" y2="${by+BH+6}" stroke="#8F5806" stroke-width="1.5"/>`;
          s += `<rect x="${cx-4}" y="${by+BH+6}" width="8" height="4" fill="#8F5806" rx="1"/>`;
        }
      } else {
        /* points d'accroche répartis également sur la barre */
        for(let k=0;k<nPts;k++){
          const cx = xcur + bwPx*(k+0.5)/nPts;
          s += `<line x1="${cx}" y1="${by-7}" x2="${cx}" y2="${by}" stroke="#8F5806" stroke-width="1.5"/>`;
          s += `<circle cx="${cx}" cy="${by-10}" r="3.6" fill="#D9871B" stroke="#8F5806" stroke-width="1.2"/>`;
        }
      }
      xcur += bwPx;
      if(i < bars.length-1)
        s += `<line x1="${xcur}" y1="${by}" x2="${xcur}" y2="${by+BH}" stroke="#8F5806" stroke-width="1.8"/>`;
    });
    s += plancher
      ? `<text x="${bx+bw/2}" y="${by+BH+28}" text-anchor="middle" font-family="JetBrains Mono,monospace" font-size="10.5" fill="#7A5405">${d.bumperM.toFixed(2)} m de bumper au sol · ${d.pattes} pattes · ${d.connVert} connecteurs verticaux</text>`
      : `<text x="${bx+bw/2}" y="${by-20}" text-anchor="middle" font-family="JetBrains Mono,monospace" font-size="10.5" fill="#7A5405">${d.bumperM.toFixed(2)} m de bumper · ${d.points} points d'accroche</text>`;
  }
  /* ---- panneaux ---- */
  for(let r=0;r<d.nH;r++) for(let c=0;c<d.nW;c++){
    const x = px(c), y = gy + r*CELL;
    const fill = showAC ? CIRC_COL[d.circMap[r][c] % CIRC_COL.length]+'2E' : '#FFFFFF';
    s += `<rect x="${x}" y="${y}" width="${CELL}" height="${CELL}" fill="${fill}" stroke="#A9B5C0" stroke-width="1"/>`;
    s += `<text x="${x+CELL/2}" y="${y+CELL/2+4}" text-anchor="middle" font-family="JetBrains Mono,monospace" font-size="11" fill="#6B7885">${r+1}.${c+1}</text>`;
  }
  s += `<rect x="${gx}" y="${gy}" width="${gw}" height="${gh}" fill="none" stroke="#0E4C81" stroke-width="2"/>`;
  /* trait fort à chaque frontière de bloc électrique */
  for(let k=1;k<d.acBlocs.length;k++){
    const cFront = d.acBlocs[k].c0;                   // 1re colonne du bloc suivant
    const xf = miroir ? px(cFront) : px(cFront) + CELL;
    s += `<line x1="${xf}" y1="${gy}" x2="${xf}" y2="${gy+gh}" stroke="#0E4C81" stroke-width="2" stroke-dasharray="6 3"/>`;
  }
  /* ---- plaques grand vent aux croisements de 4 panneaux (extérieur) ---- */
  if(showVent && d.ventTotal){
    const rP = Math.max(4.5, CELL*0.21);
    for(let rj=0;rj<d.ventRang;rj++){
      const avecClamp = rj % R.vent.cadenceClamp === 0;   // 1 rangée avec clamp, puis 2 sans
      const yj = gy + (rj+1)*CELL;
      for(let cj=0;cj<d.ventCol;cj++){
        const xj = miroir ? gx + (cj+1)*CELL : gx + gw - (cj+1)*CELL;
        s += `<circle cx="${xj}" cy="${yj}" r="${rP}" fill="${avecClamp ? '#F2D024' : '#E07B39'}" stroke="#8A6207" stroke-width="1"/>`;
      }
    }
  }
  /* ---- runs Cat5 : tout entre par le côté d'arrivée (droite en vue avant) ---- */
  const xEntree = miroir ? gx : gx + gw;          // bord d'arrivée des câbles
  const sens    = miroir ? 1 : -1;                // direction du run vers l'écran
  if(showNet){
    d.cat5Map.forEach(run=>{
      const y = gy + run.r*CELL + CELL/2 - 10;   // au-dessus du numéro de panneau
      const a = px(run.c0) + CELL/2, b = px(run.c1) + CELL/2;
      s += `<line x1="${a}" y1="${y}" x2="${b}" y2="${y}" stroke="${COL_CAT5}" stroke-width="1.8" stroke-dasharray="4 3" opacity=".9"/>`;
      s += `<path d="M ${b} ${y} l ${7*sens*-1} -4 l 0 8 z" fill="${COL_CAT5}"/>`;
      /* piquage depuis le bord pour le premier run, repère sur place pour les suivants */
      if(run.c0 === 0){
        s += `<line x1="${xEntree - sens*16}" y1="${y}" x2="${a}" y2="${y}" stroke="${COL_CAT5}" stroke-width="1.8"/>`;
        s += `<circle cx="${xEntree - sens*16}" cy="${y}" r="4.2" fill="${COL_CAT5}"/>`;
        s += `<text x="${xEntree - sens*24}" y="${y+3.5}" text-anchor="${miroir?'end':'start'}" font-family="JetBrains Mono,monospace" font-size="9.5" font-weight="700" fill="${COL_CAT5}">C5·${run.no}</text>`;
      } else {
        s += `<circle cx="${a}" cy="${y}" r="4.2" fill="${COL_CAT5}"/>`;
        /* quand réseau et électrique partagent le même découpage, un seul repère suffit */
        const memeNo = d.blocsAlignes;
        s += etiq(a, y-8, memeNo ? `C5/AC·${run.no}` : `C5·${run.no}`, COL_CAT5, memeNo ? 46 : 28);
      }
    });
  }
  /* ---- entrées AC, une par rangée, du même côté ---- */
  if(showAC){
    d.acMap.forEach(run=>{
      const y = gy + run.r*CELL + CELL/2 + 10;   // en dessous du numéro de panneau
      const col = CIRC_COL[(run.no-1) % CIRC_COL.length];
      const a = px(run.c0) + CELL/2;
      if(run.c0 === 0){
        s += `<line x1="${xEntree - sens*16}" y1="${y}" x2="${a}" y2="${y}" stroke="${col}" stroke-width="1.8"/>`;
        s += `<rect x="${xEntree - sens*16 - 3.6}" y="${y-3.6}" width="7.2" height="7.2" fill="${col}"/>`;
        s += `<text x="${xEntree - sens*24}" y="${y+3.5}" text-anchor="${miroir?'end':'start'}" font-family="JetBrains Mono,monospace" font-size="9.5" font-weight="700" fill="${col}">AC·${run.no}</text>`;
      } else {
        s += `<rect x="${a-3.6}" y="${y-3.6}" width="7.2" height="7.2" fill="${col}"/>`;
        if(!d.blocsAlignes) s += etiq(a, y+13, `AC·${run.no}`, col, 28);
      }
    });
  }
  /* ---- cotes ---- */
  s += `<text x="${gx+gw/2}" y="${yCotes}" text-anchor="middle" font-family="JetBrains Mono,monospace" font-size="11" fill="#16202B">${d.realW.toFixed(2)} m — ${d.nW} colonnes</text>`;
  /* la cote verticale se met du côté opposé aux arrivées de câbles */
  const xCote = miroir ? gx + gw + 24 : gx - 24;
  s += `<text x="${xCote}" y="${gy+gh/2}" text-anchor="middle" font-family="JetBrains Mono,monospace" font-size="11" fill="#16202B" transform="rotate(-90 ${xCote} ${gy+gh/2})">${d.realH.toFixed(2)} m — ${d.nH} rangées</text>`;
  s += `<text x="${gx+gw/2}" y="${yCotes+16}" text-anchor="middle" font-family="Inter,sans-serif" font-size="11" fill="#5A6773">${miroir?'Vue arrière (côté technicien) — arrivées à gauche sur cette vue':'Vue avant (côté public) — toutes les arrivées à droite'}</text>`;
  return s + `</svg>`;
}
/* =======================================================================
   RENDU
   ======================================================================= */
const NOM_ENV = {int:'Intérieur', ext:'Extérieur', plancher:'Plancher'};
const f2 = n => n.toFixed(2);
const lb = kg => kg/LB;
/* toute valeur impériale est doublée de son équivalent métrique */
const lbkg = kg => `${lb(kg).toFixed(0)} lb · ${kg.toFixed(0)} kg`;
const watts = w => Math.round(w).toLocaleString('fr-CA').replace(/\u202f|\u00a0/g,' ') + ' W';
const kv = (nom, sous, val, cls='') =>
  `<div class="r ${cls}"><div class="n">${nom}${sous?`<small>${sous}</small>`:''}</div><div class="v">${val}</div></div>`;
const ligne = (nom, sous, qte, cls='') =>
  `<div class="item ${cls}"><div class="n">${nom}${sous?`<small>${sous}</small>`:''}</div><div class="q">${qte}</div></div>`;
function renderTabs(){
  document.getElementById('tabs').innerHTML =
    S.ecrans.map((e,i)=>`<div class="t ${i===S.actif?'on':''}" data-tab="${i}">${e.nom}${S.ecrans.length>1?` <i data-del="${i}">×</i>`:''}</div>`).join('')
    + `<button class="add" id="addScreen">+ Écran</button>`;
}
function renderSheet(){
  const e = E(), d = calc(e), out = document.getElementById('sheet');
  if(!d){ out.innerHTML = `<div class="empty">Choisis une grille ou une mesure pour générer la liste.</div>`; return; }
  const bumperTxt = [d.bar1000?`${d.bar1000} × 1000 mm`:null, d.bar500?`${d.bar500} × 500 mm (centrée)`:null]
                    .filter(Boolean).join(' + ') || 'aucun';
  out.innerHTML = `
  <div class="shead">
    <div>
      ${S.projet ? `<div class="projet">${S.projet}</div>` : ''}
      <h2>${e.nom} — ${d.nW}×${d.nH} · ${d.total} panneaux</h2>
    </div>
    <span class="tag ${e.env}">${NOM_ENV[e.env]}</span>
  </div>
  <div class="stats">
    <div class="stat"><div class="k">Dimensions</div><div class="v">${f2(d.realW)} × ${f2(d.realH)} m</div>
      <div class="s">${(d.realW/FT).toFixed(1)} × ${(d.realH/FT).toFixed(1)} pi · ratio ${(d.realW/d.realH).toFixed(2)}:1</div></div>
    <div class="stat"><div class="k">Résolution</div><div class="v">${d.resW} × ${d.resH}</div>
      <div class="s">${(d.resW*d.resH/1e6).toFixed(2)} Mpx · pitch ${e.modele.pitch} mm</div></div>
    <div class="stat"><div class="k">Poids total</div><div class="v">${lb(d.kgTot).toFixed(0)} lb</div>
      <div class="s">${d.kgTot.toFixed(1)} kg — écran + accroche</div></div>
    <div class="stat"><div class="k">Puissance @ ${e.dim} %</div><div class="v">${watts(d.wDim)}</div>
      <div class="s">${d.ampsTot.toFixed(1)} A @ ${e.volts} V · max ${watts(d.wMax)}</div></div>
    <div class="stat"><div class="k">Distance de vision</div><div class="v">${d.visMin.toFixed(1)} m</div>
      <div class="s">confortable à partir de ${d.visOpt.toFixed(1)} m</div></div>
  </div>
  <div class="panel plan-panel">
    <h3>Plan
      <span style="display:flex;gap:14px;flex-wrap:wrap">
        <span class="viewsel">
          <button data-vue="avant" class="${e.vue==='avant'?'on':''}">Vue avant</button>
          <button data-vue="arriere" class="${e.vue==='arriere'?'on':''}">Vue arrière</button>
        </span>
        <span class="zoomsel">
          <button data-zoom="-1" title="Réduire">−</button>
          <span class="z">${Math.round((e.zoom||zoomDefaut(d))*100)} %</span>
          <button data-zoom="1" title="Agrandir">+</button>
        </span>
        <span class="viewsel">
          <button data-calque="tout" class="${e.calque==='tout'?'on':''}">Tout</button>
          <button data-calque="reseau" class="${e.calque==='reseau'?'on':''}">Réseau</button>
          <button data-calque="ac" class="${e.calque==='ac'?'on':''}">Électrique</button>
          ${e.env==='ext' ? `<button data-calque="vent" class="${e.calque==='vent'?'on':''}">Grand vent</button>` : ''}
          <button data-calque="nu" class="${e.calque==='nu'?'on':''}">Nu</button>
        </span>
      </span>
    </h3>
    <div class="plotwrap">${plan(e,d)}</div>
    <div class="legend">
      <span><i style="background:#fff;border:1px solid #A9B5C0"></i>Panneau ${e.modele.w}×${e.modele.h} mm</span>
      <span><i style="background:#D9871B"></i>Bumper</span>
      <span><i style="background:#D9871B;border-radius:50%"></i>Point d'accroche — 2 par barre de 1 m, 1 par barre de 500</span>
      <span><i style="background:#0E4C81;border-radius:50%"></i>Entrée Cat5 — suit le découpage électrique</span>
      <span><i style="background:#D9871B"></i>Entrée AC — une par rangée, arrivée à droite</span>
      <span><i style="background:#D9871B2E;border:1px solid #D9871B"></i>Teinte de panneau = circuit AC</span>
      ${e.env==='ext' ? `<span><i style="background:#F2D024;border-radius:50%"></i>Plaque grand vent avec clamp</span>
      <span><i style="background:#E07B39;border-radius:50%"></i>Plaque grand vent</span>` : ''}
    </div>
  </div>
  <div class="panel">
    <h3>Charge et puissance</h3>
    <div class="kv">
      ${kv('Panneaux', `${d.total} × ${e.modele.wt} lb (${(e.modele.wt*LB).toFixed(1)} kg)`, lbkg(d.kgPan))}
      ${kv('Bumper', bumperTxt, lbkg(d.kgBar))}
      ${d.estPlancher ? '' : kv('Quincaillerie', `${d.points} pts d'accroche`, lbkg(d.kgHard))}
      ${kv('Poids total', `${(lb(d.kgTot)/2000).toFixed(2)} tonnes courtes`, lbkg(d.kgTot), 'fort')}
      ${d.estPlancher ? '' : kv('Par moteur', `sur ${d.motors}`, lbkg(d.kgTot/d.motors))}
      ${kv('Puissance', `${d.wPan} W/panneau ${e.pBase==='avg'?'(moy.)':'(max)'} @ ${e.dim} %`, watts(d.wDim))}
      ${kv('Capacité / circuit', `${e.volts} V × ${e.amps} A × 80 %`, d.capW.toFixed(0)+' W')}
      ${kv('Panneaux / circuit', 'capacité max', d.parCirc)}
      ${kv('Circuits requis', `${d.acParRangee} bloc${d.acParRangee>1?'s':''} × ${d.nH} rangées`, d.circuits, 'fort')}
      ${kv('Câbles Cat5', `${d.cat5ParRangee} par rangée · max ${R.maxPanneauxCat5}`, d.cables, 'fort')}
    </div>
    ${e.pBase==='avg' ? `<div class="note warn"><b>Calcul sur la puissance moyenne.</b> Repasse en puissance max avant de commander la distribution.</div>` : ''}
  </div>
  <div class="panel">
    <h3>Liste d'entrepôt — ${e.nom}</h3>
    <div class="groups">
      <div class="group">
        <h3><em style="background:#0E4C81"></em>Écran</h3>
        ${ligne('Panneaux requis', e.modele.nom, d.total)}
        ${ligne(`Coffres de ${d.perCase}`, `${d.fournis} panneaux embarqués`, d.coffres)}
        ${ligne('Panneaux de backup', 'inclus dans les coffres', '+'+d.spares, 'spare')}
        ${ligne('Total à apporter', `${d.total} requis + ${d.spares} backup`, d.fournis, 'fort')}
      </div>
      <div class="group">
        <h3><em style="background:#D9871B"></em>${d.estPlancher ? 'Base au sol' : 'Accroche'}</h3>
        ${ligne(d.estPlancher ? 'Bumper 1000 mm (au sol)' : 'Bumper 1000 mm', `longueur totale ${f2(d.bumperM)} m`, d.bar1000)}
        ${ligne(d.estPlancher ? 'Bumper 500 mm (au sol)' : 'Bumper 500 mm', d.bar500 ? 'placée au centre' : 'aucune', d.bar500)}
        ${d.estPlancher ? `
        ${ligne('Connecteur vertical', `${R.plancher.connVertPar1000} par 1000 mm · ${R.plancher.connVertPar500} par 500 mm`, d.connVert)}
        ${ligne('Patte pour bumper', `${R.plancher.pattePar1000} par 1000 mm · ${R.plancher.pattePar500} par 500 mm`, d.pattes)}
        ` : `
        ${ligne('Manille 3/8', '1 par point d\'accroche', d.points)}
        ${ligne('Turnbuckle', '1 par point d\'accroche', d.points)}
        ${ligne('Steelflex', '1 par point d\'accroche', d.points)}
        `}
      </div>
      <div class="group">
        <h3><em style="background:#1C7BC0"></em>Signal & électrique</h3>
        ${ligne('Câbles réseau', d.cat5ParRangee===1 ? `1 par rangée — Cat5 #1 à #${d.cables}` : `${d.cat5ParRangee} blocs × ${d.nH} rangées`, d.cables)}
        ${ligne('Circuits AC', d.acParRangee===1 ? `1 par rangée — AC #1 à #${d.circuits} · ${e.volts} V / ${e.amps} A` : `${d.acParRangee} blocs × ${d.nH} rangées · ${e.volts} V / ${e.amps} A`, d.circuits)}
      </div>
      <div class="group">
        <h3><em style="background:#F2D024"></em>Assemblage des panneaux</h3>
        ${ligne('Connecteurs droits', `${d.connPar} par panneau — ${NOM_ENV[e.env].toLowerCase()}`, d.connBase)}
        ${ligne('Connecteurs backup', 'spare', '+'+d.connBackup, 'spare')}
        ${ligne('Total connecteurs droits', `${d.connBase} + ${d.connBackup} backup`, d.connTotal, 'fort')}
        ${d.estPlancher ? ligne('Connecteur en U', `1 par ${R.plancher.panneauxParU} panneaux, min. ${R.plancher.uMin}`, d.connU) : ''}
        ${d.ventTotal ? `
        ${ligne('Plaque grand vent avec clamp', `${d.ventRangClamp} rangée${d.ventRangClamp>1?'s':''} × ${d.ventCol} croisements`, d.ventClamp)}
        ${ligne('Plaque grand vent', `${d.ventRangSimple} rangée${d.ventRangSimple>1?'s':''} × ${d.ventCol} croisements`, d.ventSimple)}
        ${ligne('Boulons pour plaque', `${R.vent.boulonsParPlaque} par plaque × ${d.ventTotal}`, d.ventBoulons)}
        ` : ''}
      </div>
      <div class="group">
        <h3><em style="background:#5B6976"></em>Outillage</h3>
        ${ligne('Outil MG9', `1 par ${R.panneauxParMG9} panneaux, min. ${R.mg9Min}`, d.mg9)}
        ${d.ventCle ? ligne('Clé à criquet pour plaque grand vent', `1 par ${R.vent.panneauxParCle} panneaux · ${R.vent.cleMin} à ${R.vent.cleMax}`, d.ventCle) : ''}
      </div>
    </div>
    ${d.acParRangee>1 ? `<div class="note"><b>${d.acParRangee} blocs électriques.</b> À ${d.parCirc} panneaux par circuit, une rangée de ${d.nW} panneaux ne tient pas sur un seul circuit. La numérotation descend un bloc au complet avant de passer au suivant.</div>`:''}
    ${d.cat5ParRangee>1 ? `<div class="note"><b>${d.cat5ParRangee} runs Cat5 par rangée :</b> ${d.cat5Map.filter(x=>x.r===0).map(x=>x.c1-x.c0+1).join(' + ')} panneaux.</div>`:''}
    ${d.runsTraversent ? `<div class="note warn"><b>Un run Cat5 chevauche deux circuits.</b> Le mode « Min. de Cat5 » économise des câbles au prix de cet écart. Bascule sur « Suivre le courant » pour que chaque run reste dans un seul circuit.</div>` : (!d.blocsAlignes ? `<div class="note"><b>Un circuit porte plusieurs runs Cat5.</b> Un bloc électrique dépasse ${R.maxPanneauxCat5} panneaux : il est subdivisé, mais aucun run ne traverse un circuit.</div>` : '')}
  </div>
  ${S.ecrans.length>1 ? totalProjet() : ''}`;
}
function totalProjet(){
  let panneaux=0,bar1000=0,bar500=0,points=0,cables=0,circuits=0,kg=0,connBase=0;
  let vClamp=0,vSimple=0,vBoulons=0,pConnV=0,pPattes=0,pU=0;
  const envs = new Set(); let perCase = 10;
  S.ecrans.forEach(e=>{
    const d = calc(e); if(!d) return;
    perCase = d.perCase;
    panneaux+=d.total; bar1000+=d.bar1000; bar500+=d.bar500; points+=d.points;
    cables+=d.cables; circuits+=d.circuits; kg+=d.kgTot; connBase+=d.connBase; envs.add(e.env);
    vClamp+=d.ventClamp; vSimple+=d.ventSimple; vBoulons+=d.ventBoulons;
    pConnV+=d.connVert; pPattes+=d.pattes; pU+=d.connU;
  });
  const connBackup = (envs.has('int')?R.conn.int.backup:0) + (envs.has('ext')?R.conn.ext.backup:0);
  const mg9 = Math.max(R.mg9Min, Math.ceil(panneaux/R.panneauxParMG9));
  return `
  <div class="panel">
    <h3>Total du projet — ${S.ecrans.length} écrans</h3>
    <div class="groups">
      <div class="group">
        <h3><em style="background:#0E4C81"></em>Écran</h3>
        ${ligne('Panneaux','tous écrans',panneaux)}
        ${ligne(`Coffres de ${perCase}`,`${panneaux} panneaux + backup`,Math.ceil((panneaux+R.backupPanneau)/perCase))}
      </div>
      <div class="group">
        <h3><em style="background:#D9871B"></em>Accroche</h3>
        ${ligne('Bumper 1000 mm','',bar1000)}
        ${ligne('Bumper 500 mm','',bar500)}
        ${points ? ligne('Manille 3/8','',points)+ligne('Turnbuckle','',points)+ligne('Steelflex','',points) : ''}
        ${pConnV ? ligne('Connecteur vertical','plancher',pConnV) : ''}
        ${pPattes ? ligne('Patte pour bumper','plancher',pPattes) : ''}
        ${ligne('Poids total', `${(lb(kg)/2000).toFixed(2)} tonnes courtes`, lbkg(kg))}
      </div>
      <div class="group">
        <h3><em style="background:#1C7BC0"></em>Signal & électrique</h3>
        ${ligne('Câbles réseau','',cables)}${ligne('Circuits AC','',circuits)}
      </div>
      <div class="group">
        <h3><em style="background:#F2D024"></em>Assemblage des panneaux</h3>
        ${ligne('Connecteurs droits','',connBase)}
        ${ligne('Connecteurs backup','spare','+'+connBackup,'spare')}
        ${ligne('Total connecteurs droits','',connBase+connBackup,'fort')}
        ${pU ? ligne('Connecteur en U','plancher',pU) : ''}
        ${vClamp ? ligne('Plaque grand vent avec clamp','',vClamp) : ''}
        ${vSimple ? ligne('Plaque grand vent','',vSimple) : ''}
        ${vBoulons ? ligne('Boulons pour plaque','',vBoulons) : ''}
      </div>
      <div class="group">
        <h3><em style="background:#5B6976"></em>Outillage</h3>
        ${ligne('Outil MG9','1 par 50 panneaux, projet complet',mg9)}
        ${vClamp+vSimple ? ligne('Clé à criquet pour plaque grand vent','projet complet',Math.min(R.vent.cleMax, Math.max(R.vent.cleMin, Math.ceil(panneaux/R.vent.panneauxParCle)))) : ''}
      </div>
    </div>
  </div>`;
}
/* =======================================================================
   EXPORTS
   ======================================================================= */
function lignesTexte(){
  const rows = [];
  if(S.projet) rows.push([`PROJET : ${S.projet}`,'']);
  S.ecrans.forEach(e=>{
    const d = calc(e); if(!d) return;
    const bt = [d.bar1000?`${d.bar1000}x1000mm`:null, d.bar500?`${d.bar500}x500mm`:null].filter(Boolean).join(' + ')||'aucun';
    rows.push([`=== ${e.nom} — ${e.modele.nom} — ${NOM_ENV[e.env].toUpperCase()} ===`,'']);
    rows.push(['Grille', `${d.nW} x ${d.nH} (${d.total} panneaux)`]);
    rows.push(['Dimensions', `${f2(d.realW)} m x ${f2(d.realH)} m`]);
    rows.push(['Résolution', `${d.resW} x ${d.resH} px`]);
    rows.push(['Poids total', lbkg(d.kgTot)]);
    if(!d.estPlancher) rows.push(['Charge par moteur', `${lbkg(d.kgTot/d.motors)} (${d.motors} pts)`]);
    rows.push([`Puissance @ ${e.dim}%`, `${watts(d.wDim)} / ${d.ampsTot.toFixed(1)} A`]);
    rows.push([`Coffres de ${d.perCase}`, `${d.coffres} (${d.spares} backup)`]);
    rows.push(['Bumper 1000 mm', d.bar1000]);
    rows.push(['Bumper 500 mm', d.bar500]);
    if(d.estPlancher){
      rows.push(['Connecteur vertical', d.connVert]);
      rows.push(['Patte pour bumper', d.pattes]);
      rows.push(['Connecteur en U', d.connU]);
    } else {
      rows.push(['Manille 3/8', d.points]);
      rows.push(['Turnbuckle', d.points]);
      rows.push(['Steelflex', d.points]);
    }
    rows.push(['Câbles réseau', `${d.cables} (${d.cat5ParRangee}/rangée)`]);
    rows.push(['Circuits AC', `${d.circuits} @ ${e.volts}V/${e.amps}A (${d.acParRangee}/rangée)`]);
    rows.push(['Connecteurs droits', `${d.connTotal} (${d.connBase} + ${d.connBackup} backup)`]);
    if(d.ventTotal){
      rows.push(['Plaque grand vent avec clamp', d.ventClamp]);
      rows.push(['Plaque grand vent', d.ventSimple]);
      rows.push(['Boulons pour plaque', d.ventBoulons]);
    }
    rows.push(['Outil MG9', d.mg9]);
    if(d.ventCle) rows.push(['Clé à criquet plaque grand vent', d.ventCle]);
    rows.push(['','']);
  });
  return rows;
}
const texte = () => lignesTexte().map(([a,b]) => b==='' ? a : `${a} ${'.'.repeat(Math.max(2,28-a.length))} ${b}`).join('\n');
const csv   = () => 'Poste,Quantité\n' + lignesTexte().map(([a,b])=>`"${a}","${b}"`).join('\n');
function download(nom, contenu, type){
  const b = new Blob([contenu],{type}), u = URL.createObjectURL(b);
  const a = document.createElement('a'); a.href=u; a.download=nom; a.click(); URL.revokeObjectURL(u);
}
/* =======================================================================
   FORMULAIRE
   ======================================================================= */
const MF = [['mW','w'],['mH','h'],['mPitch','pitch'],['mResH','resH'],['mResV','resV'],
            ['mWt','wt'],['mCase','perCase'],['mPmax','pMax'],['mPavg','pAvg']];
function press(sel, attr, val){ document.querySelectorAll(sel).forEach(b=> b.setAttribute('aria-pressed', b.dataset[attr]===val)); }
const POIDS = [['Bumper 1000','wBar1000'],['Bumper 500','wBar500'],['Manille','wShackle'],
               ['Turnbuckle','wTurn'],['Steelflex','wFlex']];
const SPECS = [['Larg.','w','mm'],['Haut.','h','mm'],['Pitch','pitch','mm'],
               ['Rés. H','resH','px'],['Rés. V','resV','px'],['Poids','wt','lb'],
               ['Pan./coffre','perCase',''],['Puiss. max','pMax','W'],['Puiss. moy.','pAvg','W']];
function syncForm(){
  const e = E();
  MF.forEach(([id,key])=> document.getElementById(id).value = e.modele[key]);
  document.getElementById('specsRO').innerHTML = SPECS.map(([k,key,u])=>{
    const v2 = key === 'wt' ? `<div class="v2">${(e.modele[key]*LB).toFixed(1)} kg</div>` : '';
    return `<div><div class="k">${k}</div><div class="v">${e.modele[key]}${u?' '+u:''}</div>${v2}</div>`;
  }).join('');
  document.getElementById('specsRO').style.display = S.editPanneau ? 'none' : 'grid';
  document.getElementById('specsEd').style.display = S.editPanneau ? '' : 'none';
  document.getElementById('editPanneau').textContent = S.editPanneau ? 'Terminer' : 'Modifier';
  document.getElementById('poidsRO').innerHTML = POIDS.map(([k,key])=>
    `<div><div class="k">${k}</div><div class="v">${S[key]} lb</div><div class="v2">${(S[key]*LB).toFixed(1)} kg</div></div>`).join('');
  document.getElementById('poidsRO').style.display = S.editPoids ? 'none' : 'grid';
  document.getElementById('poidsEd').style.display = S.editPoids ? '' : 'none';
  document.getElementById('editPoids').textContent = S.editPoids ? 'Terminer' : 'Modifier';
  document.getElementById('blocMoteurs').style.display = e.env === 'plancher' ? 'none' : '';
  document.getElementById('projet').value = S.projet;
  document.getElementById('vCols').textContent = e.cols;
  document.getElementById('vRows').textContent = e.rows;
  document.getElementById('vMotors').textContent = e.motors;
  document.getElementById('inW').value = e.inW;
  document.getElementById('inH').value = e.inH;
  document.getElementById('ratio').value = e.ratio;
  document.getElementById('dim').value = e.dim;
  document.getElementById('dimVal').textContent = e.dim;
  document.getElementById('modeGrid').style.display = e.mode==='grid'?'':'none';
  document.getElementById('modeSize').style.display = e.mode==='size'?'':'none';
  press('[data-mode]','mode',e.mode); press('[data-unit]','unit',e.unit);
  press('[data-env]','env',e.env);   press('[data-pb]','pb',e.pBase);
  press('[data-c5]','c5',e.cat5Mode);
  document.getElementById('c5Hint').textContent = e.cat5Mode==='power'
    ? 'Les runs Cat5 ne traversent jamais la frontière d\'un circuit, quitte à en ajouter.'
    : 'Le minimum de câbles ; alignés sur les circuits quand ça ne coûte rien.';
  press('[data-v]','v',String(e.volts)); press('[data-a]','a',String(e.amps));
  document.querySelectorAll('.u-lbl').forEach(x=>x.textContent = e.unit==='m'?'m':'pi');
  hintRatio();
}
function hintRatio(){
  const e = E(), h = document.getElementById('ratioHint'), m = e.modele, d = calc(e);
  const actuel = d ? (d.realW/d.realH) : 0;
  if(!e.ratio){
    h.innerHTML = d ? `Ratio actuel <b>${actuel.toFixed(2)}:1</b>.` : '';
    return;
  }
  /* Propositions : les grilles qui respectent la cible, classées par taille,
     puis une fenêtre de trois centrée sur la grille actuelle. Depuis un 6×3
     en 2:1 on obtient 4×2 · 6×3 · 8×4 plutôt que de repartir du plus petit. */
  const ecartDe = (c,r) => Math.abs(((c*m.w)/(r*m.h))/e.ratio - 1);
  const tous = [];
  for(let r=1;r<=60;r++){
    const c = Math.round(r*(m.h/m.w)*e.ratio);
    if(c>=1) tous.push({c, r, ecart: ecartDe(c,r)});
  }
  const meilleur = Math.min(...tous.map(x=>x.ecart));
  let pool = tous.filter(x=> x.ecart <= Math.max(0.03, meilleur + 1e-9));
  if(pool.length < 3) pool = [...tous].sort((a,b)=> a.ecart-b.ecart).slice(0,6);
  pool.sort((a,b)=> (a.c*a.r) - (b.c*b.r));
  /* index de la grille la plus proche de celle en cours */
  const cible = d ? d.total : 0;
  let iProche = 0, ecartTaille = Infinity;
  pool.forEach((x,k)=>{ const dd = Math.abs(x.c*x.r - cible); if(dd < ecartTaille){ ecartTaille = dd; iProche = k; } });
  const depart = Math.max(0, Math.min(iProche-1, pool.length-3));
  const best = pool.slice(depart, depart+3);
  let ecartActuel = actuel ? (actuel/e.ratio - 1)*100 : 0;
  if(Math.abs(ecartActuel) < 0.05) ecartActuel = 0;
  const conforme = Math.abs(ecartActuel) < 0.5;
  h.innerHTML =
    `<span style="color:${conforme ? 'var(--vert-ok)' : 'var(--gris-2)'}">Ratio actuel ${actuel.toFixed(2)}:1 — écart ${ecartActuel>0?'+':''}${ecartActuel.toFixed(1)} %</span>`
  + `<span class="chips">` + best.slice(0,3).map(b=>{
      const on = d && b.c===d.nW && b.r===d.nH;
      return `<button data-grille="${b.c}x${b.r}" class="${on?'on':''}" title="écart ${(b.ecart*100).toFixed(1)} %">${b.c}×${b.r}</button>`;
    }).join('') + `</span>`;
}
/* Lettre 216 × 279 mm, marges de 7 mm, moins 3 mm de sécurité. */
/* Lettre : zone imprimable de 202 mm en paysage, 265 mm en portrait.
   On garde ~19 mm de réserve car Safari ampute la page de ses en-têtes et
   pieds de page quand ils sont activés dans le dialogue. */
const PAGE = { paysage:{orient:'landscape', h:183}, portrait:{orient:'portrait', h:246} };
function majFormatPDF(){
  const f = PAGE[S.formatPDF];
  document.getElementById('reglePage').textContent = `@page{ size:letter ${f.orient}; margin:7mm }`;
  document.documentElement.style.setProperty('--haut-page', f.h + 'mm');
  document.querySelectorAll('[data-fmt]').forEach(b=> b.setAttribute('aria-pressed', b.dataset.fmt === S.formatPDF));
  document.getElementById('fmtHint').innerHTML =
    `Choisis <b>${S.formatPDF === 'paysage' ? 'Paysage' : 'Portrait'}</b> dans la fenêtre d'impression, et décoche les en-têtes et pieds de page pour un plan plus grand.`;
}
const maj = () => { renderTabs(); renderSheet(); hintRatio(); };
/* ---------------- événements ---------------- */
document.addEventListener('click', ev=>{
  const t = ev.target, e = E(), d = t.dataset || {};
  if(d.mode){ e.mode = d.mode; syncForm(); maj(); }
  else if(d.unit){ e.unit = d.unit; syncForm(); maj(); }
  else if(d.env){ e.env = d.env; syncForm(); maj(); }
  else if(d.pb){ e.pBase = d.pb; syncForm(); maj(); }
  else if(d.c5){ e.cat5Mode = d.c5; syncForm(); maj(); }
  else if(d.v){ e.volts = +d.v; syncForm(); maj(); }
  else if(d.a){ e.amps = +d.a; syncForm(); maj(); }
  else if(d.vue){ e.vue = d.vue; maj(); }
  else if(d.calque){ e.calque = d.calque; maj(); }
  else if(d.fmt){ S.formatPDF = d.fmt; majFormatPDF(); }
  else if(d.zoom){ const dd = calc(e);
                   const cur = e.zoom || (dd ? zoomDefaut(dd) : 1);
                   let p = ZOOMS.indexOf(cur); if(p < 0) p = ZOOMS.indexOf(1);
                   e.zoom = ZOOMS[Math.min(ZOOMS.length-1, Math.max(0, p + (+d.zoom)))];
                   maj(); }
  else if(d.adj){ e[d.adj] = Math.max(1, e[d.adj] + (+d.d)); syncForm(); maj(); }
  else if(d.del !== undefined){ ev.stopPropagation(); if(S.ecrans.length>1){ S.ecrans.splice(+d.del,1); S.actif=0; syncForm(); maj(); } }
  else if(d.grille){ const [c,r] = d.grille.split('x').map(Number);
                     e.mode = 'grid'; e.cols = c; e.rows = r; syncForm(); maj(); }
  else if(d.tab !== undefined){ S.actif = +d.tab; syncForm(); maj(); }
  else if(t.id === 'addScreen'){ S.ecrans.push(nouvelEcran(S.ecrans.length+1)); S.actif = S.ecrans.length-1; syncForm(); maj(); }
});
MF.forEach(([id,key])=> document.getElementById(id).addEventListener('input', ev=>{
  E().modele[key] = parseFloat(ev.target.value)||0; hintRatio(); maj();
}));
['inW','inH'].forEach(id=> document.getElementById(id).addEventListener('input', ev=>{
  E()[id] = parseFloat(ev.target.value)||0; maj();
}));
document.getElementById('projet').addEventListener('input', ev=>{ S.projet = ev.target.value; maj(); });
document.getElementById('ratio').addEventListener('change', ev=>{ E().ratio = parseFloat(ev.target.value)||0; hintRatio(); });
document.getElementById('dim').addEventListener('input', ev=>{
  E().dim = +ev.target.value; document.getElementById('dimVal').textContent = E().dim; maj();
});
['wBar1000','wBar500','wShackle','wTurn','wFlex'].forEach(k=>
  document.getElementById(k).addEventListener('input', ev=>{ S[k] = parseFloat(ev.target.value)||0; maj(); }));
document.getElementById('btnCopy').onclick = async ()=>{
  const b = document.getElementById('btnCopy'), t = b.textContent;
  try{ await navigator.clipboard.writeText(texte()); b.textContent='Copié'; }
  catch(err){ b.textContent='Échec'; }
  setTimeout(()=>b.textContent=t,1400);
};
document.getElementById('editPanneau').onclick = ()=>{ S.editPanneau = !S.editPanneau; syncForm(); };
document.getElementById('editPoids').onclick   = ()=>{ S.editPoids   = !S.editPoids;   syncForm(); };
/* ---------------- sauvegarde du projet ---------------- */
const FORMAT_FICHIER = 'calculateur-ecran-led';
const nomFichier = ext => (S.projet ? S.projet.replace(/[^\w\-À-ÿ ]+/g,'').trim().replace(/\s+/g,'-') : 'projet-ecran-led') + ext;
function etat(msg, err){
  const el = document.getElementById('etatFichier');
  el.textContent = msg;
  el.style.color = err ? 'var(--rouge)' : 'var(--vert-ok)';
  setTimeout(()=>{ el.textContent = "Le fichier .json rouvre le projet complet : écrans, panneau, poids et réglages.";
                   el.style.color = ''; }, 4000);
}
document.getElementById('btnSave').onclick = ()=>{
  const paquet = { format:FORMAT_FICHIER, version:1, enregistre:new Date().toISOString(), etat:S };
  download(nomFichier('.json'), JSON.stringify(paquet, null, 2), 'application/json');
  etat('Projet enregistré.');
};
document.getElementById('btnOpen').onclick = ()=> document.getElementById('fichierProjet').click();
document.getElementById('fichierProjet').addEventListener('change', ev=>{
  const f = ev.target.files && ev.target.files[0];
  if(!f) return;
  const lecteur = new FileReader();
  lecteur.onload = () => {
    try{
      const p = JSON.parse(lecteur.result);
      const src = p && p.etat ? p.etat : p;
      if(!src || !Array.isArray(src.ecrans) || !src.ecrans.length) throw new Error('structure');
      /* on complète chaque écran avec les réglages par défaut : un fichier
         d'une version antérieure reste ouvrable */
      S = { ...S, ...src,
            ecrans: src.ecrans.map((x,i)=> ({ ...nouvelEcran(i+1), ...x,
                                              modele:{ ...MODELE_DEF, ...(x.modele||{}) } })) };
      S.actif = Math.min(S.actif|0, S.ecrans.length-1);
      syncForm(); maj(); majFormatPDF();
      etat(`« ${f.name} » ouvert — ${S.ecrans.length} écran${S.ecrans.length>1?'s':''}.`);
    }catch(err){
      etat("Fichier illisible : ce n'est pas un projet enregistré ici.", true);
    }
    ev.target.value = '';
  };
  lecteur.readAsText(f);
});
document.getElementById('btnCsv').onclick = ()=> download(nomFichier('.csv'), csv(), 'text/csv;charset=utf-8');
document.getElementById('btnPrint').onclick = ()=>{
  const titre = document.title;
  if(S.projet) document.title = S.projet;
  window.print();
  document.title = titre;
};
syncForm(); maj(); majFormatPDF();
</script>
</body>
</html>

Outils

Pour la préparation de vos événements

Outils techniques

Accueil

Services

Produits ÉCLAT(ANTS)

Suivez-nous sur