<!-- Page d'accueil renseignement contrat -->
<div class="section">
  <h4 class="center-align">Parcours <span id="displayedNumParcours"></span></h4>
  <h6 class="center-align"><span id="displayedClient"></span></h6>
</div>
<div class="divider"></div>

<div class="section">
  <nav>
    <div class="nav-wrapper">
      <ul class="left" id="navParcoursSelect">
        <li><a href="client">Client</a></li>
        <li><a href="intermediaire">Intermédiaire</a></li>
        <li><a href="tarif">Tarif</a></li>
        <li><a href="projet">Projet</a></li>
        <li><a href="contrat">Contrat</a></li>
      </ul>
    </div>
  </nav>
</div>
<div class="section">
  <button class="btn" id="generateDeclinaison" disabled>Générer Déclinaison Tarifaire</button>
  <button class="btn" id="generateProject" disabled>Générer Projet</button>
  <button class="btn" disabled>Générer Attestation</button>
  <button class="btn" id="recueilClauses">Recueil de clauses</button>
</div>

<div class="stepper-wrapper">
  <div class="stepper-item" id="step-client">
      <div class="step-counter"><span class="material-icons">
              person
          </span></div>
      <div class="step-name">Client</div>
  </div>
  <div class="stepper-item" id="step-intermediaire">
      <div class="step-counter"><span class="material-icons">
              supervisor_account
          </span></div>
      <div class="step-name">Intermédiaire</div>
  </div>
  <div class="stepper-item" id="step-tarif">
      <div class="step-counter"><span class="material-icons">
              percent
          </span></div>
      <div class="step-name">Tarif</div>
  </div>
  <div class="stepper-item" id="step-projet">
      <div class="step-counter"><span class="material-icons">
              construction
          </span></div>
      <div class="step-name">Projet</div>
  </div>
  <div class="stepper-item" id="step-contrat">
      <div class="step-counter"><span class="material-icons">
              history_edu
          </span></div>
      <div class="step-name">Contrat</div>
  </div>
</div>

<div class="section center-align">
  <div class="form-container" id="formContainer">
    <!-- Container du sous-menu sélectionné -->
  </div>
</div>

<!-- Script pour la page nav-parcours.js -->
<script src="/js/nav-parcours.js"></script>
<!-- Feuille de style globale : Styles CSS personnalisés pour les formulaires -->
<link rel="stylesheet" href="/css/parcoursform.css">

<!-- Modal Structure -->
<div id="modalUpdate" class="modal modalAlert">
  <div class="modal-content center-align">
    <h4>Attention</h4>
    <p>Les modifications n'ont pas été sauvegardées.</p>
    <p class="modalRed">Êtes-vous sûr de vouloir quitter cette étape ?</p>
  </div>
  <div class="modal-footer">
    <button id="update-OK" class="waves-effect waves-light btn indigo darken-4">Valider</button>
    <button id="update-cancel" class="modal-close waves-effect waves-light btn red darken-1">Annuler</button>
  </div>
</div>