<div class="fx-0371-root">
  <canvas class="pb-canvas" aria-label="Zone de dessin"></canvas>
  <span class="pb-label" aria-hidden="true">Dessinez avec la souris ou le doigt</span>
</div>

.fx-0371-root,.fx-0371-root *,.fx-0371-root *::before,.fx-0371-root *::after{box-sizing:border-box}
.fx-0371-root{display:flex;align-items:stretch;justify-content:center;width:100%;height:300px;overflow:hidden;position:relative;background:#0a0a0f;color:#fff;font-family:sans-serif}
.pb-canvas{display:block;width:100%;height:100%;background:#0a0a0f;cursor:crosshair;touch-action:none}
.pb-label{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);font-size:.75rem;color:#8b8b93;pointer-events:none;z-index:10;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.fx-0371-root .pb-canvas{cursor:default}}

(function(){
  var reduceMotion=window.matchMedia('(prefers-reduced-motion:reduce)').matches;
  document.querySelectorAll('.fx-0371-root').forEach(function(root){
    var canvas=root.querySelector('.pb-canvas');
    if(!canvas)return;
    var ctx=canvas.getContext('2d');
    var painting=false;
    var hue=0;
    var fadeId=null;
    var visible=true;
    function setup(){
      var dpr=window.devicePixelRatio||1;
      var w=canvas.clientWidth;
      var h=canvas.clientHeight;
      canvas.width=Math.round(w*dpr);
      canvas.height=Math.round(h*dpr);
      ctx.setTransform(dpr,0,0,dpr,0,0);
      ctx.fillStyle='#0a0a0f';
      ctx.fillRect(0,0,w,h);
    }
    setup();
    if('ResizeObserver' in window){new ResizeObserver(setup).observe(canvas);}
    function getPos(e){
      var rect=canvas.getBoundingClientRect();
      var src=e.touches?e.touches[0]:e;
      return{x:src.clientX-rect.left,y:src.clientY-rect.top};
    }
    function draw(e){
      if(!painting)return;
      var p=getPos(e);
      ctx.beginPath();
      ctx.arc(p.x,p.y,15,0,Math.PI*2);
      ctx.fillStyle='hsl('+hue+',70%,60%)';
      ctx.fill();
      hue=(hue+2)%360;
    }
    canvas.addEventListener('mousedown',function(){painting=true;});
    canvas.addEventListener('mouseup',function(){painting=false;});
    canvas.addEventListener('mouseleave',function(){painting=false;});
    canvas.addEventListener('mousemove',draw);
    canvas.addEventListener('touchstart',function(e){e.preventDefault();painting=true;},{passive:false});
    canvas.addEventListener('touchend',function(){painting=false;});
    canvas.addEventListener('touchmove',function(e){e.preventDefault();draw(e);},{passive:false});
    if(!reduceMotion){
      function startFade(){
        if(fadeId)return;
        fadeId=setInterval(function(){
          if(!visible){clearInterval(fadeId);fadeId=null;return;}
          ctx.fillStyle='rgba(10,10,15,.02)';
          var dpr=window.devicePixelRatio||1;
          ctx.fillRect(0,0,canvas.width/dpr,canvas.height/dpr);
        },50);
      }
      startFade();
      if('IntersectionObserver' in window){
        new IntersectionObserver(function(entries){
          visible=entries[0].isIntersecting;
          if(visible&&!fadeId)startFade();
          if(!visible&&fadeId){clearInterval(fadeId);fadeId=null;}
        }).observe(canvas);
      }
    }
  });
})();