style(dsfr): dossier form header + notice link

app/javascript/entrypoints/main.css

@@ -11,6 +11,7 @@
 @import '@gouvfr/dsfr/dist/component/callout/callout.css';
 @import '@gouvfr/dsfr/dist/component/connect/connect.css';
 @import '@gouvfr/dsfr/dist/component/breadcrumb/breadcrumb.css';
+@import '@gouvfr/dsfr/dist/component/highlight/highlight.css';
 @import '@gouvfr/dsfr/dist/component/table/table.css';
 @import '@gouvfr/dsfr/dist/component/modal/modal.css';
 @import '@gouvfr/dsfr/dist/component/input/input.css';

app/views/shared/dossiers/_edit.html.haml

@@ -8,19 +8,22 @@
 
   = form_for dossier, form_options.merge({ html: { id: 'dossier-edit-form', class: 'form', multipart: true, novalidate: 'novalidate' } }) do |f|
 
-    .prologue
-      %p.mandatory-explanation= t('utils.asterisk_html')
-      - if dossier.brouillon?
-        %p.mandatory-explanation
-          = t('views.shared.dossiers.edit.autosave')
+    %header.mb-6
+      .fr-highlight
+        %p.fr-text--sm
+          %strong
+            = t('utils.asterisk_html')
+          - if dossier.brouillon?
+            = t('views.shared.dossiers.edit.autosave')
+
+          - if notice_url(dossier.procedure).present?
+            %br
+            = link_to t("views.shared.dossiers.edit.notice"), notice_url(dossier.procedure),
+                class: "fr-btn fr-btn--secondary mt-2",
+                title: t("views.shared.dossiers.edit.notice_title"), **external_link_attributes
+
       - if dossier.france_connect_information.present?
         = render partial: "shared/dossiers/france_connect_informations", locals: { user_information: dossier.france_connect_information }
-      - if notice_url(dossier.procedure).present?
-        = link_to notice_url(dossier.procedure), target: '_blank', rel: 'noopener', class: 'button notice', title: "Pour vous aider à remplir votre dossier, vous pouvez consulter le guide de cette démarche." do
-          %span.icon.info>
-          Guide de la démarche
-
-    %hr
 
     - if dossier.show_groupe_instructeur_selector?
       %span{ data: { controller: 'autosave' } }

config/locales/en.yml

@@ -136,6 +136,8 @@ en:
       dossiers:
         edit:
           autosave: Your file is automatically saved after each modification. You can close the window at any time and pick up where you left off later.
+          notice: "Notice to the procedure"
+          notice_title: "To help you complete your file, you can consult the notice to this procedure."
           submit_dossier: Submit the file
         messages:
           form:

config/locales/fr.yml

@@ -131,6 +131,8 @@ fr:
       dossiers:
         edit:
           autosave: Votre dossier est enregistré automatiquement après chaque modification. Vous pouvez à tout moment fermer la fenêtre et reprendre plus tard là où vous en étiez.
+          notice: Guide de la démarche
+          notice_title: "Pour vous aider à remplir votre dossier, vous pouvez consulter le guide de cette démarche."
           submit_dossier: Déposer le dossier
         messages:
           form: