Design system de l'infra

                
                  
<a href="#main" class="skiplink text-body fs-extra-small">Aller au contenu</a>
<header class="navbar navbar-expand-lg">
  <nav class="container-xxl bd-gutter flex-wrap">
    <div class="navbar-brand d-inline-flex align-items-center">
      <a class="navbar-brand-name d-flex align-items-center me-2" href="/">
        <img src="assets/images/LOGO_UL.png" alt="revenir à l'accueil du design system" class="d-inline-block ratio-1x1 me-2">
        <span class="logo-name text-dark">Design system</span>
      </a>
      <a href="https://numerique.univ-lorraine.fr/catalogue-des-services/quest-ce-quune-version-beta" title="Application BETA - Définition" target="_blank" class="badge-beta">
        <span class="badge">BETA</span>
      </a>
    </div>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-between" id="navbarSupportedContent">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#" title="vers la page d'accueil'">Accueil</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#" title="vers la page de lien">Lien</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" title="ouvrir le menu déroulant">
            Menu déroulant
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#" title="vers la page lien">Lien </a></li>
            <li><a class="dropdown-item" href="#" title="vers la page autre lien">Autre lien</a></li>
            <li><a class="dropdown-item" href="#" title="vers la page dernier lien">Dernier lien</a></li>
          </ul>
        </li>
      </ul>
      <form class="d-flex flex-column" role="search">
        <label class="form-label fs-extra-small visually-hidden" for="search-form">
          Rechercher dans l'application
        </label>
        <div class="input-group">
          <input id="search-form" class="form-control" type="text" title="Rechercher dans l'outil">
          <button class="btn btn-outline-dark" type="button">Rechercher</button>
        </div>
      </form>
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <button class="btn btn-link nav-link px-0 px-lg-2 py-2 dropdown-toggle icon d-flex align-items-center" type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16 16" role="img" aria-label="ouvrir les informations de connexion">
              <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6"/>
            </svg>
            <span class="fs-extra-small px-2">p08119</span>
          </button>
          <ul class="dropdown-menu dropdown-menu-end">
            <li class="px-3">Connecté en tant que p08119</li>
            <li><a class="dropdown-item" href="/documentation" title="vers la page de documentation">Documentation</a></li>
            <li><a class="dropdown-item" href="/assistance" title="vers la page d'assistance">Assistance</a></li>
            <li><a class="dropdown-item" href="/accounts/logout" title="se déconnecter">Se déconnecter</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
</header>
                
              

                
                  
<footer class="navbar navbar-expand-lg bg-white border-top">
	<div class="container-xxl bd-gutter flex-column flex-wrap flex-lg-nowrap flex-lg-row">
		<div class="col-4 navbar-nav d-flex flex-row">
			<span class="my-auto py-3 text-body-secondary">©2026 - </span>
			<a class="nav-link" href="https://numerique.univ-lorraine.fr/" title="vers le site de la direction du numérique à l'Université de Lorraine">Direction du numérique</a>
		</div>
		<ul class="col-8 navbar-nav navbar-nav justify-content-end">
			<li class="nav-item">
				<a class="nav-link" href="/documentation" title="vers la page de documentation">Documentation</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="https://www.univ-lorraine.fr/mentions-legales/" title="vers la page des mentions légales">Mentions légales</a>
			</li>
			<li class="nav-item">
				<a class="nav-link" href="declaration-accessibilite" title="vers la page de déclaration d'accessibilité">Déclaration d'accessibilité</a>
			</li>
			
			<li class="nav-item">
				<a class="nav-link" href="assistance" title="vers la page d'assistance">Assistance</a>
			</li><li class="nav-item">
				<a class="nav-link" href="mailto:dn-infra-eqwas@univ-lorraine.fr" title="Contact - envoyer un email à l'équipe de création du design systeme (ouvre votre messagerie)" target="_blank" rel="noopener noreferrer">Contact</a>
			</li>
		</ul>
	</div>
</footer>
                
              

                
                  
<p><a href="#" class="" title="vers la page - nom de la page">Ceci est un lien</a></p>
<p><a href="#" class="link-primary" title="vers la page - nom de la page">Ceci est un lien avec la class link-primary</a></p>
<p><a href="#" class="link-secondary" title="vers la page - nom de la page">Ceci est un lien avec la class link-secondary</a></p>
<p><a href="#" class="link-success" title="vers la page - nom de la page">Ceci est un lien avec la class link-success</a></p>
<p><a href="#" class="link-warning" title="vers la page - nom de la page">Ceci est un lien avec la class link-warning</a></p>
<p><a href="#" class="link-danger" title="vers la page - nom de la page">Ceci est un lien avec la class link-danger</a></p>
<p><a href="#" class="link-info" title="vers la page - nom de la page">Ceci est un lien avec la class link-info</a></p>
<p><a href="#" class="link-light" title="vers la page - nom de la page">Ceci est un lien avec la class link-light</a></p>
<p><a href="#" class="link-dark" title="vers la page - nom de la page">Ceci est un lien avec la class link-dark</a></p>
<p><a href="#" class="link-body-emphasis" title="vers la page - nom de la page">Ceci est un lien avec la class link-body-emphasis</a></p>