{% extends "global/Page.html" %}
{% block title %}{% endblock %}
{% block content %}
{% include "shaping_social_norms/_block_badge.html" with block_label="Bloc A" %}
<div class="info-delay-shell">
  <p>Sur certains écrans de l’enquête,  le bouton « continuer » permettant de passer à l’écran suivant n’apparaît pas immédiatement. Il ne s’agit pas d’une erreur : le bouton apparaîtra sur la page après un court délai (compris entre 5 et 30 secondes).</p>
  <p>D'une façon générale, <strong>nous vous demandons de lire attentivement les consignes qui apparaissent sur l’écran afin de préserver la qualité des données qui seront collectées.</strong></p>
  <div class="info-delay-action-zone">
    <p id="wait-msg" class="info-delay-wait">Le bouton continuer apparaîtra très bientôt.</p>
    <div id="next-container" class="next-bottom-right" style="display:none;">
      <button class="btn btn-primary otree-btn-next" type="submit">Continuer</button>
    </div>
  </div>
</div>
<style>
  .info-delay-shell {
    max-width: 760px;
    margin: 0 auto;
  }

  .info-delay-action-zone {
    min-height: 76px;
    margin-top: 24px;
    display: flex;
    align-items: flex-end;
  }

  .info-delay-wait {
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: #000 !important;
    text-align: right;
  }

  .next-bottom-right {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 0;
  }

  .next-bottom-right .otree-btn-next {
    margin-top: 0;
  }
</style>
<script>
  (function () {
    var delayMs = 5000;
    var el = document.getElementById('next-container');
    var msg = document.getElementById('wait-msg');
    setTimeout(function () {
      if (msg) msg.style.display = 'none';
      el.style.display = 'block';
    }, delayMs);
  })();
</script>
{% endblock %}