feat(Administrateurs::Procedure::Service#form): wrap explanation within DSFR::CallOut

app/components/dsfr/callout_component.rb

@@ -0,0 +1,12 @@
+# see: https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/mise-en-avant
+class Dsfr::CalloutComponent < ApplicationComponent
+  renders_one :body
+
+  private
+
+  def initialize(title:)
+    @title = title
+  end
+
+  attr_reader :title
+end

app/components/dsfr/callout_component/callout_component.html.haml

@@ -0,0 +1,3 @@
+%div.fr-callout
+  %h3.fr-callout__title= title
+  %p.fr-callout__text= body

app/javascript/entrypoints/application.js

@@ -71,3 +71,4 @@ import('../shared/track/sentry');
 import '../../../node_modules/@gouvfr/dsfr/dist/core/core.css';
 import '../../../node_modules/@gouvfr/dsfr/dist/component/button/button.css';
 import '../../../node_modules/@gouvfr/dsfr/dist/component/alert/alert.css';
+import '../../../node_modules/@gouvfr/dsfr/dist/component/callout/callout.css';

app/views/administrateurs/services/_form.html.haml

@@ -16,17 +16,16 @@
 
   = f.select :type_organisme, Service.type_organismes.keys.map { |key| [ I18n.t("type_organisme.#{key}"), key] }
 
-  %h2.header-section Informations de contact
+  = render Dsfr::CalloutComponent.new(title: "Informations de contact") do |c|
-
+    - c.body do
-  %p.explication
+      Votre démarche sera hébergée par #{APPLICATION_NAME} – mais nous ne pouvons pas assurer le support des démarches. Et malgré la dématérialisation, les usagers se poseront parfois des questions légitimes sur le processus administratif.
-    Votre démarche sera hébergée par #{APPLICATION_NAME} – mais nous ne pouvons pas assurer le support des démarches. Et malgré la dématérialisation, les usagers se poseront parfois des questions légitimes sur le processus administratif.
+      %br
-    %br
+      %br
-    %br
+      %strong Il est donc indispensable que les usagers puissent vous contacter
-    %strong Il est donc indispensable que les usagers puissent vous contacter
+      par le moyen de leur choix s’ils ont des questions sur votre démarche.
-    par le moyen de leur choix s’ils ont des questions sur votre démarche.
+      %br
-    %br
+      %br
-    %br
+      Ces informations de contact seront visibles par les utilisateurs de la démarche, affichées dans le menu « Aide », ainsi qu’en pied de page lors du dépôt d’un dossier. En cas d’informations invalides, #{APPLICATION_NAME} se réserve le droit de suspendre la publication de la démarche.
-    Ces informations de contact seront visibles par les utilisateurs de la démarche, affichées dans le menu « Aide », ainsi qu’en pied de page lors du dépôt d’un dossier. En cas d’informations invalides, #{APPLICATION_NAME} se réserve le droit de suspendre la publication de la démarche.
 
   = f.label :email do
     Adresse email