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,9 +16,8 @@
 
   = f.select :type_organisme, Service.type_organismes.keys.map { |key| [ I18n.t("type_organisme.#{key}"), key] }
 
-  %h2.header-section Informations de contact
-
-  %p.explication
+  = render Dsfr::CalloutComponent.new(title: "Informations de contact") do |c|
+    - c.body do
       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