@lab-anssi/ui-kit 1.12.2 → 1.12.4

package/README.md

@@ -20,6 +20,7 @@ Le storybook des composants est disponible [ici](https://betagouv.github.io/lab-
 Il est construit avec [Histoire](https://histoire.dev/)
 
 ## Architecture de build
+
 Cette librairie a pour objectif de produire des composants Svelte et leurs équivalents [Webcomponent](https://developer.mozilla.org/en-US/docs/Web/API/Web_components).
 
 L'architecture pour produire du Svelte utilise [SvelteKit](https://svelte.dev/docs/kit/packaging), configuré via le wizard `npx sv create`.

package/dist/CentreAide.svelte

@@ -10,7 +10,9 @@ let liensMisEnForme = [];
 $: {
   liensMisEnForme = JSON.parse(liens);
   if (!Array.isArray(liensMisEnForme) || liensMisEnForme.some((l) => !l.texte)) {
-    throw new Error("Les liens doivent respecter le type : { texte: string; href?: string; preventDefault?: boolean; id?: string }[]");
+    throw new Error(
+      "Les liens doivent respecter le type : { texte: string; href?: string; preventDefault?: boolean; id?: string }[]"
+    );
   }
 }
 let ouvert = false;
@@ -52,11 +54,16 @@ let ouvert = false;
       </div>
       {#if liensMisEnForme}
         {#each liensMisEnForme as lien, id (id)}
-          <a class="lien lien-principal" href={lien.href} target="_blank" id={lien.id} on:click={(e) =>{
-            if(lien.preventDefault)
-              e.preventDefault();
-            emetEvenement('lienclique', { target: e.currentTarget });
-          }}>{lien.texte}</a>
+          <a
+            class="lien lien-principal"
+            href={lien.href}
+            target="_blank"
+            id={lien.id}
+            on:click={(e) => {
+              if (lien.preventDefault) e.preventDefault();
+              emetEvenement("lienclique", { target: e.currentTarget });
+            }}>{lien.texte}</a
+          >
         {/each}
       {/if}
       <div class="message marge-haute">

package/dist/generateurImagesPlaceholders.js

@@ -1,3 +1,3 @@
 export const genereImageDePlaceholder = (largeur, longeur, texteAffiche) => {
-    return `https://placehold.co/${largeur}x${longeur}${texteAffiche ? `?text=${encodeURIComponent(texteAffiche)}` : ''}`;
+    return `https://placehold.co/${largeur}x${longeur}${texteAffiche ? `?text=${encodeURIComponent(texteAffiche)}` : ""}`;
 };

package/dist/lab/ResumePssi.svelte

@@ -5,111 +5,81 @@
 
 <p>
   {nomService} est hébergé chez
-  <a
-    href="https://www.clever-cloud.com/"
-    rel="noopener"
-    target="_blank"
-  >
-    Clever Cloud
-  </a>
+  <a href="https://www.clever-cloud.com/" rel="noopener" target="_blank"> Clever Cloud </a>
   prenant appui sur
-  <a
-    href="https://www.cloud-temple.com/notre-approche-secnumcloud/"
-    rel="noopener"
-    target="_blank"
-  >
+  <a href="https://www.cloud-temple.com/notre-approche-secnumcloud/" rel="noopener" target="_blank">
     Cloud Temple
   </a>
   qualifié SecNumCloud.
 </p>
 <p>
-  L'ANSSI soumet {nomService} à un rythme d'homologation soutenu dans le
-  cadre d'une démarche de renforcement continu de la sécurité du service
-  numérique, dont plusieurs éléments clés mais non exhaustifs sont résumés
-  ci-dessous.
-</p>
-<h2>
-  Gouvernance
-</h2>
-<p>
-  Nous auditons régulièrement nos fournisseurs en termes de configuration et
-  d'architecture et maintenons un contact étroit avec eux pour améliorer en
-  continu leur sécurité et donc celle de vos données.
+  L'ANSSI soumet {nomService} à un rythme d'homologation soutenu dans le cadre d'une démarche de renforcement
+  continu de la sécurité du service numérique, dont plusieurs éléments clés mais non exhaustifs sont
+  résumés ci-dessous.
 </p>
+<h2>Gouvernance</h2>
 <p>
-  Nous auditions également régulièrement nos services (audits de code et tests
-  d'intrusion) par des prestataires qualifiés (PASSI).
+  Nous auditons régulièrement nos fournisseurs en termes de configuration et d'architecture et
+  maintenons un contact étroit avec eux pour améliorer en continu leur sécurité et donc celle de vos
+  données.
 </p>
 <p>
-  Nous réalisons et tenons à jour une analyse de risques de nos services en
-  prenant appui sur la méthode EBIOS Risk Manager.
+  Nous auditions également régulièrement nos services (audits de code et tests d'intrusion) par des
+  prestataires qualifiés (PASSI).
 </p>
 <p>
-  Nous maintenons une classification de l'ensemble des données que nous
-  conservons, selon leur sensibilité, afin d'assurer une protection adaptée.
+  Nous réalisons et tenons à jour une analyse de risques de nos services en prenant appui sur la
+  méthode EBIOS Risk Manager.
 </p>
 <p>
-  Nous maintenons un dossier d’architecture technique détaillé de nos services
-  et de leurs interconnexions.
+  Nous maintenons une classification de l'ensemble des données que nous conservons, selon leur
+  sensibilité, afin d'assurer une protection adaptée.
 </p>
 <p>
-  Les membres de nos équipes sont sensibilisés aux bonnes pratiques de
-  sécurité, quels que soient les profils (technique, produit, design,
-  déploiement), au travers de formations en continu ou de la réalisation de
-  campagnes anti-phishing.
+  Nous maintenons un dossier d’architecture technique détaillé de nos services et de leurs
+  interconnexions.
 </p>
-<h2>
-  Protection
-</h2>
 <p>
-  Vos données sont protégées par un chiffrement multi-couches, système et
-  applicatif.
+  Les membres de nos équipes sont sensibilisés aux bonnes pratiques de sécurité, quels que soient
+  les profils (technique, produit, design, déploiement), au travers de formations en continu ou de
+  la réalisation de campagnes anti-phishing.
 </p>
+<h2>Protection</h2>
+<p>Vos données sont protégées par un chiffrement multi-couches, système et applicatif.</p>
 <p>
-  Chaque membre de notre équipe est équipé de clés d'authentification
-  matérielle et l’authentification multi-facteur est généralisée à tous les
-  accès, permettant de mettre en œuvre une authentification forte sur
-  l'ensemble de nos services.
+  Chaque membre de notre équipe est équipé de clés d'authentification matérielle et
+  l’authentification multi-facteur est généralisée à tous les accès, permettant de mettre en œuvre
+  une authentification forte sur l'ensemble de nos services.
 </p>
 <p>
-  Nous limitons les accès au strict nécessaire et cloisonnons de façon
-  rigoureuse les activités d'administration, en particulier au niveau
-  technique&nbsp;: utilisation de comptes dédiés et séparés selon leurs
-  usages&nbsp;; postes d'administration durcis et réservés à ce seul
+  Nous limitons les accès au strict nécessaire et cloisonnons de façon rigoureuse les activités
+  d'administration, en particulier au niveau technique&nbsp;: utilisation de comptes dédiés et
+  séparés selon leurs usages&nbsp;; postes d'administration durcis et réservés à ce seul
   usage&nbsp;; clés d’authentification nominatives.
 </p>
-<p>Nous n’installons et n’utilisons que les applications strictement
-  nécessaires.
-</p>
-<p>
-  Les droits des administrateurs techniques et métiers sont restreints au
-  strict nécessaire.
-</p>
-<h2>
-  Défense
-</h2>
+<p>Nous n’installons et n’utilisons que les applications strictement nécessaires.</p>
+<p>Les droits des administrateurs techniques et métiers sont restreints au strict nécessaire.</p>
+<h2>Défense</h2>
 <p>
-  La sécurité de nos services est surveillée en continu : détection de
-  défiguration, scans automatisés, veille active sur les risques émergents.
+  La sécurité de nos services est surveillée en continu : détection de défiguration, scans
+  automatisés, veille active sur les risques émergents.
 </p>
 <p>
-  L'ensemble des actions est historisé de façon nominative pour simplifier
-  l'analyse en cas d'incident.
+  L'ensemble des actions est historisé de façon nominative pour simplifier l'analyse en cas
+  d'incident.
 </p>
 <p>
-  Nous mettons en œuvre et testons régulièrement notre procédure de gestion des
-  incidents de sécurité.
+  Nous mettons en œuvre et testons régulièrement notre procédure de gestion des incidents de
+  sécurité.
 </p>
-<h2>
-  Résilience
-</h2>
+<h2>Résilience</h2>
 <p>
-  Vos données sont sauvegardées de façon sécurisée et pérenne sur un
-  environnement totalement séparé de la plate-forme de production.
+  Vos données sont sauvegardées de façon sécurisée et pérenne sur un environnement totalement séparé
+  de la plate-forme de production.
 </p>
 <p>
-  En cas d'incident majeur, nous sommes capables de reconstruire totalement
-  l'application en production dans un délai très court.
+  En cas d'incident majeur, nous sommes capables de reconstruire totalement l'application en
+  production dans un délai très court.
 </p>
 
 <style>.visible-tablette {
@@ -149,4 +119,4 @@ a {
   text-decoration: underline;
   text-underline-offset: 4px;
   text-decoration-thickness: 1px;
-}</style>
+}</style>

package/dist/lab/icones/LienExterne.svelte

@@ -0,0 +1,20 @@
+<script>export let couleur = void 0;
+</script>
+
+<svg
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  fill="currentColor"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g id="external-link">
+    <path
+      id="Ic&#195;&#180;ne"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6.66667 4V5.33333H3.33333V12.6667H10.6667V9.33333H12V13.3333C12 13.7015 11.7015 14 11.3333 14H2.66667C2.29848 14 2 13.7015 2 13.3333V4.66667C2 4.29848 2.29848 4 2.66667 4H6.66667ZM14 2V8L11.4707 5.47133L7.47133 9.47133L6.52867 8.52867L10.528 4.52867L8 2H14Z"
+      fill={couleur}
+    />
+  </g>
+</svg>

package/dist/lab/icones/LienExterne.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        couleur?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type LienExterneProps = typeof __propDef.props;
+export type LienExterneEvents = typeof __propDef.events;
+export type LienExterneSlots = typeof __propDef.slots;
+export default class LienExterne extends SvelteComponent<LienExterneProps, LienExterneEvents, LienExterneSlots> {
+}
+export {};

package/dist/lab/vitrines-produits/briques/Brique.svelte

@@ -3,7 +3,11 @@ export let sansMargeHaute = false;
 export let sansMargeLaterale = false;
 </script>
 
-<section class={variation} class:sans-marge-haute={sansMargeHaute} class:sans-marge-laterale={sansMargeLaterale}>
+<section
+  class={variation}
+  class:sans-marge-haute={sansMargeHaute}
+  class:sans-marge-laterale={sansMargeLaterale}
+>
   <div class="contenu-brique">
     <slot />
   </div>
@@ -76,4 +80,4 @@ section.secondaire {
 .contenu-brique {
   max-width: 1200px;
   margin: 0 auto;
-}</style>
+}</style>

package/dist/lab/vitrines-produits/briques/BriqueContenuADeuxColonnes.svelte

@@ -1,14 +1,15 @@
 <svelte:options
   customElement={{
-		tag: 'lab-anssi-brique-contenu-a-deux-colonnes',
-		props: {
-      titre: { reflect: false, type: 'String', attribute: 'titre' },
-      paragraphe: { reflect: false, type: 'String', attribute: 'paragraphe' },
-			action: { reflect: false, type: 'Object', attribute: 'action' },
-      ordre: { reflect: false, type: 'String', attribute: 'ordre' },
-      illustration: { reflect: false, type: 'Object', attribute: 'illustration' }
-		}
-	}} />
+    tag: "lab-anssi-brique-contenu-a-deux-colonnes",
+    props: {
+      titre: { reflect: false, type: "String", attribute: "titre" },
+      paragraphe: { reflect: false, type: "String", attribute: "paragraphe" },
+      action: { reflect: false, type: "Object", attribute: "action" },
+      ordre: { reflect: false, type: "String", attribute: "ordre" },
+      illustration: { reflect: false, type: "Object", attribute: "illustration" },
+    },
+  }}
+/>
 
 <script>import Brique from "./Brique.svelte";
 export let titre;
@@ -162,4 +163,4 @@ export let illustration;
   .grille-contenu .illustration img {
     max-height: 330px;
   }
-}</style>
+}</style>

package/dist/lab/vitrines-produits/briques/BriqueHero.svelte

@@ -14,6 +14,7 @@
 />
 
 <script>import Brique from "./Brique.svelte";
+import LienExterne from "../../icones/LienExterne.svelte";
 export let titre;
 export let soustitre;
 export let illustration;
@@ -38,11 +39,27 @@ export let partenaires = [];
         <p>{soustitre}</p>
       </div>
       <div class="actions">
-        <a role="button" class="action-gauche" href={actiongauche.lien} target="_blank">
+        <a
+          role="button"
+          class="action-gauche"
+          href={actiongauche.lien}
+          target={actiongauche.target ?? "_self"}
+        >
           {actiongauche.titre}
+          {#if actiongauche.target === "_blank"}
+            <LienExterne />
+          {/if}
         </a>
-        <a role="button" class="action-droite" href={actiondroite.lien} target="_blank">
+        <a
+          role="button"
+          class="action-droite"
+          href={actiondroite.lien}
+          target={actiondroite.target ?? "_self"}
+        >
           {actiondroite.titre}
+          {#if actiondroite.target === "_blank"}
+            <LienExterne />
+          {/if}
         </a>
       </div>
     </div>
@@ -153,6 +170,7 @@ export let partenaires = [];
   grid-area: actions;
   display: flex;
   flex-direction: column;
+  flex-wrap: wrap;
   gap: 16px;
 }
 @media (min-width: 576px) {
@@ -220,6 +238,9 @@ export let partenaires = [];
   font-size: 1rem;
   line-height: 24px;
   border-radius: 4px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 .hero a[role=button].action-gauche {
   background-color: var(--brique-hero-bouton-gauche-background);

package/dist/lab/vitrines-produits/briques/BriqueTitreMultimedia.svelte

@@ -1,11 +1,12 @@
 <svelte:options
   customElement={{
-		tag: 'lab-anssi-titre-multimedia',
-		props: {
-      titre: { reflect: false, type: 'String', attribute: 'titre' },
-			multimedia: { reflect: false, type: 'Object', attribute: 'multimedia' },
-		}
-	}} />
+    tag: "lab-anssi-titre-multimedia",
+    props: {
+      titre: { reflect: false, type: "String", attribute: "titre" },
+      multimedia: { reflect: false, type: "Object", attribute: "multimedia" },
+    },
+  }}
+/>
 
 <script>import Brique from "./Brique.svelte";
 import LecteurVideo from "./LecteurVideo.svelte";
@@ -67,6 +68,7 @@ export let multimedia;
   font-size: 28px;
   line-height: 36px;
   margin: 0;
+  text-align: center;
 }
 @media (min-width: 932px) {
   .bloc-multimedia h2 {

package/dist/lab/vitrines-produits/briques/CarrouselTuiles/CarrouselTuiles.svelte

@@ -1,9 +1,11 @@
-<svelte:options customElement={{
-  tag: 'lab-anssi-carrousel-tuiles',
-  props: {
-    tuiles: { reflect: false, type: 'Array', attribute: 'tuiles' }
-  }
-}} />
+<svelte:options
+  customElement={{
+    tag: "lab-anssi-carrousel-tuiles",
+    props: {
+      tuiles: { reflect: false, type: "Array", attribute: "tuiles" },
+    },
+  }}
+/>
 
 <script>import Brique from "../Brique.svelte";
 import Tuile from "../Tuile.svelte";
@@ -115,13 +117,14 @@ const suivant = () => versDirection(1);
   background: none;
   border: none;
   color: var(--brique-carrousel-bouton-action-texte-couleur);
-  font-size: 18px;
+  font-size: 1rem;
   font-weight: 400;
-  line-height: 28px;
+  line-height: 1.5rem;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 8px;
+  box-shadow: inset 0 -1px 0 var(--brique-carrousel-bouton-action-texte-couleur);
 }
 
 .conteneur-actions .precedent > .icone,
@@ -131,9 +134,7 @@ const suivant = () => versDirection(1);
 }
 
 .conteneur-actions button:hover {
-  text-decoration: underline;
-  text-underline-offset: 4px;
-  text-decoration-thickness: 2px;
+  box-shadow: inset 0 -2px 0 var(--brique-carrousel-bouton-action-texte-couleur);
 }
 
 @media (min-width: 932px) {

package/dist/lab/vitrines-produits/briques/CarrouselTuiles/IconeFlecheDroite.svelte

@@ -1,5 +1,10 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.21875 7.33336H13.3334V8.6667H5.21875L8.79475 12.2427L7.85208 13.1854L2.66675 8.00003L7.85208 2.8147L8.79475 3.75736L5.21875 7.33336Z" fill="#042794"/>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M5.21875 7.33336H13.3334V8.6667H5.21875L8.79475 12.2427L7.85208 13.1854L2.66675 8.00003L7.85208 2.8147L8.79475 3.75736L5.21875 7.33336Z"
+    fill="#042794"
+  />
 </svg>
 
 <style>.visible-tablette {
@@ -38,4 +43,4 @@ svg {
 
 svg path {
   fill: var(--brique-carrousel-bouton-action-texte-couleur);
-}</style>
+}</style>

package/dist/lab/vitrines-produits/briques/CarrouselTuiles/IconeFlecheGauche.svelte

@@ -1,5 +1,10 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.21875 7.33336H13.3334V8.6667H5.21875L8.79475 12.2427L7.85208 13.1854L2.66675 8.00003L7.85208 2.8147L8.79475 3.75736L5.21875 7.33336Z" fill="#042794"/>
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M5.21875 7.33336H13.3334V8.6667H5.21875L8.79475 12.2427L7.85208 13.1854L2.66675 8.00003L7.85208 2.8147L8.79475 3.75736L5.21875 7.33336Z"
+    fill="#042794"
+  />
 </svg>
 
 <style>.visible-tablette {
@@ -34,4 +39,4 @@
 
 svg path {
   fill: var(--brique-carrousel-bouton-action-texte-couleur);
-}</style>
+}</style>

package/dist/lab/vitrines-produits/briques/LecteurVideo.svelte

@@ -4,19 +4,9 @@ export let imageDeCouverture = "";
 export let classe = "";
 </script>
 
-<video
-  controls
-  class={classe}
-  src={source}
-  poster={imageDeCouverture}
->
+<video controls class={classe} src={source} poster={imageDeCouverture}>
   <source src={source} type="video/mp4" />
-  <track
-      src={sourceSousTitres}
-      kind="captions"
-      srclang="fr"
-      label="Français"
-  />
+  <track src={sourceSousTitres} kind="captions" srclang="fr" label="Français" />
   Votre navigateur ne supporte pas la fonctionnalité de lecture de vidéos.
 </video>
 
@@ -54,4 +44,4 @@ video {
   width: 100%;
   max-width: 792px;
   max-height: 446px;
-}</style>
+}</style>

package/dist/lab/vitrines-produits/briques/PresentationANSSI.svelte

@@ -1,10 +1,12 @@
 <svelte:options
   customElement={{
-		tag: 'lab-anssi-presentation-anssi',
-	}} />
+    tag: "lab-anssi-presentation-anssi",
+  }}
+/>
 
 <script>import Brique from "./Brique.svelte";
 import { srcAsset } from "../../../assets/assets.js";
+import LienExterne from "../../icones/LienExterne.svelte";
 </script>
 
 <Brique variation="transparent">
@@ -15,21 +17,25 @@ import { srcAsset } from "../../../assets/assets.js";
     <div class="contenu">
       <h2>Qu'est ce que l'ANSSI ?</h2>
       <p>
-        Créée en 2009, l’Agence nationale de la sécurité des systèmes d’information (ANSSI) est l’autorité nationale en matière de cybersécurité et de cyberdéfense.
+        Créée en 2009, l’Agence nationale de la sécurité des systèmes d’information (ANSSI) est
+        l’autorité nationale en matière de cybersécurité et de cyberdéfense.
         <br />
         <br />
         <b>
-          Son action pour la protection de la Nation face aux cyberattaques se traduit en quatre grandes missions : défendre, connaître, partager, accompagner.
+          Son action pour la protection de la Nation face aux cyberattaques se traduit en quatre
+          grandes missions : défendre, connaître, partager, accompagner.
         </b>
       </p>
     </div>
     <div class="encart-action">
-      <a class="action" role="button" href="https://cyber.gouv.fr/" target="_blank">En savoir plus</a>
+      <a class="action" role="button" href="https://cyber.gouv.fr/" target="_blank">
+        En savoir plus
+        <LienExterne />
+      </a>
     </div>
   </div>
 </Brique>
 
-
 <style>.visible-tablette {
   display: none !important;
 }
@@ -133,6 +139,9 @@ import { srcAsset } from "../../../assets/assets.js";
   text-decoration: none;
   font-family: Marianne, sans-serif;
   padding: 8px 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
   text-align: center;
   font-weight: 500;
   font-size: 1rem;

package/dist/lab/vitrines-produits/briques/RejoindreLaCommunaute.svelte

@@ -1,13 +1,14 @@
 <svelte:options
   customElement={{
-		tag: 'lab-anssi-brique-rejoindre-la-communaute',
-		props: {
-      titre: { reflect: false, type: 'String', attribute: 'titre' },
-      raisons: { reflect: false, type: 'Array', attribute: 'raisons' },
-			action: { reflect: false, type: 'Object', attribute: 'action' },
-      illustration: { reflect: false, type: 'Object', attribute: 'illustration' }
-		}
-	}} />
+    tag: "lab-anssi-brique-rejoindre-la-communaute",
+    props: {
+      titre: { reflect: false, type: "String", attribute: "titre" },
+      raisons: { reflect: false, type: "Array", attribute: "raisons" },
+      action: { reflect: false, type: "Object", attribute: "action" },
+      illustration: { reflect: false, type: "Object", attribute: "illustration" },
+    },
+  }}
+/>
 
 <script>import Brique from "./Brique.svelte";
 export let titre;
@@ -166,4 +167,4 @@ export let illustration;
     width: 364px;
     height: 282px;
   }
-}</style>
+}</style>

package/dist/lab/vitrines-produits/briques/Tuile.svelte

@@ -77,13 +77,23 @@ export let position = null;
     margin-right: 0;
   }
 }
+.tuile .conteneur-image img {
+  max-width: 96px;
+  max-height: 96px;
+}
 
 p {
   margin: 0;
-  font-size: 22px;
+  font-size: 18px;
+  line-height: 24px;
   font-style: normal;
   font-weight: 700;
-  line-height: 28px;
+}
+@media (min-width: 768px) {
+  p {
+    font-size: 20px;
+    line-height: 28px;
+  }
 }
 
 span {

package/dist/lab/vitrines-produits/briques/marelle/Etape.svelte

@@ -1,4 +1,5 @@
-<script>export let index;
+<script>import LienExterne from "../../../icones/LienExterne.svelte";
+export let index;
 export let etapeMarelle;
 </script>
 
@@ -15,9 +16,12 @@ export let etapeMarelle;
     <h4>{etapeMarelle.titre}</h4>
     <p>{etapeMarelle.description}</p>
     {#if etapeMarelle.lien}
-      <a href={etapeMarelle.lien.href} target={etapeMarelle.lien.target}
-        >{etapeMarelle.lien.texte}</a
-      >
+      <a href={etapeMarelle.lien.href} target={etapeMarelle.lien.target}>
+        {etapeMarelle.lien.texte}
+        {#if etapeMarelle.lien.target === "_blank"}
+          <LienExterne />
+        {/if}
+      </a>
     {/if}
   </div>
 </div>
@@ -153,10 +157,15 @@ export let etapeMarelle;
 }
 
 .marelle-etape > div > a {
+  width: fit-content;
   color: var(--brique-marelle-etapes-lien-couleur);
-  display: inline-flex;
+  display: flex;
+  align-items: center;
+  gap: 8px;
   border: none;
-  text-decoration: underline;
-  text-underline-offset: 4px;
-  text-decoration-thickness: 1px;
+  text-decoration: none;
+  box-shadow: inset 0 -1px 0 var(--brique-marelle-etapes-lien-couleur);
+}
+.marelle-etape > div > a:hover {
+  box-shadow: inset 0 -2px 0 var(--brique-marelle-etapes-lien-couleur);
 }</style>