Login Form

<button id="login-button" type="button" class="btn btn-primary fs-6" data-bs-toggle="collapse" data-bs-target="#login-form-collapse" aria-expanded="false" aria-controls="login-form-collapse">
    Se connecter <span class="fas fa-chevron-down text-white ms-1" id="login-button-icon"></span>
</button>

<div id="login-form-collapse" class="border collapse p-3 shadow">
    <div class="d-flex flex-column mb-3">
        <div class="d-flex flex-row justify-content-between mb-2">
            <div class="p-2">
                <span class="h4">Espace sécurisé</span>
            </div>
        </div>
        <div class="mb-1 p-2">
            <span>
                Gérez facilement vos <a href="#">démarches administratives</a> en ligne pour les particuliers, entreprises, fondations et communes
            </span>
        </div>
        <div class="mb-3 p-2">
            <a class="btn btn-success mb-2 py-2 text-center w-100" href="#">
                Se connecter
                <span class="fas fa-external-link-alt me-1 text-white"></span>
            </a>
            <a class="btn btn-secondary py-2 text-center w-100" href="#">
                Créer un compte
            </a>
        </div>
        <div class="mb-2 p-2">
            <details>
                <summary>Exemples de démarches</summary>
                <ul>
                    <li>Remplir et déposer sa déclaration d’impôt</li>
                    <li>Consulter son dossier fiscal</li>
                    <li>Remplacer son permis de conduire (particuliers)</li>
                    <li>S’inscrire à la maturité professionnel post-CFC (étudiants)</li>
                    <li>Obtenir une première autorisation frontalière (entreprise)</li>
                    <li>Demander un soutien à un projet cultuel (associations)</li>
                    <li>Accéder au registre cantonal des personnes (communes)</li>
                </ul>
            </details>
        </div>
        <div class="p-2">
            <a href="#">
                Aide en ligne
            </a>
        </div>
    </div>
    <div class="mb-3 px-2">
        <hr class="opacity-25">
    </div>
    <div class="d-flex flex-column">
        <div class="d-flex flex-row justify-content-between mb-2">
            <div class="p-2">
                <span class="h4">Portail IAM</span>
            </div>
        </div>
        <div class="mb-1 p-2">
            <span>Accès aux applications pour les collaborateurs-trices de l’Etat de Vaud et les partenaires.</span>
        </div>
        <div class="mb-1 p-2">
            <a class="btn btn-success py-2 text-center w-100" href="#">
                Se connecter
                <span class="fas fa-external-link-alt me-1 text-white"></span>
            </a>
        </div>
        <div class="mb-1 p-2">
            <details>
                <summary>Exemples d’applications</summary>
                <ul>
                    <li>ACTIS (Camac 2010)</li>
                    <li>Easyvista</li>
                    <li>LAGAPEO</li>
                    <li>LA PLACE</li>
                    <li>NEO</li>
                    <li>PAREO</li>
                    <li>Passerelle Employeur - Impôts à la source</li>
                    <li>RCPers - Registre Cantonal des Personnes</li>
                    <li>Réquisition - Désignation Electronique (ReqDes)</li>
                    <li>RDU</li>
                    <li>Themis</li>
                    <li>Votelec - Dépouillement</li>
                    <li>Wiki projets ACV</li>
                </ul>
            </details>
        </div>
        <div class="p-2">
            <a href="#">
                Aide en ligne
            </a>
        </div>
    </div>
</div>