Écrêtage : pourcentages en direct et histogramme non faussé

- Le mode écrêtage peint une copie de l'aperçu : l'histogramme et les
  statistiques ne sont plus calculés sur l'image colorée rouge/bleu
- Le bouton affiche en direct le % de zones brûlées (▲) et bouchées (▼)
- Message explicatif à l'activation (y compris quand il n'y a rien à signaler)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EsNwAFsCdaUHa6jesYNTTf

Author: claude

css/style.css

@@ -224,3 +224,8 @@ table.meta td:last-child { font-family: ui-monospace, SFMono-Regular, Menlo, mon
   content: ""; position: absolute; left: 9px; top: 50%; width: 10px; height: 10px; margin-top: -6px;
   border: 2px solid var(--bg-3); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite;
 }
+
+/* Pourcentages d'écrêtage dans le bouton */
+#clipBtn .clip-hi, #clipBtn .clip-lo { font-variant-numeric: tabular-nums; font-size: .78rem; padding: 1px 5px; border-radius: 6px; background: rgba(0,0,0,.35); }
+#clipBtn .clip-hi { color: #ffb3c0; }
+#clipBtn .clip-lo { color: #b3cfff; }

index.html

@@ -62,7 +62,7 @@ <h1>Développez vos RAW dans le navigateur</h1>
       <canvas id="canvas" hidden></canvas>
       <div class="viewer-tools" id="viewerTools" hidden>
         <button class="chip" id="beforeBtn" title="Maintenir pour voir l'original">Avant / Après</button>
-        <button class="chip" id="clipBtn" aria-pressed="false" title="Afficher l'écrêtage (rouge : blancs, bleu : noirs)">Écrêtage</button>
+        <button class="chip" id="clipBtn" aria-pressed="false" title="Colore les zones sans détail : rouge = hautes lumières brûlées, bleu = ombres bouchées">Écrêtage</button>
       </div>
       <div class="info-line" id="infoLine" hidden></div>
       <div class="full-status" id="fullStatus" hidden></div>

js/app.js

@@ -268,8 +268,43 @@ function setupProcCanvas() {
 function renderProcessed() {
   const { data, w, h } = state.preview;
   const pr = makeProcessor(state.params, state.base);
-  processRGBA(pr, data, proc.img.data, w * h, state.clipWarn);
-  proc.ctx.putImageData(proc.img, 0, 0);
+  processRGBA(pr, data, proc.img.data, w * h);
+  // proc.img reste « propre » (histogramme, statistiques) ; l'alerte d'écrêtage
+  // est peinte sur une copie
+  proc.ctx.putImageData(state.clipWarn ? clipOverlay(proc.img) : proc.img, 0, 0);
+  updateClipButton();
+}
+
+function updateClipButton() {
+  const btn = $('#clipBtn'), c = state.clipCounts;
+  if (!state.clipWarn || !c) { btn.textContent = 'Écrêtage'; return; }
+  const pct = (v) => (v * 100).toFixed(v < 0.1 && v > 0 ? 2 : 1).replace('.', ',') + '%';
+  btn.innerHTML = `Écrêtage <span class="clip-hi">▲${pct(c.hi)}</span> <span class="clip-lo">▼${pct(c.lo)}</span>`;
+}
+
+// Rouge : au moins un canal saturé (≥ 254) ; bleu : noir pur (tous canaux ≤ 1)
+function clipOverlay(img) {
+  if (!proc.clipImg || proc.clipImg.width !== img.width) proc.clipImg = new ImageData(img.width, img.height);
+  const s = img.data, d = proc.clipImg.data;
+  let hi = 0, lo = 0;
+  for (let i = 0; i < s.length; i += 4) {
+    const r = s[i], g = s[i + 1], b = s[i + 2];
+    if (r >= 254 || g >= 254 || b >= 254) { d[i] = 255; d[i + 1] = 0; d[i + 2] = 60; hi++; }
+    else if (r <= 1 && g <= 1 && b <= 1) { d[i] = 0; d[i + 1] = 90; d[i + 2] = 255; lo++; }
+    else { d[i] = r; d[i + 1] = g; d[i + 2] = b; }
+    d[i + 3] = 255;
+  }
+  const n = s.length / 4;
+  state.clipCounts = { hi: hi / n, lo: lo / n };
+  return proc.clipImg;
+}
+
+function clipSummary() {
+  const c = state.clipCounts;
+  if (!c) return '';
+  const pct = (v) => (v * 100).toFixed(v < 0.01 ? 2 : 1).replace('.', ',') + ' %';
+  if (c.hi < 0.0005 && c.lo < 0.0005) return 'Écrêtage : aucune zone brûlée ni bouchée ✓';
+  return `Écrêtage — rouge : ${pct(c.hi)} brûlé · bleu : ${pct(c.lo)} bouché`;
 }
 
 function beforeCanvas() {
@@ -804,6 +839,10 @@ beforeBtn.addEventListener('contextmenu', (e) => e.preventDefault());
 $('#clipBtn').addEventListener('click', () => {
   state.clipWarn = !state.clipWarn;
   $('#clipBtn').setAttribute('aria-pressed', String(state.clipWarn));
+  if (state.clipWarn) {
+    renderProcessed(); drawView();
+    toast(clipSummary() + '. Réglez Hautes lumières / Blancs / Noirs pour les réduire.', false, 5000);
+  }
   scheduleRender(true);
 });
 window.addEventListener('keydown', (e) => {

js/pipeline.js

@@ -162,16 +162,11 @@ const ENC_LUT = (() => {
 })();
 
 // Traite un tampon linéaire RVB (Float32 0..1) vers RGBA 8 bits.
-export function processRGBA(proc, src, dst, n, clipWarn = false) {
+export function processRGBA(proc, src, dst, n) {
   const px = proc.pixel;
   for (let i = 0, s = 0, d = 0; i < n; i++, s += 3, d += 4) {
     px(src[s], src[s + 1], src[s + 2], dst, d);
     dst[d + 3] = 255;
-    if (clipWarn) {
-      const r = dst[d], g = dst[d + 1], b = dst[d + 2];
-      if (r >= 254 || g >= 254 || b >= 254) { dst[d] = 255; dst[d + 1] = 0; dst[d + 2] = 60; }
-      else if (r <= 1 && g <= 1 && b <= 1) { dst[d] = 0; dst[d + 1] = 90; dst[d + 2] = 255; }
-    }
   }
 }