$(document).ready(function() {

    var repere = 0;

    if (repere == 0) {
        $('#proch').addClass("Sur");

    }
   

    $('#proch').click(
      function() {
          if (repere == 1) {
              $('#lePro').animate({ "left": "+=300px" }, "slow");
              $(this).addClass("Sur");
              $('#derN').removeClass();
              repere = 0;
          }
          return false;
      });

    $('#derN').click(
      function() {
          if (repere == 0) {
              $('#lePro').animate({ "left": "-=300px" }, "slow");
              $(this).addClass("Sur");
              $('#proch').removeClass();
              repere = 1;
          }
          return false;
      });


});