<header class="header" role="banner">
    <nav class="container fixed-top access-nav d-print-none" aria-label="menu accessibilité">
        <ul class="list-unstyled mt-3">
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="0" href="#" title="[Alt+0] Page d'accueil du site">Accueil</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="1" href="#nav-primary" title="[Alt+1] Menu de navigation de la page">Menu de navigation de la page</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="2" href="#main" title="[Alt+2] Debut du contenu de la page">Début du contenu de la page</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="3" href="#" title="[Alt+3] Page de contact">Page de contact</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="4" href="#" title="[Alt+4] Plan du site du Canton de Vaud">Plan du site</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="5" href="#search-form" title="[Alt+5] Accès au champ de recherche">Accès au champ de recherche</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="6" href="#" title="[Alt+6] Accès à l'index thématique">Thèmes</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="7" href="#" title="[Alt+7] Accès à la navigation par autorités">Autorités</a>
            </li>
            <li>
                <a class="sr-only sr-only-focusable btn btn-dark pt-0" accesskey="8" href="#" title="[Alt+8] Page d'aide pour les personnes en situation de handicap">Page d'aide pour les personnes en situation de handicap</a>
            </li>
        </ul>
    </nav>

    <div class="vd-header-application container">
        <a href="../accueil" class="vd-logo" title="Aller à la page d'accueil du Site du Canton de Vaud">
            <img src="../../foehn/svg/ETATVAUD-alt.svg" class="vd-logo__image" alt="État de Vaud" aria-hidden="true" />
        </a>
        <span class="vd-header-application__title">Nom de l&#39;application</span>
    </div>
</header>

<section class="small container text-end mb-3">
    <h2 class="sr-only">Votre identité</h2>
    <p class="mb-0">
        <span class="fas fa-lock" aria-hidden="true"></span>

        <a href="#">Jean Villard Gilles</a>

    </p>

    <p class="mb-0">
        <a href="#">Se déconnecter</a>
    </p>

</section>

<main id="main">
    <div class="vd-bg-pattern-gray">
        <div class="container">
            <nav aria-label="Fil d'Ariane">
                <h2 class="sr-only">File d'Ariane</h2>
                <ol class="breadcrumb">

                    <li class="breadcrumb-item"><a href="">vd.ch</a></li>

                    <li class="breadcrumb-item"><a href="">Etat, Droit, Finances</a></li>

                    <li class="breadcrumb-item"><a href="">Impôts</a></li>

                    <li class="sr-only" aria-current="page">Nom de la prestation</li>

                </ol>
            </nav>

            <h1 class="mt-0">Nom de la prestation</h1>
        </div>
    </div>

    <div class="container">

        <div class="row">
            <div class="col-md-8">

                <ol class="list-unstyled">

                    <li>

                        <h2>A vérifier avant de commencer</h2>
                        <ul class="list-unstyled">

                            <li class="d-flex flex-column flex-md-row justify-content-between
                     border-bottom pb-3">
                                <a href="#" class="align-self-baseline mt-2">Vérifier votre éligibilité</a>

                                <strong class="align-self-baseline
                             badge text-bg-success
                             mt-2
                             ">Terminé</strong>

                            </li>

                            <li class="d-flex flex-column flex-md-row justify-content-between
                     border-bottom pb-3">
                                <a href="#" class="align-self-baseline mt-2">Lire les documents relatifs</a>

                                <strong class="align-self-baseline
                             badge text-bg-success
                             mt-2
                             ">Terminé</strong>

                            </li>

                        </ul>
                    </li>

                    <li>

                        <h2>A préparer pour la demande</h2>
                        <ul class="list-unstyled">

                            <li class="d-flex flex-column flex-md-row justify-content-between
                     border-bottom pb-3">
                                <a href="#" class="align-self-baseline mt-2">Information sur la société</a>

                                <strong class="align-self-baseline
                             badge text-bg-success
                             mt-2
                             ">Terminé</strong>

                            </li>

                            <li class="d-flex flex-column flex-md-row justify-content-between
                     border-bottom pb-3">
                                <a href="#" class="align-self-baseline mt-2">Vos coordonnées</a>

                                <strong class="align-self-baseline
                             badge text-bg-success
                             mt-2
                             ">Terminé</strong>

                            </li>

                            <li class="d-flex flex-column flex-md-row justify-content-between
                     border-bottom pb-3">
                                <a href="#" class="align-self-baseline mt-2">Lister les contextes de la demande</a>

                            </li>

                            <li class="d-flex flex-column flex-md-row justify-content-between
                     border-bottom pb-3">
                                <a href="#" class="align-self-baseline mt-2">Preuve de solvabilité</a>

                            </li>

                            <li class="d-flex flex-column flex-md-row justify-content-between
                     border-bottom pb-3">
                                <a href="#" class="align-self-baseline mt-2">Donner des preuves médicales</a>

                                <strong class="align-self-baseline
                             badge text-bg-success
                             mt-2
                             ">Terminé</strong>

                            </li>

                        </ul>
                    </li>

                    <li>

                        <h2>Faire la demande</h2>
                        <ul class="list-unstyled">

                            <li class="d-flex flex-column flex-md-row justify-content-between
                     border-bottom pb-3">
                                <a href="#" class="align-self-baseline mt-2">Soumettre la demande et payer</a>

                            </li>

                        </ul>
                    </li>

                </ol>

            </div>
        </div>
    </div>
</main>

<footer class="mt-5">

    <div class="container">
        <div class="text-end">
            <a href="#" class="btn btn-sm btn-dark" title="Retour vers le haut de la page">Haut <span class="fas fa-chevron-up"></span></a>
        </div>
    </div>

    <div class="footer">
        <div class="container">
            <div class="row">
                <div class="col-xs-10">
                    <nav class="row" aria-label="pied de page">

                        <div class="col-sm">

                            <ul class="list-unstyled ">
                                <li><a href="">Contact</a></li>
                                <li><a href="">Pourquoi créer un compte</a></li>
                                <li><a href="">Mentions légales</a></li>
                            </ul>
                        </div>

                    </nav>
                </div>
                <div class="col-xs-2">
                    <div class="d-flex align-items-end flex-column h-100">
                        <div class="mt-auto w-100 end">
                            <a href="#" class="d-inline-block">
                                <span class="sr-only">Retour à la page d'accueil</span>
                                <img aria-hidden="true" class="img-fluid footer-logo" src="../../foehn/svg/logo/logo--white.svg" alt="Canton de Vaud">

                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</footer>
{% extends '@espace-securise--form' %}
{% block main %}

    {% render '@task-list', tasks, true %}

{% endblock %}
{
  "header": {
    "applicationTitle": "Nom de l'application"
  },
  "pageTitle": {
    "pageTitle": {
      "text": "Nom de la prestation"
    },
    "breadcrumb": {
      "breadcrumb": [
        {
          "page": "vd.ch"
        },
        {
          "page": "Etat, Droit, Finances"
        },
        {
          "page": "Impôts"
        },
        {
          "page": "Nom de la prestation",
          "url": "#"
        }
      ]
    }
  },
  "stepTitle": "Titre de l'étape",
  "check1": {
    "title": {
      "text": "Informations personnelles"
    },
    "items": [
      {
        "question": "Nom",
        "answer": "Clark Kent",
        "url": "#"
      },
      {
        "question": "Surnom",
        "answer": "Superman",
        "url": "#"
      },
      {
        "question": "Adresse",
        "answer": "34 Kriptionitstrasse <br>9999 Metropolis",
        "url": "#"
      },
      {
        "question": "Information de contact",
        "answer": "<p>021 123 45 67</p><p>prenom.nom@email.com</p>"
      }
    ]
  },
  "check2": {
    "title": {
      "text": "Détail de la demande"
    },
    "items": [
      {
        "question": "Numéro de la précédente demande",
        "answer": "84659830",
        "url": "#"
      },
      {
        "question": "Type de license",
        "answer": "Personnelle",
        "url": "#"
      },
      {
        "question": "Période de validitée",
        "answer": "6 mois",
        "url": "#"
      }
    ]
  }
}

No notes defined.