diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/a-propos.test.js.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/a-propos.test.js.snap
index 4436d9a5df..8bf2132baf 100644
--- a/packages/code-du-travail-frontend/__tests__/__snapshots__/a-propos.test.js.snap
+++ b/packages/code-du-travail-frontend/__tests__/__snapshots__/a-propos.test.js.snap
@@ -225,20 +225,20 @@ exports[`<About /> should render 1`] = `
 }
 
 .c20 {
-  margin: 0 auto 1rem;
   margin-bottom: 4rem;
+  margin-left: auto;
   text-align: center;
 }
 
 .c25 {
-  margin: 0 auto 1rem;
+  margin-bottom: 1.6rem;
   margin-left: -4rem;
   text-align: left;
 }
 
 .c34 {
-  margin: 0 auto 1rem;
   margin-bottom: 1.6rem;
+  margin-left: auto;
   text-align: center;
 }
 
@@ -742,11 +742,13 @@ exports[`<About /> should render 1`] = `
 @media (max-width:600px) {
   .c20 {
     margin-bottom: 2.4rem;
+    margin-left: auto;
   }
 }
 
 @media (max-width:600px) {
   .c25 {
+    margin-bottom: 1rem;
     margin-left: -1rem;
   }
 }
@@ -754,6 +756,7 @@ exports[`<About /> should render 1`] = `
 @media (max-width:600px) {
   .c34 {
     margin-bottom: 1rem;
+    margin-left: auto;
   }
 }
 
@@ -765,7 +768,7 @@ exports[`<About /> should render 1`] = `
 
 @media (max-width:600px) {
   .c21 {
-    font-size: 2.8rem;
+    font-size: 2.6rem;
   }
 }
 
diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/code-du-travail.test.js.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/code-du-travail.test.js.snap
index f5e2784f3b..457e19d240 100644
--- a/packages/code-du-travail-frontend/__tests__/__snapshots__/code-du-travail.test.js.snap
+++ b/packages/code-du-travail-frontend/__tests__/__snapshots__/code-du-travail.test.js.snap
@@ -74,7 +74,7 @@ exports[`<CodeDuTravail /> should render 1`] = `
   padding: 1rem 2rem;
   color: #3e486e;
   background-color: #f2f5fa;
-  border: 1px solid transparent;
+  border: 1px solid #f2f5fa;
   border-radius: 0.6rem;
 }
 
@@ -270,8 +270,8 @@ exports[`<CodeDuTravail /> should render 1`] = `
 }
 
 .c35 {
-  margin: 0 auto 1rem;
   margin-bottom: 1.6rem;
+  margin-left: auto;
   text-align: center;
 }
 
@@ -850,6 +850,7 @@ exports[`<CodeDuTravail /> should render 1`] = `
 @media (max-width:600px) {
   .c35 {
     margin-bottom: 1rem;
+    margin-left: auto;
   }
 }
 
diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/contribution.test.js.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/contribution.test.js.snap
index ed930e65a9..3cf376f9c9 100644
--- a/packages/code-du-travail-frontend/__tests__/__snapshots__/contribution.test.js.snap
+++ b/packages/code-du-travail-frontend/__tests__/__snapshots__/contribution.test.js.snap
@@ -15,7 +15,7 @@ exports[`<FicheContribution /> should render with external content 1`] = `
   margin-bottom: 0;
 }
 
-.c27 {
+.c28 {
   padding: 3.2rem 0;
   background-color: transparent;
   color: #3e486e;
@@ -51,7 +51,7 @@ exports[`<FicheContribution /> should render with external content 1`] = `
   margin-bottom: 0;
 }
 
-.c24 {
+.c25 {
   position: absolute;
   background-color: #7994d4;
   border-radius: 0.6rem;
@@ -64,7 +64,7 @@ exports[`<FicheContribution /> should render with external content 1`] = `
   transform: translateY(-50%);
 }
 
-.c31 {
+.c32 {
   position: absolute;
   background-color: #f66663;
   border-radius: none;
@@ -77,7 +77,7 @@ exports[`<FicheContribution /> should render with external content 1`] = `
   transform: translateY(-50%);
 }
 
-.c41 {
+.c42 {
   position: absolute;
   background-color: #7994d4;
   border-radius: 0.6rem;
@@ -90,7 +90,7 @@ exports[`<FicheContribution /> should render with external content 1`] = `
   transform: translateX(-50%);
 }
 
-.c29 {
+.c30 {
   position: relative;
   margin: 0 0 1rem 0;
   color: #2f3b6c;
@@ -102,7 +102,7 @@ exports[`<FicheContribution /> should render with external content 1`] = `
   padding-left: 2.4rem;
 }
 
-.c49 {
+.c50 {
   position: relative;
   margin: 0 0 1rem 0;
   color: #2f3b6c;
@@ -173,7 +173,7 @@ exports[`<FicheContribution /> should render with external content 1`] = `
   cursor: not-allowed;
 }
 
-.c33 {
+.c34 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -210,16 +210,16 @@ exports[`<FicheContribution /> should render with external content 1`] = `
   opacity: 1;
 }
 
-.c33:link,
-.c33:visited {
+.c34:link,
+.c34:visited {
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #3e486e;
 }
 
-.c33:not([disabled]):hover,
-.c33:not([disabled]):active,
-.c33:not([disabled]):focus {
+.c34:not([disabled]):hover,
+.c34:not([disabled]):active,
+.c34:not([disabled]):focus {
   opacity: 1;
   -webkit-transform: translateY(-2px);
   -ms-transform: translateY(-2px);
@@ -228,13 +228,13 @@ exports[`<FicheContribution /> should render with external content 1`] = `
   border-color: #dee5ef;
 }
 
-.c33[disabled] {
+.c34[disabled] {
   color: rgba(62,72,110,0.4);
   box-shadow: none;
   cursor: not-allowed;
 }
 
-.c43 {
+.c44 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -271,16 +271,16 @@ exports[`<FicheContribution /> should render with external content 1`] = `
   opacity: 1;
 }
 
-.c43:link,
-.c43:visited {
+.c44:link,
+.c44:visited {
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #fff;
 }
 
-.c43:not([disabled]):hover,
-.c43:not([disabled]):active,
-.c43:not([disabled]):focus {
+.c44:not([disabled]):hover,
+.c44:not([disabled]):active,
+.c44:not([disabled]):focus {
   opacity: 1;
   -webkit-transform: translateY(-2px);
   -ms-transform: translateY(-2px);
@@ -289,25 +289,25 @@ exports[`<FicheContribution /> should render with external content 1`] = `
   border-color: #a0b3e0;
 }
 
-.c43[disabled] {
+.c44[disabled] {
   color: rgba(255,255,255,0.4);
   box-shadow: none;
   cursor: not-allowed;
 }
 
 .c22 {
-  margin: 0 auto 1rem;
+  margin-bottom: 4rem;
   margin-left: -4rem;
   text-align: left;
 }
 
-.c39 {
-  margin: 0 auto 1rem;
+.c40 {
   margin-bottom: 1.6rem;
+  margin-left: auto;
   text-align: center;
 }
 
-.c23 {
+.c24 {
   position: relative;
   margin: 0;
   color: #2f3b6c;
@@ -318,7 +318,7 @@ exports[`<FicheContribution /> should render with external content 1`] = `
   padding-left: 4rem;
 }
 
-.c40 {
+.c41 {
   position: relative;
   margin: 0;
   color: #2f3b6c;
@@ -330,7 +330,7 @@ exports[`<FicheContribution /> should render with external content 1`] = `
   text-align: center;
 }
 
-.c25 {
+.c26 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -338,11 +338,15 @@ exports[`<FicheContribution /> should render with external content 1`] = `
   font-size: 1.4rem;
 }
 
-.c26 {
+.c23 {
+  margin-bottom: 0;
+}
+
+.c27 {
   margin: 3.2rem 0 0 0;
 }
 
-.c28 {
+.c29 {
   padding: 2rem 2.4rem;
   color: #3e486e;
   border-radius: 0.6rem;
@@ -365,15 +369,15 @@ exports[`<FicheContribution /> should render with external content 1`] = `
   justify-content: stretch;
 }
 
-.c28 > *:first-child {
+.c29 > *:first-child {
   margin-top: 0;
 }
 
-.c28 > *:last-child {
+.c29 > *:last-child {
   margin-bottom: 0;
 }
 
-.c30 {
+.c31 {
   -webkit-flex: 0 1 auto;
   -ms-flex: 0 1 auto;
   flex: 0 1 auto;
@@ -382,7 +386,7 @@ exports[`<FicheContribution /> should render with external content 1`] = `
   padding-bottom: 1rem;
 }
 
-.c32 {
+.c33 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -397,7 +401,7 @@ exports[`<FicheContribution /> should render with external content 1`] = `
   margin: 0;
 }
 
-.c35 + .c34 {
+.c36 + .c35 {
   margin-left: 4rem;
 }
 
@@ -662,12 +666,12 @@ exports[`<FicheContribution /> should render with external content 1`] = `
   margin-left: 1.6rem;
 }
 
-.c36 {
+.c37 {
   width: 100%;
   overflow-x: hidden;
 }
 
-.c37 {
+.c38 {
   position: relative;
   z-index: 1;
   margin-top: 4rem;
@@ -675,7 +679,7 @@ exports[`<FicheContribution /> should render with external content 1`] = `
   background-color: #f2f5fa;
 }
 
-.c37:before {
+.c38:before {
   position: absolute;
   top: -27px;
   left: -50%;
@@ -687,13 +691,13 @@ exports[`<FicheContribution /> should render with external content 1`] = `
   content: "";
 }
 
-.c38 {
+.c39 {
   position: relative;
   padding-bottom: 4rem;
   text-align: center;
 }
 
-.c42 {
+.c43 {
   max-width: 124rem;
   margin: 0 auto;
   padding: 0 2rem;
@@ -702,25 +706,25 @@ exports[`<FicheContribution /> should render with external content 1`] = `
   margin-bottom: 2rem;
 }
 
-.c42 > *:first-child {
+.c43 > *:first-child {
   margin-top: 0;
 }
 
-.c42 > *:last-child {
+.c43 > *:last-child {
   margin-bottom: 0;
 }
 
-.c44 {
+.c45 {
   width: 1.5em;
   margin-left: 1.6rem;
 }
 
-.c45 {
+.c46 {
   padding: 4rem 0;
   background-color: #e4e8ef;
 }
 
-.c46 {
+.c47 {
   max-width: 124rem;
   margin: 0 auto;
   padding: 0 2rem;
@@ -734,39 +738,39 @@ exports[`<FicheContribution /> should render with external content 1`] = `
   justify-content: space-between;
 }
 
-.c46 > *:first-child {
+.c47 > *:first-child {
   margin-top: 0;
 }
 
-.c46 > *:last-child {
+.c47 > *:last-child {
   margin-bottom: 0;
 }
 
-.c48 + .c47 {
+.c49 + .c48 {
   padding-left: 1.6rem;
 }
 
-.c51 {
+.c52 {
   margin: 0;
   padding: 0;
   list-style-type: none;
 }
 
-.c50 {
+.c51 {
   font-size: 1.6rem;
 }
 
-.c52 {
+.c53 {
   margin: 0.4rem 0;
 }
 
-.c53 {
+.c54 {
   font-weight: normal;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c54 {
+.c55 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -785,14 +789,14 @@ exports[`<FicheContribution /> should render with external content 1`] = `
   background-color: #e4e8ef;
 }
 
-.c55 {
+.c56 {
   font-weight: normal;
   -webkit-text-decoration: none;
   text-decoration: none;
   margin: 0 1rem 1rem 1rem;
 }
 
-.c56 {
+.c57 {
   margin-bottom: 1rem;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -850,20 +854,20 @@ exports[`<FicheContribution /> should render with external content 1`] = `
 }
 
 @media (max-width:600px) {
-  .c29 {
+  .c30 {
     margin-left: -1rem;
     padding-left: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c29 {
+  .c30 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c49 {
+  .c50 {
     font-size: 1.6rem;
   }
 }
@@ -875,61 +879,63 @@ exports[`<FicheContribution /> should render with external content 1`] = `
 }
 
 @media (max-width:600px) {
-  .c33 {
+  .c34 {
     font-size: 1.4rem;
   }
 }
 
 @media (max-width:600px) {
-  .c33 {
+  .c34 {
     padding: 0 3rem;
   }
 }
 
 @media (max-width:600px) {
-  .c43 {
+  .c44 {
     font-size: 1.4rem;
   }
 }
 
 @media (max-width:600px) {
-  .c43 {
+  .c44 {
     padding: 0 3rem;
   }
 }
 
 @media (max-width:600px) {
   .c22 {
+    margin-bottom: 2.4rem;
     margin-left: -1rem;
   }
 }
 
 @media (max-width:600px) {
-  .c39 {
+  .c40 {
     margin-bottom: 1rem;
+    margin-left: auto;
   }
 }
 
 @media (max-width:600px) {
-  .c23 {
+  .c24 {
     padding-left: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c23 {
-    font-size: 2.8rem;
+  .c24 {
+    font-size: 2.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c40 {
+  .c41 {
     font-size: 2.2rem;
   }
 }
 
 @media (max-width:600px) {
-  .c25 {
+  .c26 {
     -webkit-flex-flow: column;
     -ms-flex-flow: column;
     flex-flow: column;
@@ -941,26 +947,26 @@ exports[`<FicheContribution /> should render with external content 1`] = `
 }
 
 @media (max-width:600px) {
-  .c26 {
+  .c27 {
     margin-top: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c28 {
+  .c29 {
     padding: 1.6rem 1rem;
   }
 }
 
 @media print {
-  .c28 {
+  .c29 {
     padding: 0 5pt;
     border: none;
   }
 }
 
 @media (max-width:1180px) {
-  .c28 {
+  .c29 {
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
@@ -975,20 +981,20 @@ exports[`<FicheContribution /> should render with external content 1`] = `
 }
 
 @media (max-width:1180px) {
-  .c30 {
+  .c31 {
     margin-bottom: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c30 {
+  .c31 {
     padding-top: 0;
     padding-bottom: 0;
   }
 }
 
 @media (max-width:1180px) {
-  .c32 {
+  .c33 {
     -webkit-box-pack: space-around;
     -webkit-justify-content: space-around;
     -ms-flex-pack: space-around;
@@ -997,7 +1003,7 @@ exports[`<FicheContribution /> should render with external content 1`] = `
 }
 
 @media (max-width:1180px) {
-  .c35 + .c34 {
+  .c36 + .c35 {
     margin-left: 0;
   }
 }
@@ -1153,39 +1159,39 @@ exports[`<FicheContribution /> should render with external content 1`] = `
 }
 
 @media print {
-  .c37 {
+  .c38 {
     display: none;
   }
 }
 
 @media (max-width:600px) {
-  .c42 {
+  .c43 {
     padding: 0;
   }
 }
 
 @media print {
-  .c42 {
+  .c43 {
     max-width: 100%;
     padding: 0;
   }
 }
 
 @media (max-width:600px) {
-  .c46 {
+  .c47 {
     padding: 0 1rem;
   }
 }
 
 @media print {
-  .c46 {
+  .c47 {
     max-width: 100%;
     padding: 0;
   }
 }
 
 @media (max-width:600px) {
-  .c46 {
+  .c47 {
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
@@ -1193,26 +1199,26 @@ exports[`<FicheContribution /> should render with external content 1`] = `
 }
 
 @media (max-width:600px) {
-  .c48 + .c47 {
+  .c49 + .c48 {
     padding-left: 0;
   }
 }
 
 @media (max-width:600px) {
-  .c51 {
+  .c52 {
     text-align: center;
   }
 }
 
 @media (max-width:600px) {
-  .c50 {
+  .c51 {
     margin-top: 1rem;
     text-align: center;
   }
 }
 
 @media (max-width:980px) {
-  .c56 {
+  .c57 {
     display: none;
   }
 }
@@ -1428,22 +1434,22 @@ exports[`<FicheContribution /> should render with external content 1`] = `
             data-main-content="true"
           >
             <header
-              class="c22"
+              class="c22 c23"
             >
               <h1
-                class="c23"
+                class="c24"
               >
                 <div
-                  class="c24"
+                  class="c25"
                 />
                 Quelles sont les conséquences du décès de l’employeur sur le contrat de travail ?
               </h1>
             </header>
             <div
-              class="c25"
+              class="c26"
             />
             <div
-              class="c26"
+              class="c27"
             >
               <div
                 class="accordion"
@@ -1453,32 +1459,32 @@ exports[`<FicheContribution /> should render with external content 1`] = `
           </div>
         </div>
         <div
-          class="c27"
+          class="c28"
         >
           <div
             class="c20"
           >
             <div
-              class="c28"
+              class="c29"
             >
               <h3
-                class="c29 c30"
+                class="c30 c31"
               >
                 <div
-                  class="c31"
+                  class="c32"
                 />
                 Avez-vous trouvé la réponse à votre question ?
               </h3>
               <p
-                class="c32"
+                class="c33"
               >
                 <button
-                  class="c33 c34 c35"
+                  class="c34 c35 c36"
                 >
                   Non
                 </button>
                 <button
-                  class="c33 c34 c35"
+                  class="c34 c35 c36"
                 >
                   Oui
                 </button>
@@ -1490,40 +1496,40 @@ exports[`<FicheContribution /> should render with external content 1`] = `
     </div>
   </main>
   <div
-    class="c36"
+    class="c37"
   >
     <footer
-      class="c37"
+      class="c38"
     >
       <div
-        class="c27 c38"
+        class="c28 c39"
       >
         <div
           class="c20"
         >
           <header
-            class="c39"
+            class="c40"
           >
             <h3
-              class="c40"
+              class="c41"
             >
               <div
-                class="c41"
+                class="c42"
               />
               Besoin de plus d’informations ?
             </h3>
           </header>
           <div
-            class="c42"
+            class="c43"
           >
             Les services du ministère du Travail en région informent, conseillent et orientent les salariés et les employeurs du secteur privé sur leurs questions en droit du travail.
           </div>
           <button
-            class="c43"
+            class="c44"
           >
             Contacter nos services en région
             <svg
-              class="c44"
+              class="c45"
               fill="none"
               viewBox="0 0 28 15"
             >
@@ -1536,68 +1542,68 @@ exports[`<FicheContribution /> should render with external content 1`] = `
         </div>
       </div>
       <div
-        class="c27 c45"
+        class="c28 c46"
       >
         <nav>
           <div
-            class="c46"
+            class="c47"
           >
             <div
-              class="c47 c48"
+              class="c48 c49"
             >
               <h3
-                class="c49 c50"
+                class="c50 c51"
               >
                 Code du travail numérique
               </h3>
               <ul
-                class="c51"
+                class="c52"
               >
                 <li
-                  class="c52"
+                  class="c53"
                 >
                   <a
-                    class="c53"
+                    class="c54"
                     href="/droit-du-travail"
                   >
                     Le droit du travail
                   </a>
                 </li>
                 <li
-                  class="c52"
+                  class="c53"
                 >
                   <a
-                    class="c53"
+                    class="c54"
                     href="/glossaire"
                   >
                     Glossaire
                   </a>
                 </li>
                 <li
-                  class="c52"
+                  class="c53"
                 >
                   <a
-                    class="c53"
+                    class="c54"
                     href="/a-propos"
                   >
                     À propos
                   </a>
                 </li>
                 <li
-                  class="c52"
+                  class="c53"
                 >
                   <a
-                    class="c53"
+                    class="c54"
                     href="/mentions-legales"
                   >
                     Mentions légales
                   </a>
                 </li>
                 <li
-                  class="c52"
+                  class="c53"
                 >
                   <a
-                    class="c53"
+                    class="c54"
                     href="mailto:codedutravailnumerique@travail.gouv.fr"
                   >
                     Contact
@@ -1606,21 +1612,21 @@ exports[`<FicheContribution /> should render with external content 1`] = `
               </ul>
             </div>
             <div
-              class="c47 c48"
+              class="c48 c49"
             >
               <h3
-                class="c49 c50"
+                class="c50 c51"
               >
                 Aidez-nous à améliorer cet outil
               </h3>
               <ul
-                class="c51"
+                class="c52"
               >
                 <li
-                  class="c52"
+                  class="c53"
                 >
                   <a
-                    class="c53"
+                    class="c54"
                     href="https://github.com/SocialGouv/code-du-travail-numerique/tree/vX.Y.Z"
                     rel="noopener noreferrer"
                     target="_blank"
@@ -1629,10 +1635,10 @@ exports[`<FicheContribution /> should render with external content 1`] = `
                   </a>
                 </li>
                 <li
-                  class="c52"
+                  class="c53"
                 >
                   <a
-                    class="c53"
+                    class="c54"
                     href="https://github.com/SocialGouv/code-du-travail-numerique/releases/tag/vX.Y.Z"
                     rel="noopener noreferrer"
                     target="_blank"
@@ -1643,21 +1649,21 @@ exports[`<FicheContribution /> should render with external content 1`] = `
               </ul>
             </div>
             <div
-              class="c47 c48"
+              class="c48 c49"
             >
               <h3
-                class="c49 c50"
+                class="c50 c51"
               >
                 En collaboration avec
               </h3>
               <ul
-                class="c51"
+                class="c52"
               >
                 <li
-                  class="c52"
+                  class="c53"
                 >
                   <a
-                    class="c53"
+                    class="c54"
                     href="https://travail-emploi.gouv.fr/ministere/organisation/article/dgt-direction-generale-du-travail"
                     rel="noopener noreferrer"
                     target="_blank"
@@ -1666,10 +1672,10 @@ exports[`<FicheContribution /> should render with external content 1`] = `
                   </a>
                 </li>
                 <li
-                  class="c52"
+                  class="c53"
                 >
                   <a
-                    class="c53"
+                    class="c54"
                     href="https://incubateur.social.gouv.fr/"
                     rel="noopener noreferrer"
                     target="_blank"
@@ -1678,10 +1684,10 @@ exports[`<FicheContribution /> should render with external content 1`] = `
                   </a>
                 </li>
                 <li
-                  class="c52"
+                  class="c53"
                 >
                   <a
-                    class="c53"
+                    class="c54"
                     href="https://beta.gouv.fr/"
                     rel="noopener noreferrer"
                     target="_blank"
@@ -1695,10 +1701,10 @@ exports[`<FicheContribution /> should render with external content 1`] = `
         </nav>
       </div>
       <div
-        class="c54"
+        class="c55"
       >
         <a
-          class="c55"
+          class="c56"
           href="https://travail-emploi.gouv.fr"
           rel="noopener noreferrer"
           target="_blank"
@@ -1707,12 +1713,12 @@ exports[`<FicheContribution /> should render with external content 1`] = `
         </a>
         <span
           aria-hidden="true"
-          class="c56"
+          class="c57"
         >
           |
         </span>
         <a
-          class="c55"
+          class="c56"
           href="https://www.service-public.fr"
           rel="noopener noreferrer"
           target="_blank"
@@ -1721,12 +1727,12 @@ exports[`<FicheContribution /> should render with external content 1`] = `
         </a>
         <span
           aria-hidden="true"
-          class="c56"
+          class="c57"
         >
           |
         </span>
         <a
-          class="c55"
+          class="c56"
           href="https://www.legifrance.gouv.fr"
           rel="noopener noreferrer"
           target="_blank"
@@ -1735,12 +1741,12 @@ exports[`<FicheContribution /> should render with external content 1`] = `
         </a>
         <span
           aria-hidden="true"
-          class="c56"
+          class="c57"
         >
           |
         </span>
         <a
-          class="c55"
+          class="c56"
           href="https://www.data.gouv.fr"
           rel="noopener noreferrer"
           target="_blank"
@@ -1749,12 +1755,12 @@ exports[`<FicheContribution /> should render with external content 1`] = `
         </a>
         <span
           aria-hidden="true"
-          class="c56"
+          class="c57"
         >
           |
         </span>
         <a
-          class="c55"
+          class="c56"
           href="https://www.gouvernement.fr"
           rel="noopener noreferrer"
           target="_blank"
@@ -1763,12 +1769,12 @@ exports[`<FicheContribution /> should render with external content 1`] = `
         </a>
         <span
           aria-hidden="true"
-          class="c56"
+          class="c57"
         >
           |
         </span>
         <a
-          class="c55"
+          class="c56"
           href="https://www.cnil.fr/"
           rel="noopener noreferrer"
           target="_blank"
@@ -1796,7 +1802,7 @@ exports[`<FicheContribution /> should render without external content 1`] = `
   margin-bottom: 0;
 }
 
-.c27 {
+.c28 {
   padding: 3.2rem 0;
   background-color: transparent;
   color: #3e486e;
@@ -1832,7 +1838,7 @@ exports[`<FicheContribution /> should render without external content 1`] = `
   margin-bottom: 0;
 }
 
-.c24 {
+.c25 {
   position: absolute;
   background-color: #7994d4;
   border-radius: 0.6rem;
@@ -1845,7 +1851,7 @@ exports[`<FicheContribution /> should render without external content 1`] = `
   transform: translateY(-50%);
 }
 
-.c31 {
+.c32 {
   position: absolute;
   background-color: #f66663;
   border-radius: none;
@@ -1858,7 +1864,7 @@ exports[`<FicheContribution /> should render without external content 1`] = `
   transform: translateY(-50%);
 }
 
-.c41 {
+.c42 {
   position: absolute;
   background-color: #7994d4;
   border-radius: 0.6rem;
@@ -1871,7 +1877,7 @@ exports[`<FicheContribution /> should render without external content 1`] = `
   transform: translateX(-50%);
 }
 
-.c29 {
+.c30 {
   position: relative;
   margin: 0 0 1rem 0;
   color: #2f3b6c;
@@ -1883,7 +1889,7 @@ exports[`<FicheContribution /> should render without external content 1`] = `
   padding-left: 2.4rem;
 }
 
-.c49 {
+.c50 {
   position: relative;
   margin: 0 0 1rem 0;
   color: #2f3b6c;
@@ -1954,7 +1960,7 @@ exports[`<FicheContribution /> should render without external content 1`] = `
   cursor: not-allowed;
 }
 
-.c33 {
+.c34 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1991,16 +1997,16 @@ exports[`<FicheContribution /> should render without external content 1`] = `
   opacity: 1;
 }
 
-.c33:link,
-.c33:visited {
+.c34:link,
+.c34:visited {
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #3e486e;
 }
 
-.c33:not([disabled]):hover,
-.c33:not([disabled]):active,
-.c33:not([disabled]):focus {
+.c34:not([disabled]):hover,
+.c34:not([disabled]):active,
+.c34:not([disabled]):focus {
   opacity: 1;
   -webkit-transform: translateY(-2px);
   -ms-transform: translateY(-2px);
@@ -2009,13 +2015,13 @@ exports[`<FicheContribution /> should render without external content 1`] = `
   border-color: #dee5ef;
 }
 
-.c33[disabled] {
+.c34[disabled] {
   color: rgba(62,72,110,0.4);
   box-shadow: none;
   cursor: not-allowed;
 }
 
-.c43 {
+.c44 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2052,16 +2058,16 @@ exports[`<FicheContribution /> should render without external content 1`] = `
   opacity: 1;
 }
 
-.c43:link,
-.c43:visited {
+.c44:link,
+.c44:visited {
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #fff;
 }
 
-.c43:not([disabled]):hover,
-.c43:not([disabled]):active,
-.c43:not([disabled]):focus {
+.c44:not([disabled]):hover,
+.c44:not([disabled]):active,
+.c44:not([disabled]):focus {
   opacity: 1;
   -webkit-transform: translateY(-2px);
   -ms-transform: translateY(-2px);
@@ -2070,25 +2076,25 @@ exports[`<FicheContribution /> should render without external content 1`] = `
   border-color: #a0b3e0;
 }
 
-.c43[disabled] {
+.c44[disabled] {
   color: rgba(255,255,255,0.4);
   box-shadow: none;
   cursor: not-allowed;
 }
 
 .c22 {
-  margin: 0 auto 1rem;
+  margin-bottom: 4rem;
   margin-left: -4rem;
   text-align: left;
 }
 
-.c39 {
-  margin: 0 auto 1rem;
+.c40 {
   margin-bottom: 1.6rem;
+  margin-left: auto;
   text-align: center;
 }
 
-.c23 {
+.c24 {
   position: relative;
   margin: 0;
   color: #2f3b6c;
@@ -2099,7 +2105,7 @@ exports[`<FicheContribution /> should render without external content 1`] = `
   padding-left: 4rem;
 }
 
-.c40 {
+.c41 {
   position: relative;
   margin: 0;
   color: #2f3b6c;
@@ -2111,7 +2117,7 @@ exports[`<FicheContribution /> should render without external content 1`] = `
   text-align: center;
 }
 
-.c25 {
+.c26 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2119,11 +2125,15 @@ exports[`<FicheContribution /> should render without external content 1`] = `
   font-size: 1.4rem;
 }
 
-.c26 {
+.c23 {
+  margin-bottom: 0;
+}
+
+.c27 {
   margin: 3.2rem 0 0 0;
 }
 
-.c28 {
+.c29 {
   padding: 2rem 2.4rem;
   color: #3e486e;
   border-radius: 0.6rem;
@@ -2146,15 +2156,15 @@ exports[`<FicheContribution /> should render without external content 1`] = `
   justify-content: stretch;
 }
 
-.c28 > *:first-child {
+.c29 > *:first-child {
   margin-top: 0;
 }
 
-.c28 > *:last-child {
+.c29 > *:last-child {
   margin-bottom: 0;
 }
 
-.c30 {
+.c31 {
   -webkit-flex: 0 1 auto;
   -ms-flex: 0 1 auto;
   flex: 0 1 auto;
@@ -2163,7 +2173,7 @@ exports[`<FicheContribution /> should render without external content 1`] = `
   padding-bottom: 1rem;
 }
 
-.c32 {
+.c33 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2178,7 +2188,7 @@ exports[`<FicheContribution /> should render without external content 1`] = `
   margin: 0;
 }
 
-.c35 + .c34 {
+.c36 + .c35 {
   margin-left: 4rem;
 }
 
@@ -2443,12 +2453,12 @@ exports[`<FicheContribution /> should render without external content 1`] = `
   margin-left: 1.6rem;
 }
 
-.c36 {
+.c37 {
   width: 100%;
   overflow-x: hidden;
 }
 
-.c37 {
+.c38 {
   position: relative;
   z-index: 1;
   margin-top: 4rem;
@@ -2456,7 +2466,7 @@ exports[`<FicheContribution /> should render without external content 1`] = `
   background-color: #f2f5fa;
 }
 
-.c37:before {
+.c38:before {
   position: absolute;
   top: -27px;
   left: -50%;
@@ -2468,13 +2478,13 @@ exports[`<FicheContribution /> should render without external content 1`] = `
   content: "";
 }
 
-.c38 {
+.c39 {
   position: relative;
   padding-bottom: 4rem;
   text-align: center;
 }
 
-.c42 {
+.c43 {
   max-width: 124rem;
   margin: 0 auto;
   padding: 0 2rem;
@@ -2483,25 +2493,25 @@ exports[`<FicheContribution /> should render without external content 1`] = `
   margin-bottom: 2rem;
 }
 
-.c42 > *:first-child {
+.c43 > *:first-child {
   margin-top: 0;
 }
 
-.c42 > *:last-child {
+.c43 > *:last-child {
   margin-bottom: 0;
 }
 
-.c44 {
+.c45 {
   width: 1.5em;
   margin-left: 1.6rem;
 }
 
-.c45 {
+.c46 {
   padding: 4rem 0;
   background-color: #e4e8ef;
 }
 
-.c46 {
+.c47 {
   max-width: 124rem;
   margin: 0 auto;
   padding: 0 2rem;
@@ -2515,39 +2525,39 @@ exports[`<FicheContribution /> should render without external content 1`] = `
   justify-content: space-between;
 }
 
-.c46 > *:first-child {
+.c47 > *:first-child {
   margin-top: 0;
 }
 
-.c46 > *:last-child {
+.c47 > *:last-child {
   margin-bottom: 0;
 }
 
-.c48 + .c47 {
+.c49 + .c48 {
   padding-left: 1.6rem;
 }
 
-.c51 {
+.c52 {
   margin: 0;
   padding: 0;
   list-style-type: none;
 }
 
-.c50 {
+.c51 {
   font-size: 1.6rem;
 }
 
-.c52 {
+.c53 {
   margin: 0.4rem 0;
 }
 
-.c53 {
+.c54 {
   font-weight: normal;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c54 {
+.c55 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2566,14 +2576,14 @@ exports[`<FicheContribution /> should render without external content 1`] = `
   background-color: #e4e8ef;
 }
 
-.c55 {
+.c56 {
   font-weight: normal;
   -webkit-text-decoration: none;
   text-decoration: none;
   margin: 0 1rem 1rem 1rem;
 }
 
-.c56 {
+.c57 {
   margin-bottom: 1rem;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -2631,20 +2641,20 @@ exports[`<FicheContribution /> should render without external content 1`] = `
 }
 
 @media (max-width:600px) {
-  .c29 {
+  .c30 {
     margin-left: -1rem;
     padding-left: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c29 {
+  .c30 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c49 {
+  .c50 {
     font-size: 1.6rem;
   }
 }
@@ -2656,61 +2666,63 @@ exports[`<FicheContribution /> should render without external content 1`] = `
 }
 
 @media (max-width:600px) {
-  .c33 {
+  .c34 {
     font-size: 1.4rem;
   }
 }
 
 @media (max-width:600px) {
-  .c33 {
+  .c34 {
     padding: 0 3rem;
   }
 }
 
 @media (max-width:600px) {
-  .c43 {
+  .c44 {
     font-size: 1.4rem;
   }
 }
 
 @media (max-width:600px) {
-  .c43 {
+  .c44 {
     padding: 0 3rem;
   }
 }
 
 @media (max-width:600px) {
   .c22 {
+    margin-bottom: 2.4rem;
     margin-left: -1rem;
   }
 }
 
 @media (max-width:600px) {
-  .c39 {
+  .c40 {
     margin-bottom: 1rem;
+    margin-left: auto;
   }
 }
 
 @media (max-width:600px) {
-  .c23 {
+  .c24 {
     padding-left: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c23 {
-    font-size: 2.8rem;
+  .c24 {
+    font-size: 2.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c40 {
+  .c41 {
     font-size: 2.2rem;
   }
 }
 
 @media (max-width:600px) {
-  .c25 {
+  .c26 {
     -webkit-flex-flow: column;
     -ms-flex-flow: column;
     flex-flow: column;
@@ -2722,26 +2734,26 @@ exports[`<FicheContribution /> should render without external content 1`] = `
 }
 
 @media (max-width:600px) {
-  .c26 {
+  .c27 {
     margin-top: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c28 {
+  .c29 {
     padding: 1.6rem 1rem;
   }
 }
 
 @media print {
-  .c28 {
+  .c29 {
     padding: 0 5pt;
     border: none;
   }
 }
 
 @media (max-width:1180px) {
-  .c28 {
+  .c29 {
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
@@ -2756,20 +2768,20 @@ exports[`<FicheContribution /> should render without external content 1`] = `
 }
 
 @media (max-width:1180px) {
-  .c30 {
+  .c31 {
     margin-bottom: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c30 {
+  .c31 {
     padding-top: 0;
     padding-bottom: 0;
   }
 }
 
 @media (max-width:1180px) {
-  .c32 {
+  .c33 {
     -webkit-box-pack: space-around;
     -webkit-justify-content: space-around;
     -ms-flex-pack: space-around;
@@ -2778,7 +2790,7 @@ exports[`<FicheContribution /> should render without external content 1`] = `
 }
 
 @media (max-width:1180px) {
-  .c35 + .c34 {
+  .c36 + .c35 {
     margin-left: 0;
   }
 }
@@ -2934,39 +2946,39 @@ exports[`<FicheContribution /> should render without external content 1`] = `
 }
 
 @media print {
-  .c37 {
+  .c38 {
     display: none;
   }
 }
 
 @media (max-width:600px) {
-  .c42 {
+  .c43 {
     padding: 0;
   }
 }
 
 @media print {
-  .c42 {
+  .c43 {
     max-width: 100%;
     padding: 0;
   }
 }
 
 @media (max-width:600px) {
-  .c46 {
+  .c47 {
     padding: 0 1rem;
   }
 }
 
 @media print {
-  .c46 {
+  .c47 {
     max-width: 100%;
     padding: 0;
   }
 }
 
 @media (max-width:600px) {
-  .c46 {
+  .c47 {
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
@@ -2974,26 +2986,26 @@ exports[`<FicheContribution /> should render without external content 1`] = `
 }
 
 @media (max-width:600px) {
-  .c48 + .c47 {
+  .c49 + .c48 {
     padding-left: 0;
   }
 }
 
 @media (max-width:600px) {
-  .c51 {
+  .c52 {
     text-align: center;
   }
 }
 
 @media (max-width:600px) {
-  .c50 {
+  .c51 {
     margin-top: 1rem;
     text-align: center;
   }
 }
 
 @media (max-width:980px) {
-  .c56 {
+  .c57 {
     display: none;
   }
 }
@@ -3209,22 +3221,22 @@ exports[`<FicheContribution /> should render without external content 1`] = `
             data-main-content="true"
           >
             <header
-              class="c22"
+              class="c22 c23"
             >
               <h1
-                class="c23"
+                class="c24"
               >
                 <div
-                  class="c24"
+                  class="c25"
                 />
                 Quelles sont les conséquences du décès de l’employeur sur le contrat de travail ?
               </h1>
             </header>
             <div
-              class="c25"
+              class="c26"
             />
             <div
-              class="c26"
+              class="c27"
             >
               <div
                 class="accordion"
@@ -3234,32 +3246,32 @@ exports[`<FicheContribution /> should render without external content 1`] = `
           </div>
         </div>
         <div
-          class="c27"
+          class="c28"
         >
           <div
             class="c20"
           >
             <div
-              class="c28"
+              class="c29"
             >
               <h3
-                class="c29 c30"
+                class="c30 c31"
               >
                 <div
-                  class="c31"
+                  class="c32"
                 />
                 Avez-vous trouvé la réponse à votre question ?
               </h3>
               <p
-                class="c32"
+                class="c33"
               >
                 <button
-                  class="c33 c34 c35"
+                  class="c34 c35 c36"
                 >
                   Non
                 </button>
                 <button
-                  class="c33 c34 c35"
+                  class="c34 c35 c36"
                 >
                   Oui
                 </button>
@@ -3271,40 +3283,40 @@ exports[`<FicheContribution /> should render without external content 1`] = `
     </div>
   </main>
   <div
-    class="c36"
+    class="c37"
   >
     <footer
-      class="c37"
+      class="c38"
     >
       <div
-        class="c27 c38"
+        class="c28 c39"
       >
         <div
           class="c20"
         >
           <header
-            class="c39"
+            class="c40"
           >
             <h3
-              class="c40"
+              class="c41"
             >
               <div
-                class="c41"
+                class="c42"
               />
               Besoin de plus d’informations ?
             </h3>
           </header>
           <div
-            class="c42"
+            class="c43"
           >
             Les services du ministère du Travail en région informent, conseillent et orientent les salariés et les employeurs du secteur privé sur leurs questions en droit du travail.
           </div>
           <button
-            class="c43"
+            class="c44"
           >
             Contacter nos services en région
             <svg
-              class="c44"
+              class="c45"
               fill="none"
               viewBox="0 0 28 15"
             >
@@ -3317,68 +3329,68 @@ exports[`<FicheContribution /> should render without external content 1`] = `
         </div>
       </div>
       <div
-        class="c27 c45"
+        class="c28 c46"
       >
         <nav>
           <div
-            class="c46"
+            class="c47"
           >
             <div
-              class="c47 c48"
+              class="c48 c49"
             >
               <h3
-                class="c49 c50"
+                class="c50 c51"
               >
                 Code du travail numérique
               </h3>
               <ul
-                class="c51"
+                class="c52"
               >
                 <li
-                  class="c52"
+                  class="c53"
                 >
                   <a
-                    class="c53"
+                    class="c54"
                     href="/droit-du-travail"
                   >
                     Le droit du travail
                   </a>
                 </li>
                 <li
-                  class="c52"
+                  class="c53"
                 >
                   <a
-                    class="c53"
+                    class="c54"
                     href="/glossaire"
                   >
                     Glossaire
                   </a>
                 </li>
                 <li
-                  class="c52"
+                  class="c53"
                 >
                   <a
-                    class="c53"
+                    class="c54"
                     href="/a-propos"
                   >
                     À propos
                   </a>
                 </li>
                 <li
-                  class="c52"
+                  class="c53"
                 >
                   <a
-                    class="c53"
+                    class="c54"
                     href="/mentions-legales"
                   >
                     Mentions légales
                   </a>
                 </li>
                 <li
-                  class="c52"
+                  class="c53"
                 >
                   <a
-                    class="c53"
+                    class="c54"
                     href="mailto:codedutravailnumerique@travail.gouv.fr"
                   >
                     Contact
@@ -3387,21 +3399,21 @@ exports[`<FicheContribution /> should render without external content 1`] = `
               </ul>
             </div>
             <div
-              class="c47 c48"
+              class="c48 c49"
             >
               <h3
-                class="c49 c50"
+                class="c50 c51"
               >
                 Aidez-nous à améliorer cet outil
               </h3>
               <ul
-                class="c51"
+                class="c52"
               >
                 <li
-                  class="c52"
+                  class="c53"
                 >
                   <a
-                    class="c53"
+                    class="c54"
                     href="https://github.com/SocialGouv/code-du-travail-numerique/tree/vX.Y.Z"
                     rel="noopener noreferrer"
                     target="_blank"
@@ -3410,10 +3422,10 @@ exports[`<FicheContribution /> should render without external content 1`] = `
                   </a>
                 </li>
                 <li
-                  class="c52"
+                  class="c53"
                 >
                   <a
-                    class="c53"
+                    class="c54"
                     href="https://github.com/SocialGouv/code-du-travail-numerique/releases/tag/vX.Y.Z"
                     rel="noopener noreferrer"
                     target="_blank"
@@ -3424,21 +3436,21 @@ exports[`<FicheContribution /> should render without external content 1`] = `
               </ul>
             </div>
             <div
-              class="c47 c48"
+              class="c48 c49"
             >
               <h3
-                class="c49 c50"
+                class="c50 c51"
               >
                 En collaboration avec
               </h3>
               <ul
-                class="c51"
+                class="c52"
               >
                 <li
-                  class="c52"
+                  class="c53"
                 >
                   <a
-                    class="c53"
+                    class="c54"
                     href="https://travail-emploi.gouv.fr/ministere/organisation/article/dgt-direction-generale-du-travail"
                     rel="noopener noreferrer"
                     target="_blank"
@@ -3447,10 +3459,10 @@ exports[`<FicheContribution /> should render without external content 1`] = `
                   </a>
                 </li>
                 <li
-                  class="c52"
+                  class="c53"
                 >
                   <a
-                    class="c53"
+                    class="c54"
                     href="https://incubateur.social.gouv.fr/"
                     rel="noopener noreferrer"
                     target="_blank"
@@ -3459,10 +3471,10 @@ exports[`<FicheContribution /> should render without external content 1`] = `
                   </a>
                 </li>
                 <li
-                  class="c52"
+                  class="c53"
                 >
                   <a
-                    class="c53"
+                    class="c54"
                     href="https://beta.gouv.fr/"
                     rel="noopener noreferrer"
                     target="_blank"
@@ -3476,10 +3488,10 @@ exports[`<FicheContribution /> should render without external content 1`] = `
         </nav>
       </div>
       <div
-        class="c54"
+        class="c55"
       >
         <a
-          class="c55"
+          class="c56"
           href="https://travail-emploi.gouv.fr"
           rel="noopener noreferrer"
           target="_blank"
@@ -3488,12 +3500,12 @@ exports[`<FicheContribution /> should render without external content 1`] = `
         </a>
         <span
           aria-hidden="true"
-          class="c56"
+          class="c57"
         >
           |
         </span>
         <a
-          class="c55"
+          class="c56"
           href="https://www.service-public.fr"
           rel="noopener noreferrer"
           target="_blank"
@@ -3502,12 +3514,12 @@ exports[`<FicheContribution /> should render without external content 1`] = `
         </a>
         <span
           aria-hidden="true"
-          class="c56"
+          class="c57"
         >
           |
         </span>
         <a
-          class="c55"
+          class="c56"
           href="https://www.legifrance.gouv.fr"
           rel="noopener noreferrer"
           target="_blank"
@@ -3516,12 +3528,12 @@ exports[`<FicheContribution /> should render without external content 1`] = `
         </a>
         <span
           aria-hidden="true"
-          class="c56"
+          class="c57"
         >
           |
         </span>
         <a
-          class="c55"
+          class="c56"
           href="https://www.data.gouv.fr"
           rel="noopener noreferrer"
           target="_blank"
@@ -3530,12 +3542,12 @@ exports[`<FicheContribution /> should render without external content 1`] = `
         </a>
         <span
           aria-hidden="true"
-          class="c56"
+          class="c57"
         >
           |
         </span>
         <a
-          class="c55"
+          class="c56"
           href="https://www.gouvernement.fr"
           rel="noopener noreferrer"
           target="_blank"
@@ -3544,12 +3556,12 @@ exports[`<FicheContribution /> should render without external content 1`] = `
         </a>
         <span
           aria-hidden="true"
-          class="c56"
+          class="c57"
         >
           |
         </span>
         <a
-          class="c55"
+          class="c56"
           href="https://www.cnil.fr/"
           rel="noopener noreferrer"
           target="_blank"
diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/convention-collective.test.js.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/convention-collective.test.js.snap
index 022eebe09f..39f09d7fd0 100644
--- a/packages/code-du-travail-frontend/__tests__/__snapshots__/convention-collective.test.js.snap
+++ b/packages/code-du-travail-frontend/__tests__/__snapshots__/convention-collective.test.js.snap
@@ -51,7 +51,7 @@ exports[`<ConventionCollective /> should render 1`] = `
   padding: 1rem 2rem;
   color: #3e486e;
   background-color: #f2f5fa;
-  border: 1px solid transparent;
+  border: 1px solid #f2f5fa;
   border-radius: 0.6rem;
 }
 
diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/droit-du-travail.test.js.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/droit-du-travail.test.js.snap
index 4aab9ee8c9..8ca765be93 100644
--- a/packages/code-du-travail-frontend/__tests__/__snapshots__/droit-du-travail.test.js.snap
+++ b/packages/code-du-travail-frontend/__tests__/__snapshots__/droit-du-travail.test.js.snap
@@ -240,6 +240,7 @@ exports[`<DroitDuTravail /> should render 1`] = `
   font-weight: 600;
   font-size: 1.6rem;
   line-height: 1.625;
+  vertical-align: baseline;
   text-align: left;
   background: none;
   border: none;
@@ -365,14 +366,14 @@ exports[`<DroitDuTravail /> should render 1`] = `
 }
 
 .c22 {
-  margin: 0 auto 1rem;
   margin-bottom: 4rem;
+  margin-left: auto;
   text-align: center;
 }
 
 .c29 {
-  margin: 0 auto 1rem;
   margin-bottom: 1.6rem;
+  margin-left: auto;
   text-align: center;
 }
 
@@ -1014,18 +1015,20 @@ exports[`<DroitDuTravail /> should render 1`] = `
 @media (max-width:600px) {
   .c22 {
     margin-bottom: 2.4rem;
+    margin-left: auto;
   }
 }
 
 @media (max-width:600px) {
   .c29 {
     margin-bottom: 1rem;
+    margin-left: auto;
   }
 }
 
 @media (max-width:600px) {
   .c23 {
-    font-size: 2.8rem;
+    font-size: 2.6rem;
   }
 }
 
diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/fiche-ministere-travail.test.js.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/fiche-ministere-travail.test.js.snap
index 1dd734089c..e85259877b 100644
--- a/packages/code-du-travail-frontend/__tests__/__snapshots__/fiche-ministere-travail.test.js.snap
+++ b/packages/code-du-travail-frontend/__tests__/__snapshots__/fiche-ministere-travail.test.js.snap
@@ -15,7 +15,7 @@ exports[`<FicheMT /> should render 1`] = `
   margin-bottom: 0;
 }
 
-.c47 {
+.c48 {
   padding: 3.2rem 0;
   background-color: transparent;
   color: #3e486e;
@@ -51,7 +51,7 @@ exports[`<FicheMT /> should render 1`] = `
   margin-bottom: 0;
 }
 
-.c33 {
+.c34 {
   position: absolute;
   background-color: #7994d4;
   border-radius: 0.6rem;
@@ -64,7 +64,7 @@ exports[`<FicheMT /> should render 1`] = `
   transform: translateY(-50%);
 }
 
-.c51 {
+.c52 {
   position: absolute;
   background-color: #f66663;
   border-radius: none;
@@ -77,7 +77,7 @@ exports[`<FicheMT /> should render 1`] = `
   transform: translateY(-50%);
 }
 
-.c61 {
+.c62 {
   position: absolute;
   background-color: #7994d4;
   border-radius: 0.6rem;
@@ -90,7 +90,7 @@ exports[`<FicheMT /> should render 1`] = `
   transform: translateX(-50%);
 }
 
-.c43 {
+.c44 {
   position: relative;
   margin: 0 0 1rem 0;
   color: #2f3b6c;
@@ -100,7 +100,7 @@ exports[`<FicheMT /> should render 1`] = `
   line-height: 1.25;
 }
 
-.c49 {
+.c50 {
   position: relative;
   margin: 0 0 1rem 0;
   color: #2f3b6c;
@@ -112,16 +112,16 @@ exports[`<FicheMT /> should render 1`] = `
   padding-left: 2.4rem;
 }
 
-.c40 + .c39 {
+.c41 + .c40 {
   border-top: 1px solid #bbcadf;
 }
 
-.c44 {
+.c45 {
   margin: 2rem 0;
   padding: 0;
 }
 
-.c42 {
+.c43 {
   position: relative;
   -webkit-transform: rotate(0);
   -ms-transform: rotate(0);
@@ -136,14 +136,14 @@ exports[`<FicheMT /> should render 1`] = `
   color: #7994d4;
 }
 
-[aria-expanded="true"] .c42,
-[aria-selected="true"] .c42 {
+[aria-expanded="true"] .c43,
+[aria-selected="true"] .c43 {
   -webkit-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 
-.c41 {
+.c42 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -160,28 +160,28 @@ exports[`<FicheMT /> should render 1`] = `
   cursor: pointer;
 }
 
-.c41:hover,
-.c41:focus,
-.c41:focus-within,
-.c41[aria-expanded="true"] {
+.c42:hover,
+.c42:focus,
+.c42:focus-within,
+.c42[aria-expanded="true"] {
   color: #3e486e;
 }
 
-.c45 {
+.c46 {
   padding: 1.6rem;
   -webkit-animation: bcCCNc 0.35s ease-in;
   animation: bcCCNc 0.35s ease-in;
 }
 
-.c45 > *:first-child {
+.c46 > *:first-child {
   margin-top: 0;
 }
 
-.c45 > *:last-child {
+.c46 > *:last-child {
   margin-bottom: 0;
 }
 
-.c45.accordion__body--hidden {
+.c46.accordion__body--hidden {
   display: none;
 }
 
@@ -246,7 +246,7 @@ exports[`<FicheMT /> should render 1`] = `
   cursor: not-allowed;
 }
 
-.c53 {
+.c54 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -283,16 +283,16 @@ exports[`<FicheMT /> should render 1`] = `
   opacity: 1;
 }
 
-.c53:link,
-.c53:visited {
+.c54:link,
+.c54:visited {
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #3e486e;
 }
 
-.c53:not([disabled]):hover,
-.c53:not([disabled]):active,
-.c53:not([disabled]):focus {
+.c54:not([disabled]):hover,
+.c54:not([disabled]):active,
+.c54:not([disabled]):focus {
   opacity: 1;
   -webkit-transform: translateY(-2px);
   -ms-transform: translateY(-2px);
@@ -301,13 +301,13 @@ exports[`<FicheMT /> should render 1`] = `
   border-color: #dee5ef;
 }
 
-.c53[disabled] {
+.c54[disabled] {
   color: rgba(62,72,110,0.4);
   box-shadow: none;
   cursor: not-allowed;
 }
 
-.c63 {
+.c64 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -344,16 +344,16 @@ exports[`<FicheMT /> should render 1`] = `
   opacity: 1;
 }
 
-.c63:link,
-.c63:visited {
+.c64:link,
+.c64:visited {
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #fff;
 }
 
-.c63:not([disabled]):hover,
-.c63:not([disabled]):active,
-.c63:not([disabled]):focus {
+.c64:not([disabled]):hover,
+.c64:not([disabled]):active,
+.c64:not([disabled]):focus {
   opacity: 1;
   -webkit-transform: translateY(-2px);
   -ms-transform: translateY(-2px);
@@ -362,7 +362,7 @@ exports[`<FicheMT /> should render 1`] = `
   border-color: #a0b3e0;
 }
 
-.c63[disabled] {
+.c64[disabled] {
   color: rgba(255,255,255,0.4);
   box-shadow: none;
   cursor: not-allowed;
@@ -413,18 +413,18 @@ exports[`<FicheMT /> should render 1`] = `
 }
 
 .c31 {
-  margin: 0 auto 1rem;
+  margin-bottom: 4rem;
   margin-left: -4rem;
   text-align: left;
 }
 
-.c59 {
-  margin: 0 auto 1rem;
+.c60 {
   margin-bottom: 1.6rem;
+  margin-left: auto;
   text-align: center;
 }
 
-.c32 {
+.c33 {
   position: relative;
   margin: 0;
   color: #2f3b6c;
@@ -435,7 +435,7 @@ exports[`<FicheMT /> should render 1`] = `
   padding-left: 4rem;
 }
 
-.c60 {
+.c61 {
   position: relative;
   margin: 0;
   color: #2f3b6c;
@@ -447,7 +447,7 @@ exports[`<FicheMT /> should render 1`] = `
   text-align: center;
 }
 
-.c34 {
+.c35 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -455,15 +455,19 @@ exports[`<FicheMT /> should render 1`] = `
   font-size: 1.4rem;
 }
 
-.c35 {
+.c36 {
   margin-right: 1rem;
 }
 
-.c36 {
+.c32 {
+  margin-bottom: 0;
+}
+
+.c37 {
   margin: 3.2rem 0 0 0;
 }
 
-.c48 {
+.c49 {
   padding: 2rem 2.4rem;
   color: #3e486e;
   border-radius: 0.6rem;
@@ -486,15 +490,15 @@ exports[`<FicheMT /> should render 1`] = `
   justify-content: stretch;
 }
 
-.c48 > *:first-child {
+.c49 > *:first-child {
   margin-top: 0;
 }
 
-.c48 > *:last-child {
+.c49 > *:last-child {
   margin-bottom: 0;
 }
 
-.c50 {
+.c51 {
   -webkit-flex: 0 1 auto;
   -ms-flex: 0 1 auto;
   flex: 0 1 auto;
@@ -503,7 +507,7 @@ exports[`<FicheMT /> should render 1`] = `
   padding-bottom: 1rem;
 }
 
-.c52 {
+.c53 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -518,7 +522,7 @@ exports[`<FicheMT /> should render 1`] = `
   margin: 0;
 }
 
-.c55 + .c54 {
+.c56 + .c55 {
   margin-left: 4rem;
 }
 
@@ -633,19 +637,20 @@ exports[`<FicheMT /> should render 1`] = `
   width: 80%;
 }
 
-.c37 {
+.c38 {
   padding: 2rem 2.4rem;
   color: #3e486e;
   border-radius: 0.6rem;
   background-color: #f2f5fa;
+  border: 1px solid #f2f5fa;
   margin: 1.6rem auto;
 }
 
-.c37 > *:first-child {
+.c38 > *:first-child {
   margin-top: 0;
 }
 
-.c37 > *:last-child {
+.c38 > *:last-child {
   margin-bottom: 0;
 }
 
@@ -876,12 +881,12 @@ exports[`<FicheMT /> should render 1`] = `
   margin-left: 1.6rem;
 }
 
-.c56 {
+.c57 {
   width: 100%;
   overflow-x: hidden;
 }
 
-.c57 {
+.c58 {
   position: relative;
   z-index: 1;
   margin-top: 4rem;
@@ -889,7 +894,7 @@ exports[`<FicheMT /> should render 1`] = `
   background-color: #f2f5fa;
 }
 
-.c57:before {
+.c58:before {
   position: absolute;
   top: -27px;
   left: -50%;
@@ -901,13 +906,13 @@ exports[`<FicheMT /> should render 1`] = `
   content: "";
 }
 
-.c58 {
+.c59 {
   position: relative;
   padding-bottom: 4rem;
   text-align: center;
 }
 
-.c62 {
+.c63 {
   max-width: 124rem;
   margin: 0 auto;
   padding: 0 2rem;
@@ -916,25 +921,25 @@ exports[`<FicheMT /> should render 1`] = `
   margin-bottom: 2rem;
 }
 
-.c62 > *:first-child {
+.c63 > *:first-child {
   margin-top: 0;
 }
 
-.c62 > *:last-child {
+.c63 > *:last-child {
   margin-bottom: 0;
 }
 
-.c64 {
+.c65 {
   width: 1.5em;
   margin-left: 1.6rem;
 }
 
-.c65 {
+.c66 {
   padding: 4rem 0;
   background-color: #e4e8ef;
 }
 
-.c66 {
+.c67 {
   max-width: 124rem;
   margin: 0 auto;
   padding: 0 2rem;
@@ -948,39 +953,39 @@ exports[`<FicheMT /> should render 1`] = `
   justify-content: space-between;
 }
 
-.c66 > *:first-child {
+.c67 > *:first-child {
   margin-top: 0;
 }
 
-.c66 > *:last-child {
+.c67 > *:last-child {
   margin-bottom: 0;
 }
 
-.c68 + .c67 {
+.c69 + .c68 {
   padding-left: 1.6rem;
 }
 
-.c70 {
+.c71 {
   margin: 0;
   padding: 0;
   list-style-type: none;
 }
 
-.c69 {
+.c70 {
   font-size: 1.6rem;
 }
 
-.c71 {
+.c72 {
   margin: 0.4rem 0;
 }
 
-.c72 {
+.c73 {
   font-weight: normal;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c73 {
+.c74 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -999,14 +1004,14 @@ exports[`<FicheMT /> should render 1`] = `
   background-color: #e4e8ef;
 }
 
-.c74 {
+.c75 {
   font-weight: normal;
   -webkit-text-decoration: none;
   text-decoration: none;
   margin: 0 1rem 1rem 1rem;
 }
 
-.c75 {
+.c76 {
   margin-bottom: 1rem;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -1037,19 +1042,19 @@ exports[`<FicheMT /> should render 1`] = `
   content: "";
 }
 
-.c38 > *:first-child {
+.c39 > *:first-child {
   margin-top: 0;
 }
 
-.c38 > *:last-child {
+.c39 > *:last-child {
   margin-bottom: 0;
 }
 
-.c46 > *:first-child {
+.c47 > *:first-child {
   margin-top: 0;
 }
 
-.c46 > *:last-child {
+.c47 > *:last-child {
   margin-bottom: 0;
 }
 
@@ -1080,26 +1085,26 @@ exports[`<FicheMT /> should render 1`] = `
 }
 
 @media (max-width:600px) {
-  .c43 {
+  .c44 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c49 {
+  .c50 {
     margin-left: -1rem;
     padding-left: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c49 {
+  .c50 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c45 {
+  .c46 {
     padding: 1rem 0;
   }
 }
@@ -1111,25 +1116,25 @@ exports[`<FicheMT /> should render 1`] = `
 }
 
 @media (max-width:600px) {
-  .c53 {
+  .c54 {
     font-size: 1.4rem;
   }
 }
 
 @media (max-width:600px) {
-  .c53 {
+  .c54 {
     padding: 0 3rem;
   }
 }
 
 @media (max-width:600px) {
-  .c63 {
+  .c64 {
     font-size: 1.4rem;
   }
 }
 
 @media (max-width:600px) {
-  .c63 {
+  .c64 {
     padding: 0 3rem;
   }
 }
@@ -1155,36 +1160,38 @@ exports[`<FicheMT /> should render 1`] = `
 
 @media (max-width:600px) {
   .c31 {
+    margin-bottom: 2.4rem;
     margin-left: -1rem;
   }
 }
 
 @media (max-width:600px) {
-  .c59 {
+  .c60 {
     margin-bottom: 1rem;
+    margin-left: auto;
   }
 }
 
 @media (max-width:600px) {
-  .c32 {
+  .c33 {
     padding-left: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c32 {
-    font-size: 2.8rem;
+  .c33 {
+    font-size: 2.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c60 {
+  .c61 {
     font-size: 2.2rem;
   }
 }
 
 @media (max-width:600px) {
-  .c34 {
+  .c35 {
     -webkit-flex-flow: column;
     -ms-flex-flow: column;
     flex-flow: column;
@@ -1196,26 +1203,26 @@ exports[`<FicheMT /> should render 1`] = `
 }
 
 @media (max-width:600px) {
-  .c36 {
+  .c37 {
     margin-top: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c48 {
+  .c49 {
     padding: 1.6rem 1rem;
   }
 }
 
 @media print {
-  .c48 {
+  .c49 {
     padding: 0 5pt;
     border: none;
   }
 }
 
 @media (max-width:1180px) {
-  .c48 {
+  .c49 {
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
@@ -1230,20 +1237,20 @@ exports[`<FicheMT /> should render 1`] = `
 }
 
 @media (max-width:1180px) {
-  .c50 {
+  .c51 {
     margin-bottom: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c50 {
+  .c51 {
     padding-top: 0;
     padding-bottom: 0;
   }
 }
 
 @media (max-width:1180px) {
-  .c52 {
+  .c53 {
     -webkit-box-pack: space-around;
     -webkit-justify-content: space-around;
     -ms-flex-pack: space-around;
@@ -1252,7 +1259,7 @@ exports[`<FicheMT /> should render 1`] = `
 }
 
 @media (max-width:1180px) {
-  .c55 + .c54 {
+  .c56 + .c55 {
     margin-left: 0;
   }
 }
@@ -1314,13 +1321,13 @@ exports[`<FicheMT /> should render 1`] = `
 }
 
 @media (max-width:600px) {
-  .c37 {
+  .c38 {
     padding: 1.6rem 1rem;
   }
 }
 
 @media print {
-  .c37 {
+  .c38 {
     padding: 0 5pt;
     border: none;
   }
@@ -1452,39 +1459,39 @@ exports[`<FicheMT /> should render 1`] = `
 }
 
 @media print {
-  .c57 {
+  .c58 {
     display: none;
   }
 }
 
 @media (max-width:600px) {
-  .c62 {
+  .c63 {
     padding: 0;
   }
 }
 
 @media print {
-  .c62 {
+  .c63 {
     max-width: 100%;
     padding: 0;
   }
 }
 
 @media (max-width:600px) {
-  .c66 {
+  .c67 {
     padding: 0 1rem;
   }
 }
 
 @media print {
-  .c66 {
+  .c67 {
     max-width: 100%;
     padding: 0;
   }
 }
 
 @media (max-width:600px) {
-  .c66 {
+  .c67 {
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
@@ -1492,26 +1499,26 @@ exports[`<FicheMT /> should render 1`] = `
 }
 
 @media (max-width:600px) {
-  .c68 + .c67 {
+  .c69 + .c68 {
     padding-left: 0;
   }
 }
 
 @media (max-width:600px) {
-  .c70 {
+  .c71 {
     text-align: center;
   }
 }
 
 @media (max-width:600px) {
-  .c69 {
+  .c70 {
     margin-top: 1rem;
     text-align: center;
   }
 }
 
 @media (max-width:980px) {
-  .c75 {
+  .c76 {
     display: none;
   }
 }
@@ -1792,22 +1799,22 @@ exports[`<FicheMT /> should render 1`] = `
               Santé, sécurité et conditions de travail
             </span>
             <header
-              class="c31"
+              class="c31 c32"
             >
               <h1
-                class="c32"
+                class="c33"
               >
                 <div
-                  class="c33"
+                  class="c34"
                 />
                 Fiche MT test
               </h1>
             </header>
             <div
-              class="c34"
+              class="c35"
             >
               <span
-                class="c35"
+                class="c36"
               >
                 Source:
                  
@@ -1825,13 +1832,13 @@ exports[`<FicheMT /> should render 1`] = `
               </span>
             </div>
             <div
-              class="c36"
+              class="c37"
             >
               <div
-                class="c37"
+                class="c38"
               >
                 <div
-                  class="c38"
+                  class="c39"
                 >
                   lorem ipsum intro
                 </div>
@@ -1841,7 +1848,7 @@ exports[`<FicheMT /> should render 1`] = `
                 data-accordion-component="Accordion"
               >
                 <div
-                  class="c39 c40"
+                  class="c40 c41"
                   data-accordion-component="AccordionItem"
                 >
                   <div
@@ -1854,14 +1861,14 @@ exports[`<FicheMT /> should render 1`] = `
                       aria-controls="accordion__panel-t1-Visite-d-information-et-de-prevention-pour-qui"
                       aria-disabled="false"
                       aria-expanded="false"
-                      class="c41"
+                      class="c42"
                       data-accordion-component="AccordionItemButton"
                       id="accordion__heading-t1-Visite-d-information-et-de-prevention-pour-qui"
                       role="button"
                       tabindex="0"
                     >
                       <svg
-                        class="c42"
+                        class="c43"
                         fill="none"
                         height="24"
                         stroke="currentColor"
@@ -1877,7 +1884,7 @@ exports[`<FicheMT /> should render 1`] = `
                         />
                       </svg>
                       <h3
-                        class="c43 c44"
+                        class="c44 c45"
                       >
                         1) Visite d’information et de prévention : pour qui ?
                       </h3>
@@ -1886,13 +1893,13 @@ exports[`<FicheMT /> should render 1`] = `
                   <div
                     aria-hidden="true"
                     aria-labelledby="accordion__heading-t1-Visite-d-information-et-de-prevention-pour-qui"
-                    class="c45"
+                    class="c46"
                     data-accordion-component="AccordionItemPanel"
                     hidden=""
                     id="accordion__panel-t1-Visite-d-information-et-de-prevention-pour-qui"
                   >
                     <div
-                      class="c46"
+                      class="c47"
                     >
                       <p>
                         Depuis le 1er janvier 2017, la 
@@ -1949,32 +1956,32 @@ exports[`<FicheMT /> should render 1`] = `
           </div>
         </div>
         <div
-          class="c47"
+          class="c48"
         >
           <div
             class="c28"
           >
             <div
-              class="c48"
+              class="c49"
             >
               <h3
-                class="c49 c50"
+                class="c50 c51"
               >
                 <div
-                  class="c51"
+                  class="c52"
                 />
                 Avez-vous trouvé la réponse à votre question ?
               </h3>
               <p
-                class="c52"
+                class="c53"
               >
                 <button
-                  class="c53 c54 c55"
+                  class="c54 c55 c56"
                 >
                   Non
                 </button>
                 <button
-                  class="c53 c54 c55"
+                  class="c54 c55 c56"
                 >
                   Oui
                 </button>
@@ -1986,40 +1993,40 @@ exports[`<FicheMT /> should render 1`] = `
     </div>
   </main>
   <div
-    class="c56"
+    class="c57"
   >
     <footer
-      class="c57"
+      class="c58"
     >
       <div
-        class="c47 c58"
+        class="c48 c59"
       >
         <div
           class="c28"
         >
           <header
-            class="c59"
+            class="c60"
           >
             <h3
-              class="c60"
+              class="c61"
             >
               <div
-                class="c61"
+                class="c62"
               />
               Besoin de plus d’informations ?
             </h3>
           </header>
           <div
-            class="c62"
+            class="c63"
           >
             Les services du ministère du Travail en région informent, conseillent et orientent les salariés et les employeurs du secteur privé sur leurs questions en droit du travail.
           </div>
           <button
-            class="c63"
+            class="c64"
           >
             Contacter nos services en région
             <svg
-              class="c64"
+              class="c65"
               fill="none"
               viewBox="0 0 28 15"
             >
@@ -2032,68 +2039,68 @@ exports[`<FicheMT /> should render 1`] = `
         </div>
       </div>
       <div
-        class="c47 c65"
+        class="c48 c66"
       >
         <nav>
           <div
-            class="c66"
+            class="c67"
           >
             <div
-              class="c67 c68"
+              class="c68 c69"
             >
               <h3
-                class="c43 c69"
+                class="c44 c70"
               >
                 Code du travail numérique
               </h3>
               <ul
-                class="c70"
+                class="c71"
               >
                 <li
-                  class="c71"
+                  class="c72"
                 >
                   <a
-                    class="c72"
+                    class="c73"
                     href="/droit-du-travail"
                   >
                     Le droit du travail
                   </a>
                 </li>
                 <li
-                  class="c71"
+                  class="c72"
                 >
                   <a
-                    class="c72"
+                    class="c73"
                     href="/glossaire"
                   >
                     Glossaire
                   </a>
                 </li>
                 <li
-                  class="c71"
+                  class="c72"
                 >
                   <a
-                    class="c72"
+                    class="c73"
                     href="/a-propos"
                   >
                     À propos
                   </a>
                 </li>
                 <li
-                  class="c71"
+                  class="c72"
                 >
                   <a
-                    class="c72"
+                    class="c73"
                     href="/mentions-legales"
                   >
                     Mentions légales
                   </a>
                 </li>
                 <li
-                  class="c71"
+                  class="c72"
                 >
                   <a
-                    class="c72"
+                    class="c73"
                     href="mailto:codedutravailnumerique@travail.gouv.fr"
                   >
                     Contact
@@ -2102,21 +2109,21 @@ exports[`<FicheMT /> should render 1`] = `
               </ul>
             </div>
             <div
-              class="c67 c68"
+              class="c68 c69"
             >
               <h3
-                class="c43 c69"
+                class="c44 c70"
               >
                 Aidez-nous à améliorer cet outil
               </h3>
               <ul
-                class="c70"
+                class="c71"
               >
                 <li
-                  class="c71"
+                  class="c72"
                 >
                   <a
-                    class="c72"
+                    class="c73"
                     href="https://github.com/SocialGouv/code-du-travail-numerique/tree/vX.Y.Z"
                     rel="noopener noreferrer"
                     target="_blank"
@@ -2125,10 +2132,10 @@ exports[`<FicheMT /> should render 1`] = `
                   </a>
                 </li>
                 <li
-                  class="c71"
+                  class="c72"
                 >
                   <a
-                    class="c72"
+                    class="c73"
                     href="https://github.com/SocialGouv/code-du-travail-numerique/releases/tag/vX.Y.Z"
                     rel="noopener noreferrer"
                     target="_blank"
@@ -2139,21 +2146,21 @@ exports[`<FicheMT /> should render 1`] = `
               </ul>
             </div>
             <div
-              class="c67 c68"
+              class="c68 c69"
             >
               <h3
-                class="c43 c69"
+                class="c44 c70"
               >
                 En collaboration avec
               </h3>
               <ul
-                class="c70"
+                class="c71"
               >
                 <li
-                  class="c71"
+                  class="c72"
                 >
                   <a
-                    class="c72"
+                    class="c73"
                     href="https://travail-emploi.gouv.fr/ministere/organisation/article/dgt-direction-generale-du-travail"
                     rel="noopener noreferrer"
                     target="_blank"
@@ -2162,10 +2169,10 @@ exports[`<FicheMT /> should render 1`] = `
                   </a>
                 </li>
                 <li
-                  class="c71"
+                  class="c72"
                 >
                   <a
-                    class="c72"
+                    class="c73"
                     href="https://incubateur.social.gouv.fr/"
                     rel="noopener noreferrer"
                     target="_blank"
@@ -2174,10 +2181,10 @@ exports[`<FicheMT /> should render 1`] = `
                   </a>
                 </li>
                 <li
-                  class="c71"
+                  class="c72"
                 >
                   <a
-                    class="c72"
+                    class="c73"
                     href="https://beta.gouv.fr/"
                     rel="noopener noreferrer"
                     target="_blank"
@@ -2191,10 +2198,10 @@ exports[`<FicheMT /> should render 1`] = `
         </nav>
       </div>
       <div
-        class="c73"
+        class="c74"
       >
         <a
-          class="c74"
+          class="c75"
           href="https://travail-emploi.gouv.fr"
           rel="noopener noreferrer"
           target="_blank"
@@ -2203,12 +2210,12 @@ exports[`<FicheMT /> should render 1`] = `
         </a>
         <span
           aria-hidden="true"
-          class="c75"
+          class="c76"
         >
           |
         </span>
         <a
-          class="c74"
+          class="c75"
           href="https://www.service-public.fr"
           rel="noopener noreferrer"
           target="_blank"
@@ -2217,12 +2224,12 @@ exports[`<FicheMT /> should render 1`] = `
         </a>
         <span
           aria-hidden="true"
-          class="c75"
+          class="c76"
         >
           |
         </span>
         <a
-          class="c74"
+          class="c75"
           href="https://www.legifrance.gouv.fr"
           rel="noopener noreferrer"
           target="_blank"
@@ -2231,12 +2238,12 @@ exports[`<FicheMT /> should render 1`] = `
         </a>
         <span
           aria-hidden="true"
-          class="c75"
+          class="c76"
         >
           |
         </span>
         <a
-          class="c74"
+          class="c75"
           href="https://www.data.gouv.fr"
           rel="noopener noreferrer"
           target="_blank"
@@ -2245,12 +2252,12 @@ exports[`<FicheMT /> should render 1`] = `
         </a>
         <span
           aria-hidden="true"
-          class="c75"
+          class="c76"
         >
           |
         </span>
         <a
-          class="c74"
+          class="c75"
           href="https://www.gouvernement.fr"
           rel="noopener noreferrer"
           target="_blank"
@@ -2259,12 +2266,12 @@ exports[`<FicheMT /> should render 1`] = `
         </a>
         <span
           aria-hidden="true"
-          class="c75"
+          class="c76"
         >
           |
         </span>
         <a
-          class="c74"
+          class="c75"
           href="https://www.cnil.fr/"
           rel="noopener noreferrer"
           target="_blank"
diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/fiche-service-public.test.js.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/fiche-service-public.test.js.snap
index 929f1ab0a8..da3f2b7ce8 100644
--- a/packages/code-du-travail-frontend/__tests__/__snapshots__/fiche-service-public.test.js.snap
+++ b/packages/code-du-travail-frontend/__tests__/__snapshots__/fiche-service-public.test.js.snap
@@ -74,7 +74,7 @@ exports[`<FicheSP /> should render 1`] = `
   padding: 1rem 2rem;
   color: #3e486e;
   background-color: #f2f5fa;
-  border: 1px solid transparent;
+  border: 1px solid #f2f5fa;
   border-radius: 0.6rem;
 }
 
@@ -270,8 +270,8 @@ exports[`<FicheSP /> should render 1`] = `
 }
 
 .c35 {
-  margin: 0 auto 1rem;
   margin-bottom: 1.6rem;
+  margin-left: auto;
   text-align: center;
 }
 
@@ -850,6 +850,7 @@ exports[`<FicheSP /> should render 1`] = `
 @media (max-width:600px) {
   .c35 {
     margin-bottom: 1rem;
+    margin-left: auto;
   }
 }
 
diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/glossaire-[slug].test.js.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/glossaire-[slug].test.js.snap
index 3e12f74a4c..c1dfb07ae4 100644
--- a/packages/code-du-travail-frontend/__tests__/__snapshots__/glossaire-[slug].test.js.snap
+++ b/packages/code-du-travail-frontend/__tests__/__snapshots__/glossaire-[slug].test.js.snap
@@ -283,14 +283,14 @@ exports[`<Term /> should render 1`] = `
 }
 
 .c20 {
-  margin: 0 auto 1rem;
   margin-bottom: 4rem;
+  margin-left: auto;
   text-align: center;
 }
 
 .c31 {
-  margin: 0 auto 1rem;
   margin-bottom: 1.6rem;
+  margin-left: auto;
   text-align: center;
 }
 
@@ -790,18 +790,20 @@ exports[`<Term /> should render 1`] = `
 @media (max-width:600px) {
   .c20 {
     margin-bottom: 2.4rem;
+    margin-left: auto;
   }
 }
 
 @media (max-width:600px) {
   .c31 {
     margin-bottom: 1rem;
+    margin-left: auto;
   }
 }
 
 @media (max-width:600px) {
   .c21 {
-    font-size: 2.8rem;
+    font-size: 2.6rem;
   }
 }
 
diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/glossaire.test.js.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/glossaire.test.js.snap
index 96970bfb93..01fb3edb7f 100644
--- a/packages/code-du-travail-frontend/__tests__/__snapshots__/glossaire.test.js.snap
+++ b/packages/code-du-travail-frontend/__tests__/__snapshots__/glossaire.test.js.snap
@@ -225,20 +225,20 @@ exports[`<Glossaire /> should render 1`] = `
 }
 
 .c20 {
-  margin: 0 auto 1rem;
   margin-bottom: 4rem;
+  margin-left: auto;
   text-align: center;
 }
 
 .c26 {
-  margin: 0 auto 1rem;
+  margin-bottom: 1.6rem;
   margin-left: -4rem;
   text-align: left;
 }
 
 .c34 {
-  margin: 0 auto 1rem;
   margin-bottom: 1.6rem;
+  margin-left: auto;
   text-align: center;
 }
 
@@ -750,11 +750,13 @@ exports[`<Glossaire /> should render 1`] = `
 @media (max-width:600px) {
   .c20 {
     margin-bottom: 2.4rem;
+    margin-left: auto;
   }
 }
 
 @media (max-width:600px) {
   .c26 {
+    margin-bottom: 1rem;
     margin-left: -1rem;
   }
 }
@@ -762,6 +764,7 @@ exports[`<Glossaire /> should render 1`] = `
 @media (max-width:600px) {
   .c34 {
     margin-bottom: 1rem;
+    margin-left: auto;
   }
 }
 
@@ -773,7 +776,7 @@ exports[`<Glossaire /> should render 1`] = `
 
 @media (max-width:600px) {
   .c21 {
-    font-size: 2.8rem;
+    font-size: 2.6rem;
   }
 }
 
diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/index.test.js.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/index.test.js.snap
index 8599163c7d..79255960df 100644
--- a/packages/code-du-travail-frontend/__tests__/__snapshots__/index.test.js.snap
+++ b/packages/code-du-travail-frontend/__tests__/__snapshots__/index.test.js.snap
@@ -169,6 +169,7 @@ exports[`<Home /> should render 1`] = `
   font-weight: 600;
   font-size: 1.6rem;
   line-height: 1.625;
+  vertical-align: baseline;
   text-align: left;
   background: none;
   border: none;
@@ -419,14 +420,14 @@ exports[`<Home /> should render 1`] = `
 }
 
 .c30 {
-  margin: 0 auto 1rem;
   margin-bottom: 4rem;
+  margin-left: auto;
   text-align: center;
 }
 
 .c57 {
-  margin: 0 auto 1rem;
   margin-bottom: 1.6rem;
+  margin-left: auto;
   text-align: center;
 }
 
@@ -1090,12 +1091,14 @@ exports[`<Home /> should render 1`] = `
 @media (max-width:600px) {
   .c30 {
     margin-bottom: 2.4rem;
+    margin-left: auto;
   }
 }
 
 @media (max-width:600px) {
   .c57 {
     margin-bottom: 1rem;
+    margin-left: auto;
   }
 }
 
@@ -1107,7 +1110,7 @@ exports[`<Home /> should render 1`] = `
 
 @media (max-width:600px) {
   .c31 {
-    font-size: 2.8rem;
+    font-size: 2.6rem;
   }
 }
 
diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/mentions-legales.test.js.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/mentions-legales.test.js.snap
index 17a9b74943..e6363786e9 100644
--- a/packages/code-du-travail-frontend/__tests__/__snapshots__/mentions-legales.test.js.snap
+++ b/packages/code-du-travail-frontend/__tests__/__snapshots__/mentions-legales.test.js.snap
@@ -180,7 +180,7 @@ exports[`<MentionLegales /> should render 1`] = `
   padding: 1rem 2rem;
   color: #3e486e;
   background-color: #f2f5fa;
-  border: 1px solid transparent;
+  border: 1px solid #f2f5fa;
   border-radius: 0.6rem;
 }
 
@@ -315,19 +315,20 @@ exports[`<MentionLegales /> should render 1`] = `
 }
 
 .c20 {
-  margin: 0 auto 1rem;
   margin-bottom: 4rem;
+  margin-left: auto;
   text-align: center;
 }
 
 .c25 {
-  margin: 0 auto 1rem;
+  margin-bottom: 1.6rem;
+  margin-left: auto;
   text-align: left;
 }
 
 .c41 {
-  margin: 0 auto 1rem;
   margin-bottom: 1.6rem;
+  margin-left: auto;
   text-align: center;
 }
 
@@ -837,18 +838,27 @@ exports[`<MentionLegales /> should render 1`] = `
 @media (max-width:600px) {
   .c20 {
     margin-bottom: 2.4rem;
+    margin-left: auto;
+  }
+}
+
+@media (max-width:600px) {
+  .c25 {
+    margin-bottom: 1rem;
+    margin-left: auto;
   }
 }
 
 @media (max-width:600px) {
   .c41 {
     margin-bottom: 1rem;
+    margin-left: auto;
   }
 }
 
 @media (max-width:600px) {
   .c21 {
-    font-size: 2.8rem;
+    font-size: 2.6rem;
   }
 }
 
diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/modeles-de-courriers.test.js.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/modeles-de-courriers.test.js.snap
index ca788864c0..3ceb77abdc 100644
--- a/packages/code-du-travail-frontend/__tests__/__snapshots__/modeles-de-courriers.test.js.snap
+++ b/packages/code-du-travail-frontend/__tests__/__snapshots__/modeles-de-courriers.test.js.snap
@@ -15,7 +15,7 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
   margin-bottom: 0;
 }
 
-.c27 {
+.c28 {
   padding: 3.2rem 0;
   background-color: transparent;
   color: #3e486e;
@@ -51,7 +51,7 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
   margin-bottom: 0;
 }
 
-.c28 {
+.c29 {
   padding: 2rem 2.4rem;
   color: #3e486e;
   border-radius: 0.6rem;
@@ -59,15 +59,15 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
   background-color: #fff;
 }
 
-.c28 > *:first-child {
+.c29 > *:first-child {
   margin-top: 0;
 }
 
-.c28 > *:last-child {
+.c29 > *:last-child {
   margin-bottom: 0;
 }
 
-.c24 {
+.c25 {
   position: absolute;
   background-color: #7994d4;
   border-radius: 0.6rem;
@@ -80,7 +80,7 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
   transform: translateY(-50%);
 }
 
-.c40 {
+.c41 {
   position: absolute;
   background-color: #f66663;
   border-radius: none;
@@ -93,7 +93,7 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
   transform: translateY(-50%);
 }
 
-.c50 {
+.c51 {
   position: absolute;
   background-color: #7994d4;
   border-radius: 0.6rem;
@@ -106,7 +106,7 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
   transform: translateX(-50%);
 }
 
-.c29 {
+.c30 {
   position: relative;
   margin: 0 0 1rem 0;
   color: #2f3b6c;
@@ -116,7 +116,7 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
   line-height: 1.25;
 }
 
-.c38 {
+.c39 {
   position: relative;
   margin: 0 0 1rem 0;
   color: #2f3b6c;
@@ -128,20 +128,20 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
   padding-left: 2.4rem;
 }
 
-.c30 {
+.c31 {
   margin-bottom: 1.6rem;
   padding: 1rem 2rem;
   color: #3e486e;
   background-color: #f2f5fa;
-  border: 1px solid transparent;
+  border: 1px solid #f2f5fa;
   border-radius: 0.6rem;
 }
 
-.c30 > *:first-child {
+.c31 > *:first-child {
   margin-top: 0;
 }
 
-.c30 > *:last-child {
+.c31 > *:last-child {
   margin-bottom: 0;
 }
 
@@ -206,7 +206,7 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
   cursor: not-allowed;
 }
 
-.c42 {
+.c43 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -243,16 +243,16 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
   opacity: 1;
 }
 
-.c42:link,
-.c42:visited {
+.c43:link,
+.c43:visited {
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #3e486e;
 }
 
-.c42:not([disabled]):hover,
-.c42:not([disabled]):active,
-.c42:not([disabled]):focus {
+.c43:not([disabled]):hover,
+.c43:not([disabled]):active,
+.c43:not([disabled]):focus {
   opacity: 1;
   -webkit-transform: translateY(-2px);
   -ms-transform: translateY(-2px);
@@ -261,13 +261,13 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
   border-color: #dee5ef;
 }
 
-.c42[disabled] {
+.c43[disabled] {
   color: rgba(62,72,110,0.4);
   box-shadow: none;
   cursor: not-allowed;
 }
 
-.c52 {
+.c53 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -304,16 +304,16 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
   opacity: 1;
 }
 
-.c52:link,
-.c52:visited {
+.c53:link,
+.c53:visited {
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #fff;
 }
 
-.c52:not([disabled]):hover,
-.c52:not([disabled]):active,
-.c52:not([disabled]):focus {
+.c53:not([disabled]):hover,
+.c53:not([disabled]):active,
+.c53:not([disabled]):focus {
   opacity: 1;
   -webkit-transform: translateY(-2px);
   -ms-transform: translateY(-2px);
@@ -322,13 +322,13 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
   border-color: #a0b3e0;
 }
 
-.c52[disabled] {
+.c53[disabled] {
   color: rgba(255,255,255,0.4);
   box-shadow: none;
   cursor: not-allowed;
 }
 
-.c31 {
+.c32 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -369,9 +369,9 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
   appearance: none;
 }
 
-.c31:hover,
-.c31:active,
-.c31:focus {
+.c32:hover,
+.c32:active,
+.c32:focus {
   color: #3e486e;
   box-shadow: 0 1rem 2rem rgba(121,148,212,0.4);
   -webkit-transform: translateY(-2px);
@@ -379,21 +379,21 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
   transform: translateY(-2px);
 }
 
-.c32 {
+.c33 {
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
 }
 
-.c33 {
+.c34 {
   padding-right: 1rem;
 }
 
-.c34 {
+.c35 {
   margin: 0;
 }
 
-.c35 {
+.c36 {
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
@@ -401,18 +401,18 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
 }
 
 .c22 {
-  margin: 0 auto 1rem;
+  margin-bottom: 4rem;
   margin-left: -4rem;
   text-align: left;
 }
 
-.c48 {
-  margin: 0 auto 1rem;
+.c49 {
   margin-bottom: 1.6rem;
+  margin-left: auto;
   text-align: center;
 }
 
-.c23 {
+.c24 {
   position: relative;
   margin: 0;
   color: #2f3b6c;
@@ -423,7 +423,7 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
   padding-left: 4rem;
 }
 
-.c49 {
+.c50 {
   position: relative;
   margin: 0;
   color: #2f3b6c;
@@ -435,11 +435,11 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
   text-align: center;
 }
 
-.c36 {
+.c37 {
   font-size: 1.2rem;
 }
 
-.c25 {
+.c26 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -447,11 +447,15 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
   font-size: 1.4rem;
 }
 
-.c26 {
+.c23 {
+  margin-bottom: 0;
+}
+
+.c27 {
   margin: 3.2rem 0 0 0;
 }
 
-.c37 {
+.c38 {
   padding: 2rem 2.4rem;
   color: #3e486e;
   border-radius: 0.6rem;
@@ -474,15 +478,15 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
   justify-content: stretch;
 }
 
-.c37 > *:first-child {
+.c38 > *:first-child {
   margin-top: 0;
 }
 
-.c37 > *:last-child {
+.c38 > *:last-child {
   margin-bottom: 0;
 }
 
-.c39 {
+.c40 {
   -webkit-flex: 0 1 auto;
   -ms-flex: 0 1 auto;
   flex: 0 1 auto;
@@ -491,7 +495,7 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
   padding-bottom: 1rem;
 }
 
-.c41 {
+.c42 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -506,7 +510,7 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
   margin: 0;
 }
 
-.c44 + .c43 {
+.c45 + .c44 {
   margin-left: 4rem;
 }
 
@@ -771,12 +775,12 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
   margin-left: 1.6rem;
 }
 
-.c45 {
+.c46 {
   width: 100%;
   overflow-x: hidden;
 }
 
-.c46 {
+.c47 {
   position: relative;
   z-index: 1;
   margin-top: 4rem;
@@ -784,7 +788,7 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
   background-color: #f2f5fa;
 }
 
-.c46:before {
+.c47:before {
   position: absolute;
   top: -27px;
   left: -50%;
@@ -796,13 +800,13 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
   content: "";
 }
 
-.c47 {
+.c48 {
   position: relative;
   padding-bottom: 4rem;
   text-align: center;
 }
 
-.c51 {
+.c52 {
   max-width: 124rem;
   margin: 0 auto;
   padding: 0 2rem;
@@ -811,25 +815,25 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
   margin-bottom: 2rem;
 }
 
-.c51 > *:first-child {
+.c52 > *:first-child {
   margin-top: 0;
 }
 
-.c51 > *:last-child {
+.c52 > *:last-child {
   margin-bottom: 0;
 }
 
-.c53 {
+.c54 {
   width: 1.5em;
   margin-left: 1.6rem;
 }
 
-.c54 {
+.c55 {
   padding: 4rem 0;
   background-color: #e4e8ef;
 }
 
-.c55 {
+.c56 {
   max-width: 124rem;
   margin: 0 auto;
   padding: 0 2rem;
@@ -843,39 +847,39 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
   justify-content: space-between;
 }
 
-.c55 > *:first-child {
+.c56 > *:first-child {
   margin-top: 0;
 }
 
-.c55 > *:last-child {
+.c56 > *:last-child {
   margin-bottom: 0;
 }
 
-.c57 + .c56 {
+.c58 + .c57 {
   padding-left: 1.6rem;
 }
 
-.c59 {
+.c60 {
   margin: 0;
   padding: 0;
   list-style-type: none;
 }
 
-.c58 {
+.c59 {
   font-size: 1.6rem;
 }
 
-.c60 {
+.c61 {
   margin: 0.4rem 0;
 }
 
-.c61 {
+.c62 {
   font-weight: normal;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c62 {
+.c63 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -894,14 +898,14 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
   background-color: #e4e8ef;
 }
 
-.c63 {
+.c64 {
   font-weight: normal;
   -webkit-text-decoration: none;
   text-decoration: none;
   margin: 0 1rem 1rem 1rem;
 }
 
-.c64 {
+.c65 {
   margin-bottom: 1rem;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -959,33 +963,33 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
 }
 
 @media (max-width:600px) {
-  .c28 {
+  .c29 {
     padding: 1.6rem 1rem;
   }
 }
 
 @media print {
-  .c28 {
+  .c29 {
     padding: 0 5pt;
     border: none;
   }
 }
 
 @media (max-width:600px) {
-  .c29 {
+  .c30 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c38 {
+  .c39 {
     margin-left: -1rem;
     padding-left: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c38 {
+  .c39 {
     font-size: 1.6rem;
   }
 }
@@ -997,31 +1001,31 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
 }
 
 @media (max-width:600px) {
-  .c42 {
+  .c43 {
     font-size: 1.4rem;
   }
 }
 
 @media (max-width:600px) {
-  .c42 {
+  .c43 {
     padding: 0 3rem;
   }
 }
 
 @media (max-width:600px) {
-  .c52 {
+  .c53 {
     font-size: 1.4rem;
   }
 }
 
 @media (max-width:600px) {
-  .c52 {
+  .c53 {
     padding: 0 3rem;
   }
 }
 
 @media (max-width:600px) {
-  .c31 {
+  .c32 {
     padding: 1.6rem 1.6rem;
     font-size: 1.4rem;
   }
@@ -1029,36 +1033,38 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
 
 @media (max-width:600px) {
   .c22 {
+    margin-bottom: 2.4rem;
     margin-left: -1rem;
   }
 }
 
 @media (max-width:600px) {
-  .c48 {
+  .c49 {
     margin-bottom: 1rem;
+    margin-left: auto;
   }
 }
 
 @media (max-width:600px) {
-  .c23 {
+  .c24 {
     padding-left: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c23 {
-    font-size: 2.8rem;
+  .c24 {
+    font-size: 2.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c49 {
+  .c50 {
     font-size: 2.2rem;
   }
 }
 
 @media (max-width:600px) {
-  .c25 {
+  .c26 {
     -webkit-flex-flow: column;
     -ms-flex-flow: column;
     flex-flow: column;
@@ -1070,26 +1076,26 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
 }
 
 @media (max-width:600px) {
-  .c26 {
+  .c27 {
     margin-top: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c37 {
+  .c38 {
     padding: 1.6rem 1rem;
   }
 }
 
 @media print {
-  .c37 {
+  .c38 {
     padding: 0 5pt;
     border: none;
   }
 }
 
 @media (max-width:1180px) {
-  .c37 {
+  .c38 {
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
@@ -1104,20 +1110,20 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
 }
 
 @media (max-width:1180px) {
-  .c39 {
+  .c40 {
     margin-bottom: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c39 {
+  .c40 {
     padding-top: 0;
     padding-bottom: 0;
   }
 }
 
 @media (max-width:1180px) {
-  .c41 {
+  .c42 {
     -webkit-box-pack: space-around;
     -webkit-justify-content: space-around;
     -ms-flex-pack: space-around;
@@ -1126,7 +1132,7 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
 }
 
 @media (max-width:1180px) {
-  .c44 + .c43 {
+  .c45 + .c44 {
     margin-left: 0;
   }
 }
@@ -1282,39 +1288,39 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
 }
 
 @media print {
-  .c46 {
+  .c47 {
     display: none;
   }
 }
 
 @media (max-width:600px) {
-  .c51 {
+  .c52 {
     padding: 0;
   }
 }
 
 @media print {
-  .c51 {
+  .c52 {
     max-width: 100%;
     padding: 0;
   }
 }
 
 @media (max-width:600px) {
-  .c55 {
+  .c56 {
     padding: 0 1rem;
   }
 }
 
 @media print {
-  .c55 {
+  .c56 {
     max-width: 100%;
     padding: 0;
   }
 }
 
 @media (max-width:600px) {
-  .c55 {
+  .c56 {
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
@@ -1322,26 +1328,26 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
 }
 
 @media (max-width:600px) {
-  .c57 + .c56 {
+  .c58 + .c57 {
     padding-left: 0;
   }
 }
 
 @media (max-width:600px) {
-  .c59 {
+  .c60 {
     text-align: center;
   }
 }
 
 @media (max-width:600px) {
-  .c58 {
+  .c59 {
     margin-top: 1rem;
     text-align: center;
   }
 }
 
 @media (max-width:980px) {
-  .c64 {
+  .c65 {
     display: none;
   }
 }
@@ -1557,66 +1563,66 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
             data-main-content="true"
           >
             <header
-              class="c22"
+              class="c22 c23"
             >
               <h1
-                class="c23"
+                class="c24"
               >
                 <div
-                  class="c24"
+                  class="c25"
                 />
                 Modèle : undefined
               </h1>
             </header>
             <div
-              class="c25"
+              class="c26"
             />
             <div
-              class="c26"
+              class="c27"
             >
               
               <div
-                class="c27"
+                class="c28"
               >
                 <div
-                  class="c28"
+                  class="c29"
                 >
                   <div />
                 </div>
               </div>
               <h4
-                class="c29"
+                class="c30"
               >
                 Télécharger le modèle
               </h4>
               <div
-                class="c30"
+                class="c31"
               >
                 Attention, chaque modèle de document proposé est à personnaliser selon votre situation et est susceptible d’évoluer suite à des changements de règlementation. Assurez-vous d’avoir la dernière version mise à jour avant toute utilisation.
               </div>
               <a
-                class="c31 no-after"
+                class="c32 no-after"
                 href="api.url/docs/undefined"
               >
                 <div
-                  class="c32"
+                  class="c33"
                 >
                   <div
-                    class="c33"
+                    class="c34"
                   >
                     
                     <h3
-                      class="c29 c34"
+                      class="c30 c35"
                     >
                       modele
                     </h3>
                   </div>
                 </div>
                 <div
-                  class="c35"
+                  class="c36"
                 >
                   <span
-                    class="c36"
+                    class="c37"
                   >
                     Modèle de document
                   </span>
@@ -1626,32 +1632,32 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
           </div>
         </div>
         <div
-          class="c27"
+          class="c28"
         >
           <div
             class="c20"
           >
             <div
-              class="c37"
+              class="c38"
             >
               <h3
-                class="c38 c39"
+                class="c39 c40"
               >
                 <div
-                  class="c40"
+                  class="c41"
                 />
                 Avez-vous trouvé la réponse à votre question ?
               </h3>
               <p
-                class="c41"
+                class="c42"
               >
                 <button
-                  class="c42 c43 c44"
+                  class="c43 c44 c45"
                 >
                   Non
                 </button>
                 <button
-                  class="c42 c43 c44"
+                  class="c43 c44 c45"
                 >
                   Oui
                 </button>
@@ -1663,40 +1669,40 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
     </div>
   </main>
   <div
-    class="c45"
+    class="c46"
   >
     <footer
-      class="c46"
+      class="c47"
     >
       <div
-        class="c27 c47"
+        class="c28 c48"
       >
         <div
           class="c20"
         >
           <header
-            class="c48"
+            class="c49"
           >
             <h3
-              class="c49"
+              class="c50"
             >
               <div
-                class="c50"
+                class="c51"
               />
               Besoin de plus d’informations ?
             </h3>
           </header>
           <div
-            class="c51"
+            class="c52"
           >
             Les services du ministère du Travail en région informent, conseillent et orientent les salariés et les employeurs du secteur privé sur leurs questions en droit du travail.
           </div>
           <button
-            class="c52"
+            class="c53"
           >
             Contacter nos services en région
             <svg
-              class="c53"
+              class="c54"
               fill="none"
               viewBox="0 0 28 15"
             >
@@ -1709,68 +1715,68 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
         </div>
       </div>
       <div
-        class="c27 c54"
+        class="c28 c55"
       >
         <nav>
           <div
-            class="c55"
+            class="c56"
           >
             <div
-              class="c56 c57"
+              class="c57 c58"
             >
               <h3
-                class="c29 c58"
+                class="c30 c59"
               >
                 Code du travail numérique
               </h3>
               <ul
-                class="c59"
+                class="c60"
               >
                 <li
-                  class="c60"
+                  class="c61"
                 >
                   <a
-                    class="c61"
+                    class="c62"
                     href="/droit-du-travail"
                   >
                     Le droit du travail
                   </a>
                 </li>
                 <li
-                  class="c60"
+                  class="c61"
                 >
                   <a
-                    class="c61"
+                    class="c62"
                     href="/glossaire"
                   >
                     Glossaire
                   </a>
                 </li>
                 <li
-                  class="c60"
+                  class="c61"
                 >
                   <a
-                    class="c61"
+                    class="c62"
                     href="/a-propos"
                   >
                     À propos
                   </a>
                 </li>
                 <li
-                  class="c60"
+                  class="c61"
                 >
                   <a
-                    class="c61"
+                    class="c62"
                     href="/mentions-legales"
                   >
                     Mentions légales
                   </a>
                 </li>
                 <li
-                  class="c60"
+                  class="c61"
                 >
                   <a
-                    class="c61"
+                    class="c62"
                     href="mailto:codedutravailnumerique@travail.gouv.fr"
                   >
                     Contact
@@ -1779,21 +1785,21 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
               </ul>
             </div>
             <div
-              class="c56 c57"
+              class="c57 c58"
             >
               <h3
-                class="c29 c58"
+                class="c30 c59"
               >
                 Aidez-nous à améliorer cet outil
               </h3>
               <ul
-                class="c59"
+                class="c60"
               >
                 <li
-                  class="c60"
+                  class="c61"
                 >
                   <a
-                    class="c61"
+                    class="c62"
                     href="https://github.com/SocialGouv/code-du-travail-numerique/tree/vX.Y.Z"
                     rel="noopener noreferrer"
                     target="_blank"
@@ -1802,10 +1808,10 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
                   </a>
                 </li>
                 <li
-                  class="c60"
+                  class="c61"
                 >
                   <a
-                    class="c61"
+                    class="c62"
                     href="https://github.com/SocialGouv/code-du-travail-numerique/releases/tag/vX.Y.Z"
                     rel="noopener noreferrer"
                     target="_blank"
@@ -1816,21 +1822,21 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
               </ul>
             </div>
             <div
-              class="c56 c57"
+              class="c57 c58"
             >
               <h3
-                class="c29 c58"
+                class="c30 c59"
               >
                 En collaboration avec
               </h3>
               <ul
-                class="c59"
+                class="c60"
               >
                 <li
-                  class="c60"
+                  class="c61"
                 >
                   <a
-                    class="c61"
+                    class="c62"
                     href="https://travail-emploi.gouv.fr/ministere/organisation/article/dgt-direction-generale-du-travail"
                     rel="noopener noreferrer"
                     target="_blank"
@@ -1839,10 +1845,10 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
                   </a>
                 </li>
                 <li
-                  class="c60"
+                  class="c61"
                 >
                   <a
-                    class="c61"
+                    class="c62"
                     href="https://incubateur.social.gouv.fr/"
                     rel="noopener noreferrer"
                     target="_blank"
@@ -1851,10 +1857,10 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
                   </a>
                 </li>
                 <li
-                  class="c60"
+                  class="c61"
                 >
                   <a
-                    class="c61"
+                    class="c62"
                     href="https://beta.gouv.fr/"
                     rel="noopener noreferrer"
                     target="_blank"
@@ -1868,10 +1874,10 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
         </nav>
       </div>
       <div
-        class="c62"
+        class="c63"
       >
         <a
-          class="c63"
+          class="c64"
           href="https://travail-emploi.gouv.fr"
           rel="noopener noreferrer"
           target="_blank"
@@ -1880,12 +1886,12 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
         </a>
         <span
           aria-hidden="true"
-          class="c64"
+          class="c65"
         >
           |
         </span>
         <a
-          class="c63"
+          class="c64"
           href="https://www.service-public.fr"
           rel="noopener noreferrer"
           target="_blank"
@@ -1894,12 +1900,12 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
         </a>
         <span
           aria-hidden="true"
-          class="c64"
+          class="c65"
         >
           |
         </span>
         <a
-          class="c63"
+          class="c64"
           href="https://www.legifrance.gouv.fr"
           rel="noopener noreferrer"
           target="_blank"
@@ -1908,12 +1914,12 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
         </a>
         <span
           aria-hidden="true"
-          class="c64"
+          class="c65"
         >
           |
         </span>
         <a
-          class="c63"
+          class="c64"
           href="https://www.data.gouv.fr"
           rel="noopener noreferrer"
           target="_blank"
@@ -1922,12 +1928,12 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
         </a>
         <span
           aria-hidden="true"
-          class="c64"
+          class="c65"
         >
           |
         </span>
         <a
-          class="c63"
+          class="c64"
           href="https://www.gouvernement.fr"
           rel="noopener noreferrer"
           target="_blank"
@@ -1936,12 +1942,12 @@ exports[`<ModelesDeCourriers /> should render 1`] = `
         </a>
         <span
           aria-hidden="true"
-          class="c64"
+          class="c65"
         >
           |
         </span>
         <a
-          class="c63"
+          class="c64"
           href="https://www.cnil.fr/"
           rel="noopener noreferrer"
           target="_blank"
diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/outils.test.js.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/outils.test.js.snap
index 680896a127..70fdac6805 100644
--- a/packages/code-du-travail-frontend/__tests__/__snapshots__/outils.test.js.snap
+++ b/packages/code-du-travail-frontend/__tests__/__snapshots__/outils.test.js.snap
@@ -169,6 +169,7 @@ exports[`<Outils /> should render 1`] = `
   font-weight: 600;
   font-size: 1.6rem;
   line-height: 1.625;
+  vertical-align: baseline;
   text-align: left;
   background: none;
   border: none;
@@ -419,14 +420,14 @@ exports[`<Outils /> should render 1`] = `
 }
 
 .c22 {
-  margin: 0 auto 1rem;
   margin-bottom: 4rem;
+  margin-left: auto;
   text-align: center;
 }
 
 .c46 {
-  margin: 0 auto 1rem;
   margin-bottom: 1.6rem;
+  margin-left: auto;
   text-align: center;
 }
 
@@ -1020,18 +1021,20 @@ exports[`<Outils /> should render 1`] = `
 @media (max-width:600px) {
   .c22 {
     margin-bottom: 2.4rem;
+    margin-left: auto;
   }
 }
 
 @media (max-width:600px) {
   .c46 {
     margin-bottom: 1rem;
+    margin-left: auto;
   }
 }
 
 @media (max-width:600px) {
   .c23 {
-    font-size: 2.8rem;
+    font-size: 2.6rem;
   }
 }
 
diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/recherche.test.js.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/recherche.test.js.snap
index ba4ffd5fd9..7fa6b530e8 100644
--- a/packages/code-du-travail-frontend/__tests__/__snapshots__/recherche.test.js.snap
+++ b/packages/code-du-travail-frontend/__tests__/__snapshots__/recherche.test.js.snap
@@ -182,14 +182,14 @@ exports[`<Recherche /> should render 1`] = `
 }
 
 .c11 {
-  margin: 0 auto 1rem;
   margin-bottom: 4rem;
+  margin-left: auto;
   text-align: center;
 }
 
 .c27 {
-  margin: 0 auto 1rem;
   margin-bottom: 1.6rem;
+  margin-left: auto;
   text-align: center;
 }
 
@@ -645,18 +645,20 @@ exports[`<Recherche /> should render 1`] = `
 @media (max-width:600px) {
   .c11 {
     margin-bottom: 2.4rem;
+    margin-left: auto;
   }
 }
 
 @media (max-width:600px) {
   .c27 {
     margin-bottom: 1rem;
+    margin-left: auto;
   }
 }
 
 @media (max-width:600px) {
   .c12 {
-    font-size: 2.8rem;
+    font-size: 2.6rem;
   }
 }
 
diff --git a/packages/code-du-travail-frontend/__tests__/__snapshots__/themes.test.js.snap b/packages/code-du-travail-frontend/__tests__/__snapshots__/themes.test.js.snap
index 9943de7856..2699afcb60 100644
--- a/packages/code-du-travail-frontend/__tests__/__snapshots__/themes.test.js.snap
+++ b/packages/code-du-travail-frontend/__tests__/__snapshots__/themes.test.js.snap
@@ -167,14 +167,14 @@ exports[`<Theme /> should render 1`] = `
 }
 
 .c20 {
-  margin: 0 auto 1rem;
   margin-bottom: 4rem;
+  margin-left: auto;
   text-align: center;
 }
 
 .c26 {
-  margin: 0 auto 1rem;
   margin-bottom: 1.6rem;
+  margin-left: auto;
   text-align: center;
 }
 
@@ -629,18 +629,20 @@ exports[`<Theme /> should render 1`] = `
 @media (max-width:600px) {
   .c20 {
     margin-bottom: 2.4rem;
+    margin-left: auto;
   }
 }
 
 @media (max-width:600px) {
   .c26 {
     margin-bottom: 1rem;
+    margin-left: auto;
   }
 }
 
 @media (max-width:600px) {
   .c21 {
-    font-size: 2.8rem;
+    font-size: 2.6rem;
   }
 }
 
diff --git a/packages/code-du-travail-frontend/src/common/Article.js b/packages/code-du-travail-frontend/src/common/Article.js
index 7cb828d0f3..fdcbe2ea7e 100644
--- a/packages/code-du-travail-frontend/src/common/Article.js
+++ b/packages/code-du-travail-frontend/src/common/Article.js
@@ -15,9 +15,9 @@ const Article = ({ subtitle, title, source, date, children }) => {
     <Container>
       <Wrapper variant="main" data-main-content>
         {subtitle && <Subtitle>{subtitle}</Subtitle>}
-        <PageTitle leftStripped shift={theme.spacings.larger}>
+        <StyledPageTitle leftStripped shift={theme.spacings.larger}>
           {title}
-        </PageTitle>
+        </StyledPageTitle>
         <Meta>
           {source && source.url && (
             <Source>
@@ -72,6 +72,10 @@ const Source = styled.span`
   margin-right: ${spacings.small};
 `;
 
+const StyledPageTitle = styled(PageTitle)`
+  margin-bottom: 0;
+`;
+
 const Content = styled.div`
   margin: ${spacings.large} 0 0 0;
   @media (max-width: ${breakpoints.mobile}) {
diff --git a/packages/code-du-travail-frontend/src/common/Feedback/__tests__/__snapshots__/Feedback.test.js.snap b/packages/code-du-travail-frontend/src/common/Feedback/__tests__/__snapshots__/Feedback.test.js.snap
index b556d05009..e65fc4b9be 100644
--- a/packages/code-du-travail-frontend/src/common/Feedback/__tests__/__snapshots__/Feedback.test.js.snap
+++ b/packages/code-du-travail-frontend/src/common/Feedback/__tests__/__snapshots__/Feedback.test.js.snap
@@ -377,6 +377,7 @@ exports[`<Feedback/> should render form once user answer no 1`] = `
   font-weight: 600;
   font-size: 1.6rem;
   line-height: 1.625;
+  vertical-align: baseline;
   text-align: left;
   background: none;
   border: none;
@@ -552,7 +553,7 @@ exports[`<Feedback/> should render form once user answer no 1`] = `
         <p
           class="c6"
         >
-          Pour obtenir une réponse à votre question de droit du travail, nous vous invitons à joindre les
+          Merci pour votre réponse. Pour obtenir une réponse à votre question de droit du travail, nous vous invitons à joindre les
            
           <button
             class="c7 c8"
diff --git a/packages/code-du-travail-frontend/src/common/Feedback/index.js b/packages/code-du-travail-frontend/src/common/Feedback/index.js
index b588cd5a40..61388f18e9 100644
--- a/packages/code-du-travail-frontend/src/common/Feedback/index.js
+++ b/packages/code-du-travail-frontend/src/common/Feedback/index.js
@@ -32,7 +32,11 @@ function Feedback({
     <Section>
       <Container>
         <StyledWrapper variant="light">
-          <StyledHeading stripped shift={theme.spacings.xmedium}>
+          <StyledHeading
+            variant="primary"
+            stripped
+            shift={theme.spacings.xmedium}
+          >
             Avez-vous trouvé la réponse à votre question&nbsp;?
           </StyledHeading>
           {isSatisfied === null && (
@@ -56,8 +60,8 @@ function Feedback({
           )}
           {isSatisfied === false && (
             <FullWidthParagraph>
-              Pour obtenir une réponse à votre question de droit du travail,
-              nous vous invitons à joindre les{" "}
+              Merci pour votre réponse. Pour obtenir une réponse à votre
+              question de droit du travail, nous vous invitons à joindre les{" "}
               <ServiceRenseignementModal>
                 {openModal => (
                   <Button variant="link" onClick={openModal}>
diff --git a/packages/code-du-travail-frontend/src/common/__tests__/__snapshots__/AccessibilityModal.test.js.snap b/packages/code-du-travail-frontend/src/common/__tests__/__snapshots__/AccessibilityModal.test.js.snap
index 4059acb75d..38db1cfe0a 100644
--- a/packages/code-du-travail-frontend/src/common/__tests__/__snapshots__/AccessibilityModal.test.js.snap
+++ b/packages/code-du-travail-frontend/src/common/__tests__/__snapshots__/AccessibilityModal.test.js.snap
@@ -239,8 +239,8 @@ exports[`<AccessibilityModal /> renders a popup when click on button 1`] = `
 }
 
 .c3 {
-  margin: 0 auto 1rem;
   margin-bottom: 1.6rem;
+  margin-left: auto;
   text-align: center;
 }
 
@@ -311,6 +311,7 @@ exports[`<AccessibilityModal /> renders a popup when click on button 1`] = `
 @media (max-width:600px) {
   .c3 {
     margin-bottom: 1rem;
+    margin-left: auto;
   }
 }
 
diff --git a/packages/code-du-travail-frontend/src/common/__tests__/__snapshots__/Answer.test.js.snap b/packages/code-du-travail-frontend/src/common/__tests__/__snapshots__/Answer.test.js.snap
index 21cbd5795e..3bd1910c32 100644
--- a/packages/code-du-travail-frontend/src/common/__tests__/__snapshots__/Answer.test.js.snap
+++ b/packages/code-du-travail-frontend/src/common/__tests__/__snapshots__/Answer.test.js.snap
@@ -15,7 +15,7 @@ exports[`<Answer /> should renders 1`] = `
   margin-bottom: 0;
 }
 
-.c10 {
+.c11 {
   padding: 3.2rem 0;
   background-color: transparent;
   color: #3e486e;
@@ -51,7 +51,7 @@ exports[`<Answer /> should renders 1`] = `
   margin-bottom: 0;
 }
 
-.c6 {
+.c7 {
   position: absolute;
   background-color: #7994d4;
   border-radius: 0.6rem;
@@ -64,7 +64,7 @@ exports[`<Answer /> should renders 1`] = `
   transform: translateY(-50%);
 }
 
-.c14 {
+.c15 {
   position: absolute;
   background-color: #f66663;
   border-radius: none;
@@ -77,7 +77,7 @@ exports[`<Answer /> should renders 1`] = `
   transform: translateY(-50%);
 }
 
-.c12 {
+.c13 {
   position: relative;
   margin: 0 0 1rem 0;
   color: #2f3b6c;
@@ -89,7 +89,7 @@ exports[`<Answer /> should renders 1`] = `
   padding-left: 2.4rem;
 }
 
-.c16 {
+.c17 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -126,16 +126,16 @@ exports[`<Answer /> should renders 1`] = `
   opacity: 1;
 }
 
-.c16:link,
-.c16:visited {
+.c17:link,
+.c17:visited {
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #3e486e;
 }
 
-.c16:not([disabled]):hover,
-.c16:not([disabled]):active,
-.c16:not([disabled]):focus {
+.c17:not([disabled]):hover,
+.c17:not([disabled]):active,
+.c17:not([disabled]):focus {
   opacity: 1;
   -webkit-transform: translateY(-2px);
   -ms-transform: translateY(-2px);
@@ -144,19 +144,19 @@ exports[`<Answer /> should renders 1`] = `
   border-color: #dee5ef;
 }
 
-.c16[disabled] {
+.c17[disabled] {
   color: rgba(62,72,110,0.4);
   box-shadow: none;
   cursor: not-allowed;
 }
 
 .c4 {
-  margin: 0 auto 1rem;
+  margin-bottom: 4rem;
   margin-left: -4rem;
   text-align: left;
 }
 
-.c5 {
+.c6 {
   position: relative;
   margin: 0;
   color: #2f3b6c;
@@ -167,7 +167,7 @@ exports[`<Answer /> should renders 1`] = `
   padding-left: 4rem;
 }
 
-.c7 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -175,11 +175,15 @@ exports[`<Answer /> should renders 1`] = `
   font-size: 1.4rem;
 }
 
-.c8 {
+.c5 {
+  margin-bottom: 0;
+}
+
+.c9 {
   margin: 3.2rem 0 0 0;
 }
 
-.c11 {
+.c12 {
   padding: 2rem 2.4rem;
   color: #3e486e;
   border-radius: 0.6rem;
@@ -202,15 +206,15 @@ exports[`<Answer /> should renders 1`] = `
   justify-content: stretch;
 }
 
-.c11 > *:first-child {
+.c12 > *:first-child {
   margin-top: 0;
 }
 
-.c11 > *:last-child {
+.c12 > *:last-child {
   margin-bottom: 0;
 }
 
-.c13 {
+.c14 {
   -webkit-flex: 0 1 auto;
   -ms-flex: 0 1 auto;
   flex: 0 1 auto;
@@ -219,7 +223,7 @@ exports[`<Answer /> should renders 1`] = `
   padding-bottom: 1rem;
 }
 
-.c15 {
+.c16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -234,7 +238,7 @@ exports[`<Answer /> should renders 1`] = `
   margin: 0;
 }
 
-.c18 + .c17 {
+.c19 + .c18 {
   margin-left: 4rem;
 }
 
@@ -272,19 +276,20 @@ exports[`<Answer /> should renders 1`] = `
   width: 80%;
 }
 
-.c9 {
+.c10 {
   padding: 2rem 2.4rem;
   color: #3e486e;
   border-radius: 0.6rem;
   background-color: #f2f5fa;
+  border: 1px solid #f2f5fa;
   margin: 1.6rem auto;
 }
 
-.c9 > *:first-child {
+.c10 > *:first-child {
   margin-top: 0;
 }
 
-.c9 > *:last-child {
+.c10 > *:last-child {
   margin-bottom: 0;
 }
 
@@ -315,50 +320,51 @@ exports[`<Answer /> should renders 1`] = `
 }
 
 @media (max-width:600px) {
-  .c12 {
+  .c13 {
     margin-left: -1rem;
     padding-left: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c12 {
+  .c13 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c16 {
+  .c17 {
     font-size: 1.4rem;
   }
 }
 
 @media (max-width:600px) {
-  .c16 {
+  .c17 {
     padding: 0 3rem;
   }
 }
 
 @media (max-width:600px) {
   .c4 {
+    margin-bottom: 2.4rem;
     margin-left: -1rem;
   }
 }
 
 @media (max-width:600px) {
-  .c5 {
+  .c6 {
     padding-left: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c5 {
-    font-size: 2.8rem;
+  .c6 {
+    font-size: 2.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c7 {
+  .c8 {
     -webkit-flex-flow: column;
     -ms-flex-flow: column;
     flex-flow: column;
@@ -370,26 +376,26 @@ exports[`<Answer /> should renders 1`] = `
 }
 
 @media (max-width:600px) {
-  .c8 {
+  .c9 {
     margin-top: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c11 {
+  .c12 {
     padding: 1.6rem 1rem;
   }
 }
 
 @media print {
-  .c11 {
+  .c12 {
     padding: 0 5pt;
     border: none;
   }
 }
 
 @media (max-width:1180px) {
-  .c11 {
+  .c12 {
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
@@ -404,20 +410,20 @@ exports[`<Answer /> should renders 1`] = `
 }
 
 @media (max-width:1180px) {
-  .c13 {
+  .c14 {
     margin-bottom: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c13 {
+  .c14 {
     padding-top: 0;
     padding-bottom: 0;
   }
 }
 
 @media (max-width:1180px) {
-  .c15 {
+  .c16 {
     -webkit-box-pack: space-around;
     -webkit-justify-content: space-around;
     -ms-flex-pack: space-around;
@@ -426,7 +432,7 @@ exports[`<Answer /> should renders 1`] = `
 }
 
 @media (max-width:1180px) {
-  .c18 + .c17 {
+  .c19 + .c18 {
     margin-left: 0;
   }
 }
@@ -457,13 +463,13 @@ exports[`<Answer /> should renders 1`] = `
 }
 
 @media (max-width:600px) {
-  .c9 {
+  .c10 {
     padding: 1.6rem 1rem;
   }
 }
 
 @media print {
-  .c9 {
+  .c10 {
     padding: 0 5pt;
     border: none;
   }
@@ -484,19 +490,19 @@ exports[`<Answer /> should renders 1`] = `
           data-main-content="true"
         >
           <header
-            class="c4"
+            class="c4 c5"
           >
             <h1
-              class="c5"
+              class="c6"
             >
               <div
-                class="c6"
+                class="c7"
               />
               Article du code
             </h1>
           </header>
           <div
-            class="c7"
+            class="c8"
           >
             <span>
               Mis à jour le : 
@@ -504,10 +510,10 @@ exports[`<Answer /> should renders 1`] = `
             </span>
           </div>
           <div
-            class="c8"
+            class="c9"
           >
             <div
-              class="c9"
+              class="c10"
             >
               intro de l'article
             </div>
@@ -528,32 +534,32 @@ exports[`<Answer /> should renders 1`] = `
         </div>
       </div>
       <div
-        class="c10"
+        class="c11"
       >
         <div
           class="c2"
         >
           <div
-            class="c11"
+            class="c12"
           >
             <h3
-              class="c12 c13"
+              class="c13 c14"
             >
               <div
-                class="c14"
+                class="c15"
               />
               Avez-vous trouvé la réponse à votre question ?
             </h3>
             <p
-              class="c15"
+              class="c16"
             >
               <button
-                class="c16 c17 c18"
+                class="c17 c18 c19"
               >
                 Non
               </button>
               <button
-                class="c16 c17 c18"
+                class="c17 c18 c19"
               >
                 Oui
               </button>
@@ -581,7 +587,7 @@ exports[`<Answer /> should renders a breadcrumbs 1`] = `
   margin-bottom: 0;
 }
 
-.c19 {
+.c20 {
   padding: 3.2rem 0;
   background-color: transparent;
   color: #3e486e;
@@ -617,7 +623,7 @@ exports[`<Answer /> should renders a breadcrumbs 1`] = `
   margin-bottom: 0;
 }
 
-.c15 {
+.c16 {
   position: absolute;
   background-color: #7994d4;
   border-radius: 0.6rem;
@@ -630,7 +636,7 @@ exports[`<Answer /> should renders a breadcrumbs 1`] = `
   transform: translateY(-50%);
 }
 
-.c23 {
+.c24 {
   position: absolute;
   background-color: #f66663;
   border-radius: none;
@@ -643,7 +649,7 @@ exports[`<Answer /> should renders a breadcrumbs 1`] = `
   transform: translateY(-50%);
 }
 
-.c21 {
+.c22 {
   position: relative;
   margin: 0 0 1rem 0;
   color: #2f3b6c;
@@ -655,7 +661,7 @@ exports[`<Answer /> should renders a breadcrumbs 1`] = `
   padding-left: 2.4rem;
 }
 
-.c25 {
+.c26 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -692,16 +698,16 @@ exports[`<Answer /> should renders a breadcrumbs 1`] = `
   opacity: 1;
 }
 
-.c25:link,
-.c25:visited {
+.c26:link,
+.c26:visited {
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #3e486e;
 }
 
-.c25:not([disabled]):hover,
-.c25:not([disabled]):active,
-.c25:not([disabled]):focus {
+.c26:not([disabled]):hover,
+.c26:not([disabled]):active,
+.c26:not([disabled]):focus {
   opacity: 1;
   -webkit-transform: translateY(-2px);
   -ms-transform: translateY(-2px);
@@ -710,7 +716,7 @@ exports[`<Answer /> should renders a breadcrumbs 1`] = `
   border-color: #dee5ef;
 }
 
-.c25[disabled] {
+.c26[disabled] {
   color: rgba(62,72,110,0.4);
   box-shadow: none;
   cursor: not-allowed;
@@ -761,12 +767,12 @@ exports[`<Answer /> should renders a breadcrumbs 1`] = `
 }
 
 .c13 {
-  margin: 0 auto 1rem;
+  margin-bottom: 4rem;
   margin-left: -4rem;
   text-align: left;
 }
 
-.c14 {
+.c15 {
   position: relative;
   margin: 0;
   color: #2f3b6c;
@@ -777,7 +783,7 @@ exports[`<Answer /> should renders a breadcrumbs 1`] = `
   padding-left: 4rem;
 }
 
-.c16 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -785,11 +791,15 @@ exports[`<Answer /> should renders a breadcrumbs 1`] = `
   font-size: 1.4rem;
 }
 
-.c17 {
+.c14 {
+  margin-bottom: 0;
+}
+
+.c18 {
   margin: 3.2rem 0 0 0;
 }
 
-.c20 {
+.c21 {
   padding: 2rem 2.4rem;
   color: #3e486e;
   border-radius: 0.6rem;
@@ -812,15 +822,15 @@ exports[`<Answer /> should renders a breadcrumbs 1`] = `
   justify-content: stretch;
 }
 
-.c20 > *:first-child {
+.c21 > *:first-child {
   margin-top: 0;
 }
 
-.c20 > *:last-child {
+.c21 > *:last-child {
   margin-bottom: 0;
 }
 
-.c22 {
+.c23 {
   -webkit-flex: 0 1 auto;
   -ms-flex: 0 1 auto;
   flex: 0 1 auto;
@@ -829,7 +839,7 @@ exports[`<Answer /> should renders a breadcrumbs 1`] = `
   padding-bottom: 1rem;
 }
 
-.c24 {
+.c25 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -844,7 +854,7 @@ exports[`<Answer /> should renders a breadcrumbs 1`] = `
   margin: 0;
 }
 
-.c27 + .c26 {
+.c28 + .c27 {
   margin-left: 4rem;
 }
 
@@ -959,19 +969,20 @@ exports[`<Answer /> should renders a breadcrumbs 1`] = `
   width: 80%;
 }
 
-.c18 {
+.c19 {
   padding: 2rem 2.4rem;
   color: #3e486e;
   border-radius: 0.6rem;
   background-color: #f2f5fa;
+  border: 1px solid #f2f5fa;
   margin: 1.6rem auto;
 }
 
-.c18 > *:first-child {
+.c19 > *:first-child {
   margin-top: 0;
 }
 
-.c18 > *:last-child {
+.c19 > *:last-child {
   margin-bottom: 0;
 }
 
@@ -1002,26 +1013,26 @@ exports[`<Answer /> should renders a breadcrumbs 1`] = `
 }
 
 @media (max-width:600px) {
-  .c21 {
+  .c22 {
     margin-left: -1rem;
     padding-left: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c21 {
+  .c22 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c25 {
+  .c26 {
     font-size: 1.4rem;
   }
 }
 
 @media (max-width:600px) {
-  .c25 {
+  .c26 {
     padding: 0 3rem;
   }
 }
@@ -1047,24 +1058,25 @@ exports[`<Answer /> should renders a breadcrumbs 1`] = `
 
 @media (max-width:600px) {
   .c13 {
+    margin-bottom: 2.4rem;
     margin-left: -1rem;
   }
 }
 
 @media (max-width:600px) {
-  .c14 {
+  .c15 {
     padding-left: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c14 {
-    font-size: 2.8rem;
+  .c15 {
+    font-size: 2.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c16 {
+  .c17 {
     -webkit-flex-flow: column;
     -ms-flex-flow: column;
     flex-flow: column;
@@ -1076,26 +1088,26 @@ exports[`<Answer /> should renders a breadcrumbs 1`] = `
 }
 
 @media (max-width:600px) {
-  .c17 {
+  .c18 {
     margin-top: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c20 {
+  .c21 {
     padding: 1.6rem 1rem;
   }
 }
 
 @media print {
-  .c20 {
+  .c21 {
     padding: 0 5pt;
     border: none;
   }
 }
 
 @media (max-width:1180px) {
-  .c20 {
+  .c21 {
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
@@ -1110,20 +1122,20 @@ exports[`<Answer /> should renders a breadcrumbs 1`] = `
 }
 
 @media (max-width:1180px) {
-  .c22 {
+  .c23 {
     margin-bottom: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c22 {
+  .c23 {
     padding-top: 0;
     padding-bottom: 0;
   }
 }
 
 @media (max-width:1180px) {
-  .c24 {
+  .c25 {
     -webkit-box-pack: space-around;
     -webkit-justify-content: space-around;
     -ms-flex-pack: space-around;
@@ -1132,7 +1144,7 @@ exports[`<Answer /> should renders a breadcrumbs 1`] = `
 }
 
 @media (max-width:1180px) {
-  .c27 + .c26 {
+  .c28 + .c27 {
     margin-left: 0;
   }
 }
@@ -1194,13 +1206,13 @@ exports[`<Answer /> should renders a breadcrumbs 1`] = `
 }
 
 @media (max-width:600px) {
-  .c18 {
+  .c19 {
     padding: 1.6rem 1rem;
   }
 }
 
 @media print {
-  .c18 {
+  .c19 {
     padding: 0 5pt;
     border: none;
   }
@@ -1308,19 +1320,19 @@ exports[`<Answer /> should renders a breadcrumbs 1`] = `
             tag2
           </span>
           <header
-            class="c13"
+            class="c13 c14"
           >
             <h1
-              class="c14"
+              class="c15"
             >
               <div
-                class="c15"
+                class="c16"
               />
               Article du code
             </h1>
           </header>
           <div
-            class="c16"
+            class="c17"
           >
             <span>
               Mis à jour le : 
@@ -1328,10 +1340,10 @@ exports[`<Answer /> should renders a breadcrumbs 1`] = `
             </span>
           </div>
           <div
-            class="c17"
+            class="c18"
           >
             <div
-              class="c18"
+              class="c19"
             >
               intro de l'article
             </div>
@@ -1352,32 +1364,32 @@ exports[`<Answer /> should renders a breadcrumbs 1`] = `
         </div>
       </div>
       <div
-        class="c19"
+        class="c20"
       >
         <div
           class="c10"
         >
           <div
-            class="c20"
+            class="c21"
           >
             <h3
-              class="c21 c22"
+              class="c22 c23"
             >
               <div
-                class="c23"
+                class="c24"
               />
               Avez-vous trouvé la réponse à votre question ?
             </h3>
             <p
-              class="c24"
+              class="c25"
             >
               <button
-                class="c25 c26 c27"
+                class="c26 c27 c28"
               >
                 Non
               </button>
               <button
-                class="c25 c26 c27"
+                class="c26 c27 c28"
               >
                 Oui
               </button>
@@ -1405,7 +1417,7 @@ exports[`<Answer /> should renders back to results link 1`] = `
   margin-bottom: 0;
 }
 
-.c10 {
+.c11 {
   padding: 3.2rem 0;
   background-color: transparent;
   color: #3e486e;
@@ -1441,7 +1453,7 @@ exports[`<Answer /> should renders back to results link 1`] = `
   margin-bottom: 0;
 }
 
-.c6 {
+.c7 {
   position: absolute;
   background-color: #7994d4;
   border-radius: 0.6rem;
@@ -1454,7 +1466,7 @@ exports[`<Answer /> should renders back to results link 1`] = `
   transform: translateY(-50%);
 }
 
-.c14 {
+.c15 {
   position: absolute;
   background-color: #f66663;
   border-radius: none;
@@ -1467,7 +1479,7 @@ exports[`<Answer /> should renders back to results link 1`] = `
   transform: translateY(-50%);
 }
 
-.c12 {
+.c13 {
   position: relative;
   margin: 0 0 1rem 0;
   color: #2f3b6c;
@@ -1479,7 +1491,7 @@ exports[`<Answer /> should renders back to results link 1`] = `
   padding-left: 2.4rem;
 }
 
-.c17 {
+.c18 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -1516,16 +1528,16 @@ exports[`<Answer /> should renders back to results link 1`] = `
   opacity: 1;
 }
 
-.c17:link,
-.c17:visited {
+.c18:link,
+.c18:visited {
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #3e486e;
 }
 
-.c17:not([disabled]):hover,
-.c17:not([disabled]):active,
-.c17:not([disabled]):focus {
+.c18:not([disabled]):hover,
+.c18:not([disabled]):active,
+.c18:not([disabled]):focus {
   opacity: 1;
   -webkit-transform: translateY(-2px);
   -ms-transform: translateY(-2px);
@@ -1534,25 +1546,25 @@ exports[`<Answer /> should renders back to results link 1`] = `
   border-color: #dee5ef;
 }
 
-.c17[disabled] {
+.c18[disabled] {
   color: rgba(62,72,110,0.4);
   box-shadow: none;
   cursor: not-allowed;
 }
 
-.c16:hover .c20 {
+.c17:hover .c21 {
   -webkit-transform: translateX(4px);
   -ms-transform: translateX(4px);
   transform: translateX(4px);
 }
 
 .c4 {
-  margin: 0 auto 1rem;
+  margin-bottom: 4rem;
   margin-left: -4rem;
   text-align: left;
 }
 
-.c5 {
+.c6 {
   position: relative;
   margin: 0;
   color: #2f3b6c;
@@ -1563,7 +1575,7 @@ exports[`<Answer /> should renders back to results link 1`] = `
   padding-left: 4rem;
 }
 
-.c7 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1571,11 +1583,15 @@ exports[`<Answer /> should renders back to results link 1`] = `
   font-size: 1.4rem;
 }
 
-.c8 {
+.c5 {
+  margin-bottom: 0;
+}
+
+.c9 {
   margin: 3.2rem 0 0 0;
 }
 
-.c11 {
+.c12 {
   padding: 2rem 2.4rem;
   color: #3e486e;
   border-radius: 0.6rem;
@@ -1598,15 +1614,15 @@ exports[`<Answer /> should renders back to results link 1`] = `
   justify-content: stretch;
 }
 
-.c11 > *:first-child {
+.c12 > *:first-child {
   margin-top: 0;
 }
 
-.c11 > *:last-child {
+.c12 > *:last-child {
   margin-bottom: 0;
 }
 
-.c13 {
+.c14 {
   -webkit-flex: 0 1 auto;
   -ms-flex: 0 1 auto;
   flex: 0 1 auto;
@@ -1615,7 +1631,7 @@ exports[`<Answer /> should renders back to results link 1`] = `
   padding-bottom: 1rem;
 }
 
-.c15 {
+.c16 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1630,7 +1646,7 @@ exports[`<Answer /> should renders back to results link 1`] = `
   margin: 0;
 }
 
-.c19 + .c18 {
+.c20 + .c19 {
   margin-left: 4rem;
 }
 
@@ -1668,19 +1684,20 @@ exports[`<Answer /> should renders back to results link 1`] = `
   width: 80%;
 }
 
-.c9 {
+.c10 {
   padding: 2rem 2.4rem;
   color: #3e486e;
   border-radius: 0.6rem;
   background-color: #f2f5fa;
+  border: 1px solid #f2f5fa;
   margin: 1.6rem auto;
 }
 
-.c9 > *:first-child {
+.c10 > *:first-child {
   margin-top: 0;
 }
 
-.c9 > *:last-child {
+.c10 > *:last-child {
   margin-bottom: 0;
 }
 
@@ -1711,50 +1728,51 @@ exports[`<Answer /> should renders back to results link 1`] = `
 }
 
 @media (max-width:600px) {
-  .c12 {
+  .c13 {
     margin-left: -1rem;
     padding-left: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c12 {
+  .c13 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c17 {
+  .c18 {
     font-size: 1.4rem;
   }
 }
 
 @media (max-width:600px) {
-  .c17 {
+  .c18 {
     padding: 0 3rem;
   }
 }
 
 @media (max-width:600px) {
   .c4 {
+    margin-bottom: 2.4rem;
     margin-left: -1rem;
   }
 }
 
 @media (max-width:600px) {
-  .c5 {
+  .c6 {
     padding-left: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c5 {
-    font-size: 2.8rem;
+  .c6 {
+    font-size: 2.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c7 {
+  .c8 {
     -webkit-flex-flow: column;
     -ms-flex-flow: column;
     flex-flow: column;
@@ -1766,26 +1784,26 @@ exports[`<Answer /> should renders back to results link 1`] = `
 }
 
 @media (max-width:600px) {
-  .c8 {
+  .c9 {
     margin-top: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c11 {
+  .c12 {
     padding: 1.6rem 1rem;
   }
 }
 
 @media print {
-  .c11 {
+  .c12 {
     padding: 0 5pt;
     border: none;
   }
 }
 
 @media (max-width:1180px) {
-  .c11 {
+  .c12 {
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
@@ -1800,20 +1818,20 @@ exports[`<Answer /> should renders back to results link 1`] = `
 }
 
 @media (max-width:1180px) {
-  .c13 {
+  .c14 {
     margin-bottom: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c13 {
+  .c14 {
     padding-top: 0;
     padding-bottom: 0;
   }
 }
 
 @media (max-width:1180px) {
-  .c15 {
+  .c16 {
     -webkit-box-pack: space-around;
     -webkit-justify-content: space-around;
     -ms-flex-pack: space-around;
@@ -1822,7 +1840,7 @@ exports[`<Answer /> should renders back to results link 1`] = `
 }
 
 @media (max-width:1180px) {
-  .c19 + .c18 {
+  .c20 + .c19 {
     margin-left: 0;
   }
 }
@@ -1853,13 +1871,13 @@ exports[`<Answer /> should renders back to results link 1`] = `
 }
 
 @media (max-width:600px) {
-  .c9 {
+  .c10 {
     padding: 1.6rem 1rem;
   }
 }
 
 @media print {
-  .c9 {
+  .c10 {
     padding: 0 5pt;
     border: none;
   }
@@ -1880,19 +1898,19 @@ exports[`<Answer /> should renders back to results link 1`] = `
           data-main-content="true"
         >
           <header
-            class="c4"
+            class="c4 c5"
           >
             <h1
-              class="c5"
+              class="c6"
             >
               <div
-                class="c6"
+                class="c7"
               />
               Article du code
             </h1>
           </header>
           <div
-            class="c7"
+            class="c8"
           >
             <span>
               Mis à jour le : 
@@ -1900,10 +1918,10 @@ exports[`<Answer /> should renders back to results link 1`] = `
             </span>
           </div>
           <div
-            class="c8"
+            class="c9"
           >
             <div
-              class="c9"
+              class="c10"
             >
               intro de l'article
             </div>
@@ -1924,32 +1942,32 @@ exports[`<Answer /> should renders back to results link 1`] = `
         </div>
       </div>
       <div
-        class="c10"
+        class="c11"
       >
         <div
           class="c2"
         >
           <div
-            class="c11"
+            class="c12"
           >
             <h3
-              class="c12 c13"
+              class="c13 c14"
             >
               <div
-                class="c14"
+                class="c15"
               />
               Avez-vous trouvé la réponse à votre question ?
             </h3>
             <p
-              class="c15"
+              class="c16"
             >
               <button
-                class="c16 c17 c18 c19"
+                class="c17 c18 c19 c20"
               >
                 Non
               </button>
               <button
-                class="c16 c17 c18 c19"
+                class="c17 c18 c19 c20"
               >
                 Oui
               </button>
@@ -1977,7 +1995,7 @@ exports[`<Answer /> should renders related content 1`] = `
   margin-bottom: 0;
 }
 
-.c11 {
+.c12 {
   padding: 3.2rem 0;
   background-color: transparent;
   color: #3e486e;
@@ -2013,7 +2031,7 @@ exports[`<Answer /> should renders related content 1`] = `
   margin-bottom: 0;
 }
 
-.c6 {
+.c7 {
   position: absolute;
   background-color: #7994d4;
   border-radius: 0.6rem;
@@ -2026,7 +2044,7 @@ exports[`<Answer /> should renders related content 1`] = `
   transform: translateY(-50%);
 }
 
-.c15 {
+.c16 {
   position: absolute;
   background-color: #f66663;
   border-radius: none;
@@ -2039,7 +2057,7 @@ exports[`<Answer /> should renders related content 1`] = `
   transform: translateY(-50%);
 }
 
-.c13 {
+.c14 {
   position: relative;
   margin: 0 0 1rem 0;
   color: #2f3b6c;
@@ -2051,7 +2069,7 @@ exports[`<Answer /> should renders related content 1`] = `
   padding-left: 2.4rem;
 }
 
-.c31 {
+.c32 {
   position: relative;
   margin: 0 0 1rem 0;
   color: #2f3b6c;
@@ -2061,7 +2079,7 @@ exports[`<Answer /> should renders related content 1`] = `
   line-height: 1.25;
 }
 
-.c40 {
+.c41 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2074,14 +2092,14 @@ exports[`<Answer /> should renders related content 1`] = `
   text-decoration: none;
 }
 
-.c42 {
+.c43 {
   -webkit-flex: 0 1 auto;
   -ms-flex: 0 1 auto;
   flex: 0 1 auto;
   width: auto;
 }
 
-.c41 {
+.c42 {
   -webkit-flex: 0 0 2.8rem;
   -ms-flex: 0 0 2.8rem;
   flex: 0 0 2.8rem;
@@ -2095,13 +2113,13 @@ exports[`<Answer /> should renders related content 1`] = `
   transition: transform 250ms linear;
 }
 
-.c39:hover .c41 {
+.c40:hover .c42 {
   -webkit-transform: translateX(4px);
   -ms-transform: translateX(4px);
   transform: translateX(4px);
 }
 
-.c25 {
+.c26 {
   position: absolute;
   top: 0;
   right: 0;
@@ -2112,7 +2130,7 @@ exports[`<Answer /> should renders related content 1`] = `
   border-radius: 0 0.6rem 0 0;
 }
 
-.c25:before {
+.c26:before {
   position: absolute;
   display: block;
   width: 0;
@@ -2123,7 +2141,7 @@ exports[`<Answer /> should renders related content 1`] = `
   content: "";
 }
 
-.c26 {
+.c27 {
   position: absolute;
   top: 0;
   right: 0;
@@ -2132,7 +2150,7 @@ exports[`<Answer /> should renders related content 1`] = `
   height: 3rem;
 }
 
-.c18 {
+.c19 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2169,16 +2187,16 @@ exports[`<Answer /> should renders related content 1`] = `
   opacity: 1;
 }
 
-.c18:link,
-.c18:visited {
+.c19:link,
+.c19:visited {
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #3e486e;
 }
 
-.c18:not([disabled]):hover,
-.c18:not([disabled]):active,
-.c18:not([disabled]):focus {
+.c19:not([disabled]):hover,
+.c19:not([disabled]):active,
+.c19:not([disabled]):focus {
   opacity: 1;
   -webkit-transform: translateY(-2px);
   -ms-transform: translateY(-2px);
@@ -2187,13 +2205,13 @@ exports[`<Answer /> should renders related content 1`] = `
   border-color: #dee5ef;
 }
 
-.c18[disabled] {
+.c19[disabled] {
   color: rgba(62,72,110,0.4);
   box-shadow: none;
   cursor: not-allowed;
 }
 
-.c36 {
+.c37 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -2226,6 +2244,7 @@ exports[`<Answer /> should renders related content 1`] = `
   font-weight: 600;
   font-size: 1.6rem;
   line-height: 1.625;
+  vertical-align: baseline;
   text-align: left;
   background: none;
   border: none;
@@ -2233,14 +2252,14 @@ exports[`<Answer /> should renders related content 1`] = `
   overflow: visible;
 }
 
-.c36:focus,
-.c36:hover,
-.c36:active {
+.c37:focus,
+.c37:hover,
+.c37:active {
   -webkit-text-decoration: underline;
   text-decoration: underline;
 }
 
-.c37 {
+.c38 {
   width: 2.6rem;
   height: 1.4rem;
   margin: 0 0.4rem 0 1rem;
@@ -2249,13 +2268,13 @@ exports[`<Answer /> should renders related content 1`] = `
   transition: transform 250ms linear;
 }
 
-.c17:hover .c37 {
+.c18:hover .c38 {
   -webkit-transform: translateX(4px);
   -ms-transform: translateX(4px);
   transform: translateX(4px);
 }
 
-.c30 {
+.c31 {
   display: block;
   margin: 0 0 1rem 0;
   color: #4d73b8;
@@ -2266,7 +2285,7 @@ exports[`<Answer /> should renders related content 1`] = `
   text-transform: uppercase;
 }
 
-.c23 {
+.c24 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -2307,9 +2326,9 @@ exports[`<Answer /> should renders related content 1`] = `
   appearance: none;
 }
 
-.c23:hover,
-.c23:active,
-.c23:focus {
+.c24:hover,
+.c24:active,
+.c24:focus {
   color: #3e486e;
   box-shadow: 0 1rem 2rem rgba(121,148,212,0.4);
   -webkit-transform: translateY(-2px);
@@ -2317,7 +2336,7 @@ exports[`<Answer /> should renders related content 1`] = `
   transform: translateY(-2px);
 }
 
-.c28 {
+.c29 {
   display: block;
   width: 7.2rem;
   height: 7.2rem;
@@ -2327,21 +2346,21 @@ exports[`<Answer /> should renders related content 1`] = `
   border-radius: 50%;
 }
 
-.c27 {
+.c28 {
   -webkit-flex: 0 0 auto;
   -ms-flex: 0 0 auto;
   flex: 0 0 auto;
 }
 
-.c29 {
+.c30 {
   padding-right: 1rem;
 }
 
-.c32 {
+.c33 {
   margin: 0;
 }
 
-.c33 {
+.c34 {
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
@@ -2349,12 +2368,12 @@ exports[`<Answer /> should renders related content 1`] = `
 }
 
 .c4 {
-  margin: 0 auto 1rem;
+  margin-bottom: 4rem;
   margin-left: -4rem;
   text-align: left;
 }
 
-.c5 {
+.c6 {
   position: relative;
   margin: 0;
   color: #2f3b6c;
@@ -2365,11 +2384,11 @@ exports[`<Answer /> should renders related content 1`] = `
   padding-left: 4rem;
 }
 
-.c10 {
+.c11 {
   border-bottom: 1px dotted #7994d4;
 }
 
-.c7 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2377,11 +2396,15 @@ exports[`<Answer /> should renders related content 1`] = `
   font-size: 1.4rem;
 }
 
-.c8 {
+.c5 {
+  margin-bottom: 0;
+}
+
+.c9 {
   margin: 3.2rem 0 0 0;
 }
 
-.c12 {
+.c13 {
   padding: 2rem 2.4rem;
   color: #3e486e;
   border-radius: 0.6rem;
@@ -2404,15 +2427,15 @@ exports[`<Answer /> should renders related content 1`] = `
   justify-content: stretch;
 }
 
-.c12 > *:first-child {
+.c13 > *:first-child {
   margin-top: 0;
 }
 
-.c12 > *:last-child {
+.c13 > *:last-child {
   margin-bottom: 0;
 }
 
-.c14 {
+.c15 {
   -webkit-flex: 0 1 auto;
   -ms-flex: 0 1 auto;
   flex: 0 1 auto;
@@ -2421,7 +2444,7 @@ exports[`<Answer /> should renders related content 1`] = `
   padding-bottom: 1rem;
 }
 
-.c16 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2436,11 +2459,11 @@ exports[`<Answer /> should renders related content 1`] = `
   margin: 0;
 }
 
-.c20 + .c19 {
+.c21 + .c20 {
   margin-left: 4rem;
 }
 
-.c34 {
+.c35 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2455,11 +2478,11 @@ exports[`<Answer /> should renders related content 1`] = `
   height: 100%;
 }
 
-.c35 {
+.c36 {
   margin-top: 1rem;
 }
 
-.c21 {
+.c22 {
   position: -webkit-sticky;
   position: sticky;
   top: 12rem;
@@ -2469,19 +2492,19 @@ exports[`<Answer /> should renders related content 1`] = `
   list-style-type: none;
 }
 
-.c21 > *:first-child {
+.c22 > *:first-child {
   margin-top: 0;
 }
 
-.c38 {
+.c39 {
   max-width: 28rem;
 }
 
-.c24 {
+.c25 {
   max-width: 28rem;
 }
 
-.c22 {
+.c23 {
   margin: 1.6rem 0;
   padding: 0;
 }
@@ -2520,19 +2543,20 @@ exports[`<Answer /> should renders related content 1`] = `
   width: 70%;
 }
 
-.c9 {
+.c10 {
   padding: 2rem 2.4rem;
   color: #3e486e;
   border-radius: 0.6rem;
   background-color: #f2f5fa;
+  border: 1px solid #f2f5fa;
   margin: 1.6rem auto;
 }
 
-.c9 > *:first-child {
+.c10 > *:first-child {
   margin-top: 0;
 }
 
-.c9 > *:last-child {
+.c10 > *:last-child {
   margin-bottom: 0;
 }
 
@@ -2563,44 +2587,44 @@ exports[`<Answer /> should renders related content 1`] = `
 }
 
 @media (max-width:600px) {
-  .c13 {
+  .c14 {
     margin-left: -1rem;
     padding-left: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c13 {
+  .c14 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c31 {
+  .c32 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c18 {
+  .c19 {
     font-size: 1.4rem;
   }
 }
 
 @media (max-width:600px) {
-  .c18 {
+  .c19 {
     padding: 0 3rem;
   }
 }
 
 @media (max-width:600px) {
-  .c36 {
+  .c37 {
     font-size: 1.4rem;
   }
 }
 
 @media (max-width:600px) {
-  .c23 {
+  .c24 {
     padding: 2rem 1.6rem;
     font-size: 1.4rem;
   }
@@ -2608,24 +2632,25 @@ exports[`<Answer /> should renders related content 1`] = `
 
 @media (max-width:600px) {
   .c4 {
+    margin-bottom: 2.4rem;
     margin-left: -1rem;
   }
 }
 
 @media (max-width:600px) {
-  .c5 {
+  .c6 {
     padding-left: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c5 {
-    font-size: 2.8rem;
+  .c6 {
+    font-size: 2.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c7 {
+  .c8 {
     -webkit-flex-flow: column;
     -ms-flex-flow: column;
     flex-flow: column;
@@ -2637,26 +2662,26 @@ exports[`<Answer /> should renders related content 1`] = `
 }
 
 @media (max-width:600px) {
-  .c8 {
+  .c9 {
     margin-top: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c12 {
+  .c13 {
     padding: 1.6rem 1rem;
   }
 }
 
 @media print {
-  .c12 {
+  .c13 {
     padding: 0 5pt;
     border: none;
   }
 }
 
 @media (max-width:1180px) {
-  .c12 {
+  .c13 {
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
@@ -2671,20 +2696,20 @@ exports[`<Answer /> should renders related content 1`] = `
 }
 
 @media (max-width:1180px) {
-  .c14 {
+  .c15 {
     margin-bottom: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c14 {
+  .c15 {
     padding-top: 0;
     padding-bottom: 0;
   }
 }
 
 @media (max-width:1180px) {
-  .c16 {
+  .c17 {
     -webkit-box-pack: space-around;
     -webkit-justify-content: space-around;
     -ms-flex-pack: space-around;
@@ -2693,19 +2718,19 @@ exports[`<Answer /> should renders related content 1`] = `
 }
 
 @media (max-width:1180px) {
-  .c20 + .c19 {
+  .c21 + .c20 {
     margin-left: 0;
   }
 }
 
 @media (max-width:1180px) {
-  .c21 {
+  .c22 {
     padding-left: 1.6rem;
   }
 }
 
 @media (max-width:980px) {
-  .c21 {
+  .c22 {
     display: none;
   }
 }
@@ -2736,13 +2761,13 @@ exports[`<Answer /> should renders related content 1`] = `
 }
 
 @media (max-width:600px) {
-  .c9 {
+  .c10 {
     padding: 1.6rem 1rem;
   }
 }
 
 @media print {
-  .c9 {
+  .c10 {
     padding: 0 5pt;
     border: none;
   }
@@ -2763,19 +2788,19 @@ exports[`<Answer /> should renders related content 1`] = `
           data-main-content="true"
         >
           <header
-            class="c4"
+            class="c4 c5"
           >
             <h1
-              class="c5"
+              class="c6"
             >
               <div
-                class="c6"
+                class="c7"
               />
               Article du code
             </h1>
           </header>
           <div
-            class="c7"
+            class="c8"
           >
             <span>
               Mis à jour le : 
@@ -2783,10 +2808,10 @@ exports[`<Answer /> should renders related content 1`] = `
             </span>
           </div>
           <div
-            class="c8"
+            class="c9"
           >
             <div
-              class="c9"
+              class="c10"
             >
               intro de l'article
             </div>
@@ -2798,7 +2823,7 @@ exports[`<Answer /> should renders related content 1`] = `
                   data-tooltip-ref="__tt__0"
                 >
                   <span
-                    class="c10"
+                    class="c11"
                     data-reach-tooltip-trigger=""
                     tabindex="0"
                   >
@@ -2810,7 +2835,7 @@ exports[`<Answer /> should renders related content 1`] = `
                   data-tooltip-ref="__tt__1"
                 >
                   <span
-                    class="c10"
+                    class="c11"
                     data-reach-tooltip-trigger=""
                     tabindex="0"
                   >
@@ -2822,7 +2847,7 @@ exports[`<Answer /> should renders related content 1`] = `
                   data-tooltip-ref="__tt__2"
                 >
                   <span
-                    class="c10"
+                    class="c11"
                     data-reach-tooltip-trigger=""
                     tabindex="0"
                   >
@@ -2839,32 +2864,32 @@ exports[`<Answer /> should renders related content 1`] = `
         </div>
       </div>
       <div
-        class="c11"
+        class="c12"
       >
         <div
           class="c2"
         >
           <div
-            class="c12"
+            class="c13"
           >
             <h3
-              class="c13 c14"
+              class="c14 c15"
             >
               <div
-                class="c15"
+                class="c16"
               />
               Avez-vous trouvé la réponse à votre question ?
             </h3>
             <p
-              class="c16"
+              class="c17"
             >
               <button
-                class="c17 c18 c19 c20"
+                class="c18 c19 c20 c21"
               >
                 Non
               </button>
               <button
-                class="c17 c18 c19 c20"
+                class="c18 c19 c20 c21"
               >
                 Oui
               </button>
@@ -2874,20 +2899,20 @@ exports[`<Answer /> should renders related content 1`] = `
       </div>
     </div>
     <ul
-      class="c21"
+      class="c22"
     >
       <li
-        class="c22"
+        class="c23"
       >
         <a
-          class="c23 c24"
+          class="c24 c25"
           href="/modeles-de-courriers/LETTER_1"
         >
           <div
-            class="c25"
+            class="c26"
           >
             <div
-              class="c26"
+              class="c27"
             >
               <svg
                 fill="none"
@@ -2909,10 +2934,10 @@ exports[`<Answer /> should renders related content 1`] = `
             </div>
           </div>
           <div
-            class="c27"
+            class="c28"
           >
             <div
-              class="c28"
+              class="c29"
             >
               <svg
                 fill="none"
@@ -2931,35 +2956,35 @@ exports[`<Answer /> should renders related content 1`] = `
               </svg>
             </div>
             <div
-              class="c29"
+              class="c30"
             >
               <span
-                class="c30"
+                class="c31"
               >
                 Modèles de documents
               </span>
               <h3
-                class="c31 c32"
+                class="c32 c33"
               >
                 related letter title 1
               </h3>
             </div>
           </div>
           <div
-            class="c33"
+            class="c34"
           >
             <div
-              class="c34"
+              class="c35"
             >
               <div
-                class="c35"
+                class="c36"
               >
                 <div
-                  class="c17 c36"
+                  class="c18 c37"
                 >
                   Consulter
                   <svg
-                    class="c37"
+                    class="c38"
                     fill="none"
                     viewBox="0 0 28 15"
                   >
@@ -2975,17 +3000,17 @@ exports[`<Answer /> should renders related content 1`] = `
         </a>
       </li>
       <li
-        class="c22"
+        class="c23"
       >
         <a
-          class="c23 c24"
+          class="c24 c25"
           href="/outils/TOOL_1"
         >
           <div
-            class="c25"
+            class="c26"
           >
             <div
-              class="c26"
+              class="c27"
             >
               <svg
                 fill="none"
@@ -3007,10 +3032,10 @@ exports[`<Answer /> should renders related content 1`] = `
             </div>
           </div>
           <div
-            class="c27"
+            class="c28"
           >
             <div
-              class="c28"
+              class="c29"
             >
               <svg
                 fill="none"
@@ -3037,35 +3062,35 @@ exports[`<Answer /> should renders related content 1`] = `
               </svg>
             </div>
             <div
-              class="c29"
+              class="c30"
             >
               <span
-                class="c30"
+                class="c31"
               >
                 Outils
               </span>
               <h3
-                class="c31 c32"
+                class="c32 c33"
               >
                 related tool title 1
               </h3>
             </div>
           </div>
           <div
-            class="c33"
+            class="c34"
           >
             <div
-              class="c34"
+              class="c35"
             >
               <div
-                class="c35"
+                class="c36"
               >
                 <div
-                  class="c17 c36"
+                  class="c18 c37"
                 >
                   tools action
                   <svg
-                    class="c37"
+                    class="c38"
                     fill="none"
                     viewBox="0 0 28 15"
                   >
@@ -3081,19 +3106,19 @@ exports[`<Answer /> should renders related content 1`] = `
         </a>
       </li>
       <li
-        class="c22"
+        class="c23"
       >
         <a
-          class="c23 c38"
+          class="c24 c39"
           href="url.extrenal/tool"
           rel="noopener nofollow"
           target="_blank"
         >
           <div
-            class="c27"
+            class="c28"
           >
             <div
-              class="c28"
+              class="c29"
             >
               <svg
                 fill="none"
@@ -3120,11 +3145,11 @@ exports[`<Answer /> should renders related content 1`] = `
               </svg>
             </div>
             <div
-              class="c29"
+              class="c30"
             >
               
               <h3
-                class="c31 c32"
+                class="c32 c33"
               >
                 related external title 1
               </h3>
@@ -3136,14 +3161,14 @@ exports[`<Answer /> should renders related content 1`] = `
         Les articles pouvant vous intéresser :
       </span>
       <li
-        class="c22"
+        class="c23"
       >
         <a
-          class="c39 c40"
+          class="c40 c41"
           href="/fiche-service-public/LINK_1"
         >
           <svg
-            class="c41"
+            class="c42"
             fill="none"
             viewBox="0 0 28 15"
           >
@@ -3153,21 +3178,21 @@ exports[`<Answer /> should renders related content 1`] = `
             />
           </svg>
           <span
-            class="c42"
+            class="c43"
           >
             related sheet sp title 1
           </span>
         </a>
       </li>
       <li
-        class="c22"
+        class="c23"
       >
         <a
-          class="c39 c40"
+          class="c40 c41"
           href="/fiche-ministere-travail/LINK_2"
         >
           <svg
-            class="c41"
+            class="c42"
             fill="none"
             viewBox="0 0 28 15"
           >
@@ -3177,21 +3202,21 @@ exports[`<Answer /> should renders related content 1`] = `
             />
           </svg>
           <span
-            class="c42"
+            class="c43"
           >
             related sheet mt title 1
           </span>
         </a>
       </li>
       <li
-        class="c22"
+        class="c23"
       >
         <a
-          class="c39 c40"
+          class="c40 c41"
           href="/fiche-service-public/LINK_4"
         >
           <svg
-            class="c41"
+            class="c42"
             fill="none"
             viewBox="0 0 28 15"
           >
@@ -3201,7 +3226,7 @@ exports[`<Answer /> should renders related content 1`] = `
             />
           </svg>
           <span
-            class="c42"
+            class="c43"
           >
             related sheet sp title 2
           </span>
@@ -3227,7 +3252,7 @@ exports[`<Answer /> should renders tooltip 1`] = `
   margin-bottom: 0;
 }
 
-.c11 {
+.c12 {
   padding: 3.2rem 0;
   background-color: transparent;
   color: #3e486e;
@@ -3263,7 +3288,7 @@ exports[`<Answer /> should renders tooltip 1`] = `
   margin-bottom: 0;
 }
 
-.c6 {
+.c7 {
   position: absolute;
   background-color: #7994d4;
   border-radius: 0.6rem;
@@ -3276,7 +3301,7 @@ exports[`<Answer /> should renders tooltip 1`] = `
   transform: translateY(-50%);
 }
 
-.c15 {
+.c16 {
   position: absolute;
   background-color: #f66663;
   border-radius: none;
@@ -3289,7 +3314,7 @@ exports[`<Answer /> should renders tooltip 1`] = `
   transform: translateY(-50%);
 }
 
-.c13 {
+.c14 {
   position: relative;
   margin: 0 0 1rem 0;
   color: #2f3b6c;
@@ -3301,7 +3326,7 @@ exports[`<Answer /> should renders tooltip 1`] = `
   padding-left: 2.4rem;
 }
 
-.c17 {
+.c18 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3338,16 +3363,16 @@ exports[`<Answer /> should renders tooltip 1`] = `
   opacity: 1;
 }
 
-.c17:link,
-.c17:visited {
+.c18:link,
+.c18:visited {
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #3e486e;
 }
 
-.c17:not([disabled]):hover,
-.c17:not([disabled]):active,
-.c17:not([disabled]):focus {
+.c18:not([disabled]):hover,
+.c18:not([disabled]):active,
+.c18:not([disabled]):focus {
   opacity: 1;
   -webkit-transform: translateY(-2px);
   -ms-transform: translateY(-2px);
@@ -3356,19 +3381,19 @@ exports[`<Answer /> should renders tooltip 1`] = `
   border-color: #dee5ef;
 }
 
-.c17[disabled] {
+.c18[disabled] {
   color: rgba(62,72,110,0.4);
   box-shadow: none;
   cursor: not-allowed;
 }
 
 .c4 {
-  margin: 0 auto 1rem;
+  margin-bottom: 4rem;
   margin-left: -4rem;
   text-align: left;
 }
 
-.c5 {
+.c6 {
   position: relative;
   margin: 0;
   color: #2f3b6c;
@@ -3379,11 +3404,11 @@ exports[`<Answer /> should renders tooltip 1`] = `
   padding-left: 4rem;
 }
 
-.c10 {
+.c11 {
   border-bottom: 1px dotted #7994d4;
 }
 
-.c7 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3391,11 +3416,15 @@ exports[`<Answer /> should renders tooltip 1`] = `
   font-size: 1.4rem;
 }
 
-.c8 {
+.c5 {
+  margin-bottom: 0;
+}
+
+.c9 {
   margin: 3.2rem 0 0 0;
 }
 
-.c12 {
+.c13 {
   padding: 2rem 2.4rem;
   color: #3e486e;
   border-radius: 0.6rem;
@@ -3418,15 +3447,15 @@ exports[`<Answer /> should renders tooltip 1`] = `
   justify-content: stretch;
 }
 
-.c12 > *:first-child {
+.c13 > *:first-child {
   margin-top: 0;
 }
 
-.c12 > *:last-child {
+.c13 > *:last-child {
   margin-bottom: 0;
 }
 
-.c14 {
+.c15 {
   -webkit-flex: 0 1 auto;
   -ms-flex: 0 1 auto;
   flex: 0 1 auto;
@@ -3435,7 +3464,7 @@ exports[`<Answer /> should renders tooltip 1`] = `
   padding-bottom: 1rem;
 }
 
-.c16 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3450,7 +3479,7 @@ exports[`<Answer /> should renders tooltip 1`] = `
   margin: 0;
 }
 
-.c19 + .c18 {
+.c20 + .c19 {
   margin-left: 4rem;
 }
 
@@ -3488,19 +3517,20 @@ exports[`<Answer /> should renders tooltip 1`] = `
   width: 80%;
 }
 
-.c9 {
+.c10 {
   padding: 2rem 2.4rem;
   color: #3e486e;
   border-radius: 0.6rem;
   background-color: #f2f5fa;
+  border: 1px solid #f2f5fa;
   margin: 1.6rem auto;
 }
 
-.c9 > *:first-child {
+.c10 > *:first-child {
   margin-top: 0;
 }
 
-.c9 > *:last-child {
+.c10 > *:last-child {
   margin-bottom: 0;
 }
 
@@ -3531,50 +3561,51 @@ exports[`<Answer /> should renders tooltip 1`] = `
 }
 
 @media (max-width:600px) {
-  .c13 {
+  .c14 {
     margin-left: -1rem;
     padding-left: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c13 {
+  .c14 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c17 {
+  .c18 {
     font-size: 1.4rem;
   }
 }
 
 @media (max-width:600px) {
-  .c17 {
+  .c18 {
     padding: 0 3rem;
   }
 }
 
 @media (max-width:600px) {
   .c4 {
+    margin-bottom: 2.4rem;
     margin-left: -1rem;
   }
 }
 
 @media (max-width:600px) {
-  .c5 {
+  .c6 {
     padding-left: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c5 {
-    font-size: 2.8rem;
+  .c6 {
+    font-size: 2.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c7 {
+  .c8 {
     -webkit-flex-flow: column;
     -ms-flex-flow: column;
     flex-flow: column;
@@ -3586,26 +3617,26 @@ exports[`<Answer /> should renders tooltip 1`] = `
 }
 
 @media (max-width:600px) {
-  .c8 {
+  .c9 {
     margin-top: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c12 {
+  .c13 {
     padding: 1.6rem 1rem;
   }
 }
 
 @media print {
-  .c12 {
+  .c13 {
     padding: 0 5pt;
     border: none;
   }
 }
 
 @media (max-width:1180px) {
-  .c12 {
+  .c13 {
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
@@ -3620,20 +3651,20 @@ exports[`<Answer /> should renders tooltip 1`] = `
 }
 
 @media (max-width:1180px) {
-  .c14 {
+  .c15 {
     margin-bottom: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c14 {
+  .c15 {
     padding-top: 0;
     padding-bottom: 0;
   }
 }
 
 @media (max-width:1180px) {
-  .c16 {
+  .c17 {
     -webkit-box-pack: space-around;
     -webkit-justify-content: space-around;
     -ms-flex-pack: space-around;
@@ -3642,7 +3673,7 @@ exports[`<Answer /> should renders tooltip 1`] = `
 }
 
 @media (max-width:1180px) {
-  .c19 + .c18 {
+  .c20 + .c19 {
     margin-left: 0;
   }
 }
@@ -3673,13 +3704,13 @@ exports[`<Answer /> should renders tooltip 1`] = `
 }
 
 @media (max-width:600px) {
-  .c9 {
+  .c10 {
     padding: 1.6rem 1rem;
   }
 }
 
 @media print {
-  .c9 {
+  .c10 {
     padding: 0 5pt;
     border: none;
   }
@@ -3700,19 +3731,19 @@ exports[`<Answer /> should renders tooltip 1`] = `
           data-main-content="true"
         >
           <header
-            class="c4"
+            class="c4 c5"
           >
             <h1
-              class="c5"
+              class="c6"
             >
               <div
-                class="c6"
+                class="c7"
               />
               Article du code
             </h1>
           </header>
           <div
-            class="c7"
+            class="c8"
           >
             <span>
               Mis à jour le : 
@@ -3720,10 +3751,10 @@ exports[`<Answer /> should renders tooltip 1`] = `
             </span>
           </div>
           <div
-            class="c8"
+            class="c9"
           >
             <div
-              class="c9"
+              class="c10"
             >
               intro de l'article
             </div>
@@ -3740,7 +3771,7 @@ exports[`<Answer /> should renders tooltip 1`] = `
                   data-tooltip-ref="__tt__2"
                 >
                   <span
-                    class="c10"
+                    class="c11"
                     data-reach-tooltip-trigger=""
                     tabindex="0"
                   >
@@ -3752,7 +3783,7 @@ exports[`<Answer /> should renders tooltip 1`] = `
                   data-tooltip-ref="__tt__1"
                 >
                   <span
-                    class="c10"
+                    class="c11"
                     data-reach-tooltip-trigger=""
                     tabindex="0"
                   >
@@ -3764,7 +3795,7 @@ exports[`<Answer /> should renders tooltip 1`] = `
                   data-tooltip-ref="__tt__0"
                 >
                   <span
-                    class="c10"
+                    class="c11"
                     data-reach-tooltip-trigger=""
                     tabindex="0"
                   >
@@ -3780,32 +3811,32 @@ exports[`<Answer /> should renders tooltip 1`] = `
         </div>
       </div>
       <div
-        class="c11"
+        class="c12"
       >
         <div
           class="c2"
         >
           <div
-            class="c12"
+            class="c13"
           >
             <h3
-              class="c13 c14"
+              class="c14 c15"
             >
               <div
-                class="c15"
+                class="c16"
               />
               Avez-vous trouvé la réponse à votre question ?
             </h3>
             <p
-              class="c16"
+              class="c17"
             >
               <button
-                class="c17 c18 c19"
+                class="c18 c19 c20"
               >
                 Non
               </button>
               <button
-                class="c17 c18 c19"
+                class="c18 c19 c20"
               >
                 Oui
               </button>
@@ -3833,7 +3864,7 @@ exports[`<Answer /> should renders tooltip for words with diacritics without bre
   margin-bottom: 0;
 }
 
-.c11 {
+.c12 {
   padding: 3.2rem 0;
   background-color: transparent;
   color: #3e486e;
@@ -3869,7 +3900,7 @@ exports[`<Answer /> should renders tooltip for words with diacritics without bre
   margin-bottom: 0;
 }
 
-.c6 {
+.c7 {
   position: absolute;
   background-color: #7994d4;
   border-radius: 0.6rem;
@@ -3882,7 +3913,7 @@ exports[`<Answer /> should renders tooltip for words with diacritics without bre
   transform: translateY(-50%);
 }
 
-.c15 {
+.c16 {
   position: absolute;
   background-color: #f66663;
   border-radius: none;
@@ -3895,7 +3926,7 @@ exports[`<Answer /> should renders tooltip for words with diacritics without bre
   transform: translateY(-50%);
 }
 
-.c13 {
+.c14 {
   position: relative;
   margin: 0 0 1rem 0;
   color: #2f3b6c;
@@ -3907,7 +3938,7 @@ exports[`<Answer /> should renders tooltip for words with diacritics without bre
   padding-left: 2.4rem;
 }
 
-.c17 {
+.c18 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -3944,16 +3975,16 @@ exports[`<Answer /> should renders tooltip for words with diacritics without bre
   opacity: 1;
 }
 
-.c17:link,
-.c17:visited {
+.c18:link,
+.c18:visited {
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #3e486e;
 }
 
-.c17:not([disabled]):hover,
-.c17:not([disabled]):active,
-.c17:not([disabled]):focus {
+.c18:not([disabled]):hover,
+.c18:not([disabled]):active,
+.c18:not([disabled]):focus {
   opacity: 1;
   -webkit-transform: translateY(-2px);
   -ms-transform: translateY(-2px);
@@ -3962,19 +3993,19 @@ exports[`<Answer /> should renders tooltip for words with diacritics without bre
   border-color: #dee5ef;
 }
 
-.c17[disabled] {
+.c18[disabled] {
   color: rgba(62,72,110,0.4);
   box-shadow: none;
   cursor: not-allowed;
 }
 
 .c4 {
-  margin: 0 auto 1rem;
+  margin-bottom: 4rem;
   margin-left: -4rem;
   text-align: left;
 }
 
-.c5 {
+.c6 {
   position: relative;
   margin: 0;
   color: #2f3b6c;
@@ -3985,11 +4016,11 @@ exports[`<Answer /> should renders tooltip for words with diacritics without bre
   padding-left: 4rem;
 }
 
-.c10 {
+.c11 {
   border-bottom: 1px dotted #7994d4;
 }
 
-.c7 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -3997,11 +4028,15 @@ exports[`<Answer /> should renders tooltip for words with diacritics without bre
   font-size: 1.4rem;
 }
 
-.c8 {
+.c5 {
+  margin-bottom: 0;
+}
+
+.c9 {
   margin: 3.2rem 0 0 0;
 }
 
-.c12 {
+.c13 {
   padding: 2rem 2.4rem;
   color: #3e486e;
   border-radius: 0.6rem;
@@ -4024,15 +4059,15 @@ exports[`<Answer /> should renders tooltip for words with diacritics without bre
   justify-content: stretch;
 }
 
-.c12 > *:first-child {
+.c13 > *:first-child {
   margin-top: 0;
 }
 
-.c12 > *:last-child {
+.c13 > *:last-child {
   margin-bottom: 0;
 }
 
-.c14 {
+.c15 {
   -webkit-flex: 0 1 auto;
   -ms-flex: 0 1 auto;
   flex: 0 1 auto;
@@ -4041,7 +4076,7 @@ exports[`<Answer /> should renders tooltip for words with diacritics without bre
   padding-bottom: 1rem;
 }
 
-.c16 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4056,7 +4091,7 @@ exports[`<Answer /> should renders tooltip for words with diacritics without bre
   margin: 0;
 }
 
-.c19 + .c18 {
+.c20 + .c19 {
   margin-left: 4rem;
 }
 
@@ -4094,19 +4129,20 @@ exports[`<Answer /> should renders tooltip for words with diacritics without bre
   width: 80%;
 }
 
-.c9 {
+.c10 {
   padding: 2rem 2.4rem;
   color: #3e486e;
   border-radius: 0.6rem;
   background-color: #f2f5fa;
+  border: 1px solid #f2f5fa;
   margin: 1.6rem auto;
 }
 
-.c9 > *:first-child {
+.c10 > *:first-child {
   margin-top: 0;
 }
 
-.c9 > *:last-child {
+.c10 > *:last-child {
   margin-bottom: 0;
 }
 
@@ -4137,50 +4173,51 @@ exports[`<Answer /> should renders tooltip for words with diacritics without bre
 }
 
 @media (max-width:600px) {
-  .c13 {
+  .c14 {
     margin-left: -1rem;
     padding-left: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c13 {
+  .c14 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c17 {
+  .c18 {
     font-size: 1.4rem;
   }
 }
 
 @media (max-width:600px) {
-  .c17 {
+  .c18 {
     padding: 0 3rem;
   }
 }
 
 @media (max-width:600px) {
   .c4 {
+    margin-bottom: 2.4rem;
     margin-left: -1rem;
   }
 }
 
 @media (max-width:600px) {
-  .c5 {
+  .c6 {
     padding-left: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c5 {
-    font-size: 2.8rem;
+  .c6 {
+    font-size: 2.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c7 {
+  .c8 {
     -webkit-flex-flow: column;
     -ms-flex-flow: column;
     flex-flow: column;
@@ -4192,26 +4229,26 @@ exports[`<Answer /> should renders tooltip for words with diacritics without bre
 }
 
 @media (max-width:600px) {
-  .c8 {
+  .c9 {
     margin-top: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c12 {
+  .c13 {
     padding: 1.6rem 1rem;
   }
 }
 
 @media print {
-  .c12 {
+  .c13 {
     padding: 0 5pt;
     border: none;
   }
 }
 
 @media (max-width:1180px) {
-  .c12 {
+  .c13 {
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
@@ -4226,20 +4263,20 @@ exports[`<Answer /> should renders tooltip for words with diacritics without bre
 }
 
 @media (max-width:1180px) {
-  .c14 {
+  .c15 {
     margin-bottom: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c14 {
+  .c15 {
     padding-top: 0;
     padding-bottom: 0;
   }
 }
 
 @media (max-width:1180px) {
-  .c16 {
+  .c17 {
     -webkit-box-pack: space-around;
     -webkit-justify-content: space-around;
     -ms-flex-pack: space-around;
@@ -4248,7 +4285,7 @@ exports[`<Answer /> should renders tooltip for words with diacritics without bre
 }
 
 @media (max-width:1180px) {
-  .c19 + .c18 {
+  .c20 + .c19 {
     margin-left: 0;
   }
 }
@@ -4279,13 +4316,13 @@ exports[`<Answer /> should renders tooltip for words with diacritics without bre
 }
 
 @media (max-width:600px) {
-  .c9 {
+  .c10 {
     padding: 1.6rem 1rem;
   }
 }
 
 @media print {
-  .c9 {
+  .c10 {
     padding: 0 5pt;
     border: none;
   }
@@ -4306,19 +4343,19 @@ exports[`<Answer /> should renders tooltip for words with diacritics without bre
           data-main-content="true"
         >
           <header
-            class="c4"
+            class="c4 c5"
           >
             <h1
-              class="c5"
+              class="c6"
             >
               <div
-                class="c6"
+                class="c7"
               />
               Article du code
             </h1>
           </header>
           <div
-            class="c7"
+            class="c8"
           >
             <span>
               Mis à jour le : 
@@ -4326,10 +4363,10 @@ exports[`<Answer /> should renders tooltip for words with diacritics without bre
             </span>
           </div>
           <div
-            class="c8"
+            class="c9"
           >
             <div
-              class="c9"
+              class="c10"
             >
               intro de l'article
             </div>
@@ -4343,7 +4380,7 @@ exports[`<Answer /> should renders tooltip for words with diacritics without bre
                     data-tooltip-ref="__tt__1"
                   >
                     <span
-                      class="c10"
+                      class="c11"
                       data-reach-tooltip-trigger=""
                       tabindex="0"
                     >
@@ -4356,7 +4393,7 @@ exports[`<Answer /> should renders tooltip for words with diacritics without bre
                   data-tooltip-ref="__tt__0"
                 >
                   <span
-                    class="c10"
+                    class="c11"
                     data-reach-tooltip-trigger=""
                     tabindex="0"
                   >
@@ -4372,32 +4409,32 @@ exports[`<Answer /> should renders tooltip for words with diacritics without bre
         </div>
       </div>
       <div
-        class="c11"
+        class="c12"
       >
         <div
           class="c2"
         >
           <div
-            class="c12"
+            class="c13"
           >
             <h3
-              class="c13 c14"
+              class="c14 c15"
             >
               <div
-                class="c15"
+                class="c16"
               />
               Avez-vous trouvé la réponse à votre question ?
             </h3>
             <p
-              class="c16"
+              class="c17"
             >
               <button
-                class="c17 c18 c19"
+                class="c18 c19 c20"
               >
                 Non
               </button>
               <button
-                class="c17 c18 c19"
+                class="c18 c19 c20"
               >
                 Oui
               </button>
@@ -4425,7 +4462,7 @@ exports[`<Answer /> should renders tooltip without breaking a tag 1`] = `
   margin-bottom: 0;
 }
 
-.c11 {
+.c12 {
   padding: 3.2rem 0;
   background-color: transparent;
   color: #3e486e;
@@ -4461,7 +4498,7 @@ exports[`<Answer /> should renders tooltip without breaking a tag 1`] = `
   margin-bottom: 0;
 }
 
-.c6 {
+.c7 {
   position: absolute;
   background-color: #7994d4;
   border-radius: 0.6rem;
@@ -4474,7 +4511,7 @@ exports[`<Answer /> should renders tooltip without breaking a tag 1`] = `
   transform: translateY(-50%);
 }
 
-.c15 {
+.c16 {
   position: absolute;
   background-color: #f66663;
   border-radius: none;
@@ -4487,7 +4524,7 @@ exports[`<Answer /> should renders tooltip without breaking a tag 1`] = `
   transform: translateY(-50%);
 }
 
-.c13 {
+.c14 {
   position: relative;
   margin: 0 0 1rem 0;
   color: #2f3b6c;
@@ -4499,7 +4536,7 @@ exports[`<Answer /> should renders tooltip without breaking a tag 1`] = `
   padding-left: 2.4rem;
 }
 
-.c17 {
+.c18 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -4536,16 +4573,16 @@ exports[`<Answer /> should renders tooltip without breaking a tag 1`] = `
   opacity: 1;
 }
 
-.c17:link,
-.c17:visited {
+.c18:link,
+.c18:visited {
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #3e486e;
 }
 
-.c17:not([disabled]):hover,
-.c17:not([disabled]):active,
-.c17:not([disabled]):focus {
+.c18:not([disabled]):hover,
+.c18:not([disabled]):active,
+.c18:not([disabled]):focus {
   opacity: 1;
   -webkit-transform: translateY(-2px);
   -ms-transform: translateY(-2px);
@@ -4554,19 +4591,19 @@ exports[`<Answer /> should renders tooltip without breaking a tag 1`] = `
   border-color: #dee5ef;
 }
 
-.c17[disabled] {
+.c18[disabled] {
   color: rgba(62,72,110,0.4);
   box-shadow: none;
   cursor: not-allowed;
 }
 
 .c4 {
-  margin: 0 auto 1rem;
+  margin-bottom: 4rem;
   margin-left: -4rem;
   text-align: left;
 }
 
-.c5 {
+.c6 {
   position: relative;
   margin: 0;
   color: #2f3b6c;
@@ -4577,11 +4614,11 @@ exports[`<Answer /> should renders tooltip without breaking a tag 1`] = `
   padding-left: 4rem;
 }
 
-.c10 {
+.c11 {
   border-bottom: 1px dotted #7994d4;
 }
 
-.c7 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4589,11 +4626,15 @@ exports[`<Answer /> should renders tooltip without breaking a tag 1`] = `
   font-size: 1.4rem;
 }
 
-.c8 {
+.c5 {
+  margin-bottom: 0;
+}
+
+.c9 {
   margin: 3.2rem 0 0 0;
 }
 
-.c12 {
+.c13 {
   padding: 2rem 2.4rem;
   color: #3e486e;
   border-radius: 0.6rem;
@@ -4616,15 +4657,15 @@ exports[`<Answer /> should renders tooltip without breaking a tag 1`] = `
   justify-content: stretch;
 }
 
-.c12 > *:first-child {
+.c13 > *:first-child {
   margin-top: 0;
 }
 
-.c12 > *:last-child {
+.c13 > *:last-child {
   margin-bottom: 0;
 }
 
-.c14 {
+.c15 {
   -webkit-flex: 0 1 auto;
   -ms-flex: 0 1 auto;
   flex: 0 1 auto;
@@ -4633,7 +4674,7 @@ exports[`<Answer /> should renders tooltip without breaking a tag 1`] = `
   padding-bottom: 1rem;
 }
 
-.c16 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4648,7 +4689,7 @@ exports[`<Answer /> should renders tooltip without breaking a tag 1`] = `
   margin: 0;
 }
 
-.c19 + .c18 {
+.c20 + .c19 {
   margin-left: 4rem;
 }
 
@@ -4686,19 +4727,20 @@ exports[`<Answer /> should renders tooltip without breaking a tag 1`] = `
   width: 80%;
 }
 
-.c9 {
+.c10 {
   padding: 2rem 2.4rem;
   color: #3e486e;
   border-radius: 0.6rem;
   background-color: #f2f5fa;
+  border: 1px solid #f2f5fa;
   margin: 1.6rem auto;
 }
 
-.c9 > *:first-child {
+.c10 > *:first-child {
   margin-top: 0;
 }
 
-.c9 > *:last-child {
+.c10 > *:last-child {
   margin-bottom: 0;
 }
 
@@ -4729,50 +4771,51 @@ exports[`<Answer /> should renders tooltip without breaking a tag 1`] = `
 }
 
 @media (max-width:600px) {
-  .c13 {
+  .c14 {
     margin-left: -1rem;
     padding-left: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c13 {
+  .c14 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c17 {
+  .c18 {
     font-size: 1.4rem;
   }
 }
 
 @media (max-width:600px) {
-  .c17 {
+  .c18 {
     padding: 0 3rem;
   }
 }
 
 @media (max-width:600px) {
   .c4 {
+    margin-bottom: 2.4rem;
     margin-left: -1rem;
   }
 }
 
 @media (max-width:600px) {
-  .c5 {
+  .c6 {
     padding-left: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c5 {
-    font-size: 2.8rem;
+  .c6 {
+    font-size: 2.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c7 {
+  .c8 {
     -webkit-flex-flow: column;
     -ms-flex-flow: column;
     flex-flow: column;
@@ -4784,26 +4827,26 @@ exports[`<Answer /> should renders tooltip without breaking a tag 1`] = `
 }
 
 @media (max-width:600px) {
-  .c8 {
+  .c9 {
     margin-top: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c12 {
+  .c13 {
     padding: 1.6rem 1rem;
   }
 }
 
 @media print {
-  .c12 {
+  .c13 {
     padding: 0 5pt;
     border: none;
   }
 }
 
 @media (max-width:1180px) {
-  .c12 {
+  .c13 {
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
@@ -4818,20 +4861,20 @@ exports[`<Answer /> should renders tooltip without breaking a tag 1`] = `
 }
 
 @media (max-width:1180px) {
-  .c14 {
+  .c15 {
     margin-bottom: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c14 {
+  .c15 {
     padding-top: 0;
     padding-bottom: 0;
   }
 }
 
 @media (max-width:1180px) {
-  .c16 {
+  .c17 {
     -webkit-box-pack: space-around;
     -webkit-justify-content: space-around;
     -ms-flex-pack: space-around;
@@ -4840,7 +4883,7 @@ exports[`<Answer /> should renders tooltip without breaking a tag 1`] = `
 }
 
 @media (max-width:1180px) {
-  .c19 + .c18 {
+  .c20 + .c19 {
     margin-left: 0;
   }
 }
@@ -4871,13 +4914,13 @@ exports[`<Answer /> should renders tooltip without breaking a tag 1`] = `
 }
 
 @media (max-width:600px) {
-  .c9 {
+  .c10 {
     padding: 1.6rem 1rem;
   }
 }
 
 @media print {
-  .c9 {
+  .c10 {
     padding: 0 5pt;
     border: none;
   }
@@ -4898,19 +4941,19 @@ exports[`<Answer /> should renders tooltip without breaking a tag 1`] = `
           data-main-content="true"
         >
           <header
-            class="c4"
+            class="c4 c5"
           >
             <h1
-              class="c5"
+              class="c6"
             >
               <div
-                class="c6"
+                class="c7"
               />
               Article du code
             </h1>
           </header>
           <div
-            class="c7"
+            class="c8"
           >
             <span>
               Mis à jour le : 
@@ -4918,10 +4961,10 @@ exports[`<Answer /> should renders tooltip without breaking a tag 1`] = `
             </span>
           </div>
           <div
-            class="c8"
+            class="c9"
           >
             <div
-              class="c9"
+              class="c10"
             >
               intro de l'article
             </div>
@@ -4938,7 +4981,7 @@ exports[`<Answer /> should renders tooltip without breaking a tag 1`] = `
                     data-tooltip-ref="__tt__0"
                   >
                     <span
-                      class="c10"
+                      class="c11"
                       data-reach-tooltip-trigger=""
                       tabindex="0"
                     >
@@ -4955,32 +4998,32 @@ exports[`<Answer /> should renders tooltip without breaking a tag 1`] = `
         </div>
       </div>
       <div
-        class="c11"
+        class="c12"
       >
         <div
           class="c2"
         >
           <div
-            class="c12"
+            class="c13"
           >
             <h3
-              class="c13 c14"
+              class="c14 c15"
             >
               <div
-                class="c15"
+                class="c16"
               />
               Avez-vous trouvé la réponse à votre question ?
             </h3>
             <p
-              class="c16"
+              class="c17"
             >
               <button
-                class="c17 c18 c19"
+                class="c18 c19 c20"
               >
                 Non
               </button>
               <button
-                class="c17 c18 c19"
+                class="c18 c19 c20"
               >
                 Oui
               </button>
@@ -5008,7 +5051,7 @@ exports[`<Answer /> should renders tooltip without breaking previous word 1`] =
   margin-bottom: 0;
 }
 
-.c11 {
+.c12 {
   padding: 3.2rem 0;
   background-color: transparent;
   color: #3e486e;
@@ -5044,7 +5087,7 @@ exports[`<Answer /> should renders tooltip without breaking previous word 1`] =
   margin-bottom: 0;
 }
 
-.c6 {
+.c7 {
   position: absolute;
   background-color: #7994d4;
   border-radius: 0.6rem;
@@ -5057,7 +5100,7 @@ exports[`<Answer /> should renders tooltip without breaking previous word 1`] =
   transform: translateY(-50%);
 }
 
-.c15 {
+.c16 {
   position: absolute;
   background-color: #f66663;
   border-radius: none;
@@ -5070,7 +5113,7 @@ exports[`<Answer /> should renders tooltip without breaking previous word 1`] =
   transform: translateY(-50%);
 }
 
-.c13 {
+.c14 {
   position: relative;
   margin: 0 0 1rem 0;
   color: #2f3b6c;
@@ -5082,7 +5125,7 @@ exports[`<Answer /> should renders tooltip without breaking previous word 1`] =
   padding-left: 2.4rem;
 }
 
-.c17 {
+.c18 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -5119,16 +5162,16 @@ exports[`<Answer /> should renders tooltip without breaking previous word 1`] =
   opacity: 1;
 }
 
-.c17:link,
-.c17:visited {
+.c18:link,
+.c18:visited {
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #3e486e;
 }
 
-.c17:not([disabled]):hover,
-.c17:not([disabled]):active,
-.c17:not([disabled]):focus {
+.c18:not([disabled]):hover,
+.c18:not([disabled]):active,
+.c18:not([disabled]):focus {
   opacity: 1;
   -webkit-transform: translateY(-2px);
   -ms-transform: translateY(-2px);
@@ -5137,19 +5180,19 @@ exports[`<Answer /> should renders tooltip without breaking previous word 1`] =
   border-color: #dee5ef;
 }
 
-.c17[disabled] {
+.c18[disabled] {
   color: rgba(62,72,110,0.4);
   box-shadow: none;
   cursor: not-allowed;
 }
 
 .c4 {
-  margin: 0 auto 1rem;
+  margin-bottom: 4rem;
   margin-left: -4rem;
   text-align: left;
 }
 
-.c5 {
+.c6 {
   position: relative;
   margin: 0;
   color: #2f3b6c;
@@ -5160,11 +5203,11 @@ exports[`<Answer /> should renders tooltip without breaking previous word 1`] =
   padding-left: 4rem;
 }
 
-.c10 {
+.c11 {
   border-bottom: 1px dotted #7994d4;
 }
 
-.c7 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5172,11 +5215,15 @@ exports[`<Answer /> should renders tooltip without breaking previous word 1`] =
   font-size: 1.4rem;
 }
 
-.c8 {
+.c5 {
+  margin-bottom: 0;
+}
+
+.c9 {
   margin: 3.2rem 0 0 0;
 }
 
-.c12 {
+.c13 {
   padding: 2rem 2.4rem;
   color: #3e486e;
   border-radius: 0.6rem;
@@ -5199,15 +5246,15 @@ exports[`<Answer /> should renders tooltip without breaking previous word 1`] =
   justify-content: stretch;
 }
 
-.c12 > *:first-child {
+.c13 > *:first-child {
   margin-top: 0;
 }
 
-.c12 > *:last-child {
+.c13 > *:last-child {
   margin-bottom: 0;
 }
 
-.c14 {
+.c15 {
   -webkit-flex: 0 1 auto;
   -ms-flex: 0 1 auto;
   flex: 0 1 auto;
@@ -5216,7 +5263,7 @@ exports[`<Answer /> should renders tooltip without breaking previous word 1`] =
   padding-bottom: 1rem;
 }
 
-.c16 {
+.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -5231,7 +5278,7 @@ exports[`<Answer /> should renders tooltip without breaking previous word 1`] =
   margin: 0;
 }
 
-.c19 + .c18 {
+.c20 + .c19 {
   margin-left: 4rem;
 }
 
@@ -5269,19 +5316,20 @@ exports[`<Answer /> should renders tooltip without breaking previous word 1`] =
   width: 80%;
 }
 
-.c9 {
+.c10 {
   padding: 2rem 2.4rem;
   color: #3e486e;
   border-radius: 0.6rem;
   background-color: #f2f5fa;
+  border: 1px solid #f2f5fa;
   margin: 1.6rem auto;
 }
 
-.c9 > *:first-child {
+.c10 > *:first-child {
   margin-top: 0;
 }
 
-.c9 > *:last-child {
+.c10 > *:last-child {
   margin-bottom: 0;
 }
 
@@ -5312,50 +5360,51 @@ exports[`<Answer /> should renders tooltip without breaking previous word 1`] =
 }
 
 @media (max-width:600px) {
-  .c13 {
+  .c14 {
     margin-left: -1rem;
     padding-left: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c13 {
+  .c14 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c17 {
+  .c18 {
     font-size: 1.4rem;
   }
 }
 
 @media (max-width:600px) {
-  .c17 {
+  .c18 {
     padding: 0 3rem;
   }
 }
 
 @media (max-width:600px) {
   .c4 {
+    margin-bottom: 2.4rem;
     margin-left: -1rem;
   }
 }
 
 @media (max-width:600px) {
-  .c5 {
+  .c6 {
     padding-left: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c5 {
-    font-size: 2.8rem;
+  .c6 {
+    font-size: 2.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c7 {
+  .c8 {
     -webkit-flex-flow: column;
     -ms-flex-flow: column;
     flex-flow: column;
@@ -5367,26 +5416,26 @@ exports[`<Answer /> should renders tooltip without breaking previous word 1`] =
 }
 
 @media (max-width:600px) {
-  .c8 {
+  .c9 {
     margin-top: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c12 {
+  .c13 {
     padding: 1.6rem 1rem;
   }
 }
 
 @media print {
-  .c12 {
+  .c13 {
     padding: 0 5pt;
     border: none;
   }
 }
 
 @media (max-width:1180px) {
-  .c12 {
+  .c13 {
     -webkit-flex-direction: column;
     -ms-flex-direction: column;
     flex-direction: column;
@@ -5401,20 +5450,20 @@ exports[`<Answer /> should renders tooltip without breaking previous word 1`] =
 }
 
 @media (max-width:1180px) {
-  .c14 {
+  .c15 {
     margin-bottom: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c14 {
+  .c15 {
     padding-top: 0;
     padding-bottom: 0;
   }
 }
 
 @media (max-width:1180px) {
-  .c16 {
+  .c17 {
     -webkit-box-pack: space-around;
     -webkit-justify-content: space-around;
     -ms-flex-pack: space-around;
@@ -5423,7 +5472,7 @@ exports[`<Answer /> should renders tooltip without breaking previous word 1`] =
 }
 
 @media (max-width:1180px) {
-  .c19 + .c18 {
+  .c20 + .c19 {
     margin-left: 0;
   }
 }
@@ -5454,13 +5503,13 @@ exports[`<Answer /> should renders tooltip without breaking previous word 1`] =
 }
 
 @media (max-width:600px) {
-  .c9 {
+  .c10 {
     padding: 1.6rem 1rem;
   }
 }
 
 @media print {
-  .c9 {
+  .c10 {
     padding: 0 5pt;
     border: none;
   }
@@ -5481,19 +5530,19 @@ exports[`<Answer /> should renders tooltip without breaking previous word 1`] =
           data-main-content="true"
         >
           <header
-            class="c4"
+            class="c4 c5"
           >
             <h1
-              class="c5"
+              class="c6"
             >
               <div
-                class="c6"
+                class="c7"
               />
               Article du code
             </h1>
           </header>
           <div
-            class="c7"
+            class="c8"
           >
             <span>
               Mis à jour le : 
@@ -5501,10 +5550,10 @@ exports[`<Answer /> should renders tooltip without breaking previous word 1`] =
             </span>
           </div>
           <div
-            class="c8"
+            class="c9"
           >
             <div
-              class="c9"
+              class="c10"
             >
               intro de l'article
             </div>
@@ -5516,7 +5565,7 @@ exports[`<Answer /> should renders tooltip without breaking previous word 1`] =
                   data-tooltip-ref="__tt__0"
                 >
                   <span
-                    class="c10"
+                    class="c11"
                     data-reach-tooltip-trigger=""
                     tabindex="0"
                   >
@@ -5528,7 +5577,7 @@ exports[`<Answer /> should renders tooltip without breaking previous word 1`] =
                   data-tooltip-ref="__tt__1"
                 >
                   <span
-                    class="c10"
+                    class="c11"
                     data-reach-tooltip-trigger=""
                     tabindex="0"
                   >
@@ -5540,7 +5589,7 @@ exports[`<Answer /> should renders tooltip without breaking previous word 1`] =
                   data-tooltip-ref="__tt__2"
                 >
                   <span
-                    class="c10"
+                    class="c11"
                     data-reach-tooltip-trigger=""
                     tabindex="0"
                   >
@@ -5557,32 +5606,32 @@ exports[`<Answer /> should renders tooltip without breaking previous word 1`] =
         </div>
       </div>
       <div
-        class="c11"
+        class="c12"
       >
         <div
           class="c2"
         >
           <div
-            class="c12"
+            class="c13"
           >
             <h3
-              class="c13 c14"
+              class="c14 c15"
             >
               <div
-                class="c15"
+                class="c16"
               />
               Avez-vous trouvé la réponse à votre question ?
             </h3>
             <p
-              class="c16"
+              class="c17"
             >
               <button
-                class="c17 c18 c19"
+                class="c18 c19 c20"
               >
                 Non
               </button>
               <button
-                class="c17 c18 c19"
+                class="c18 c19 c20"
               >
                 Oui
               </button>
diff --git a/packages/code-du-travail-frontend/src/common/__tests__/__snapshots__/Article.test.js.snap b/packages/code-du-travail-frontend/src/common/__tests__/__snapshots__/Article.test.js.snap
index 13529a6ebf..18247308c3 100644
--- a/packages/code-du-travail-frontend/src/common/__tests__/__snapshots__/Article.test.js.snap
+++ b/packages/code-du-travail-frontend/src/common/__tests__/__snapshots__/Article.test.js.snap
@@ -45,7 +45,7 @@ exports[`<Article /> should render 1`] = `
   margin-bottom: 0;
 }
 
-.c4 {
+.c5 {
   position: absolute;
   background-color: #7994d4;
   border-radius: 0.6rem;
@@ -59,12 +59,12 @@ exports[`<Article /> should render 1`] = `
 }
 
 .c2 {
-  margin: 0 auto 1rem;
+  margin-bottom: 4rem;
   margin-left: -4rem;
   text-align: left;
 }
 
-.c3 {
+.c4 {
   position: relative;
   margin: 0;
   color: #2f3b6c;
@@ -75,7 +75,7 @@ exports[`<Article /> should render 1`] = `
   padding-left: 4rem;
 }
 
-.c5 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -83,7 +83,11 @@ exports[`<Article /> should render 1`] = `
   font-size: 1.4rem;
 }
 
-.c6 {
+.c3 {
+  margin-bottom: 0;
+}
+
+.c7 {
   margin: 3.2rem 0 0 0;
 }
 
@@ -115,24 +119,25 @@ exports[`<Article /> should render 1`] = `
 
 @media (max-width:600px) {
   .c2 {
+    margin-bottom: 2.4rem;
     margin-left: -1rem;
   }
 }
 
 @media (max-width:600px) {
-  .c3 {
+  .c4 {
     padding-left: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c3 {
-    font-size: 2.8rem;
+  .c4 {
+    font-size: 2.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c5 {
+  .c6 {
     -webkit-flex-flow: column;
     -ms-flex-flow: column;
     flex-flow: column;
@@ -144,7 +149,7 @@ exports[`<Article /> should render 1`] = `
 }
 
 @media (max-width:600px) {
-  .c6 {
+  .c7 {
     margin-top: 1.6rem;
   }
 }
@@ -158,19 +163,19 @@ exports[`<Article /> should render 1`] = `
       data-main-content="true"
     >
       <header
-        class="c2"
+        class="c2 c3"
       >
         <h1
-          class="c3"
+          class="c4"
         >
           <div
-            class="c4"
+            class="c5"
           />
           Contrat de travail et formalités d'embauche de l'assistante maternelle
         </h1>
       </header>
       <div
-        class="c5"
+        class="c6"
       >
         <span>
           Mis à jour le : 
@@ -178,7 +183,7 @@ exports[`<Article /> should render 1`] = `
         </span>
       </div>
       <div
-        class="c6"
+        class="c7"
       >
         this is an Article
       </div>
diff --git a/packages/code-du-travail-frontend/src/common/__tests__/__snapshots__/RelatedItems.test.js.snap b/packages/code-du-travail-frontend/src/common/__tests__/__snapshots__/RelatedItems.test.js.snap
index 41cf0986cd..3d65e55db9 100644
--- a/packages/code-du-travail-frontend/src/common/__tests__/__snapshots__/RelatedItems.test.js.snap
+++ b/packages/code-du-travail-frontend/src/common/__tests__/__snapshots__/RelatedItems.test.js.snap
@@ -115,6 +115,7 @@ exports[`<Article /> should render 1`] = `
   font-weight: 600;
   font-size: 1.6rem;
   line-height: 1.625;
+  vertical-align: baseline;
   text-align: left;
   background: none;
   border: none;
diff --git a/packages/code-du-travail-frontend/src/common/tiles/__tests__/__snapshots__/Custom.test.js.snap b/packages/code-du-travail-frontend/src/common/tiles/__tests__/__snapshots__/Custom.test.js.snap
index 9819d08c06..70eff500d4 100644
--- a/packages/code-du-travail-frontend/src/common/tiles/__tests__/__snapshots__/Custom.test.js.snap
+++ b/packages/code-du-travail-frontend/src/common/tiles/__tests__/__snapshots__/Custom.test.js.snap
@@ -75,6 +75,7 @@ exports[`<Article /> should render 1`] = `
   font-weight: 600;
   font-size: 1.6rem;
   line-height: 1.625;
+  vertical-align: baseline;
   text-align: left;
   background: none;
   border: none;
diff --git a/packages/code-du-travail-frontend/src/contributions/Contribution.js b/packages/code-du-travail-frontend/src/contributions/Contribution.js
index 8fa1b5c177..acfdc615e7 100644
--- a/packages/code-du-travail-frontend/src/contributions/Contribution.js
+++ b/packages/code-du-travail-frontend/src/contributions/Contribution.js
@@ -2,16 +2,20 @@ import React from "react";
 import styled from "styled-components";
 import Link from "next/link";
 import {
-  Alert,
+  Badge,
   Button,
   Heading,
+  icons,
+  IconStripe,
+  Section,
   Subtitle,
   theme,
-  Title
+  Title,
+  Toast,
+  Wrapper
 } from "@socialgouv/react-ui";
 import { SOURCES, getRouteBySource } from "@cdt/sources";
 import slugify from "@cdt/data/slugify";
-import { formatIdcc } from "@cdt/data/lib";
 
 import SearchConvention from "../../src/conventions/Search/Form";
 import rehypeToReact from "./rehypeToReact";
@@ -87,94 +91,117 @@ const References = ({ references = [] }) => {
   );
 };
 
-// search CC + display filtered answer
-const AnswersConventions = ({ answers }) => {
-  const [ccInfo, setCcInfo] = useLocalStorage("convention", {});
-  const { convention = {} } = ccInfo;
-  const answer =
-    convention && answers.find(a => parseInt(a.idcc, 10) === convention.num);
+const Contribution = ({ answers, content }) => {
+  const hasConventionAnswers =
+    answers.conventions && answers.conventions.length > 0;
+  const [{ convention = {} }, setCcInfo] = useLocalStorage("convention", {});
+  const conventionAnswer =
+    answers.conventions &&
+    answers.conventions.find(
+      answer => parseInt(answer.idcc, 10) === convention.num
+    );
   // ensure we have valid data in ccInfo
-  const isCcDetected =
-    ccInfo && convention.id && convention.num && convention.title;
+  const isCcDetected = convention.id && convention.num && convention.title;
   return (
-    <div>
-      {!isCcDetected && (
-        <SearchConvention
-          title=""
-          onSelectConvention={({ convention, label }) =>
-            setCcInfo({ convention, label })
-          }
-        />
-      )}
-      {isCcDetected && (
+    <>
+      {hasConventionAnswers && (
         <>
-          <Heading as="h4">
-            <span role="img" aria-label="Icone convention collective">
-              📖
-            </span>{" "}
-            {convention.url ? (
-              <a
-                href={convention.url}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                {convention.title} (IDCC {formatIdcc(convention.num)})
-              </a>
-            ) : (
+          <Badge />
+          <CustomWrapper variant="dark">
+            <IconStripe icon={icons.Custom}>
+              <CustomTitle>Page personnalisable</CustomTitle>
+              {isCcDetected ? (
+                <>
+                  Cette page a été personnalisée avec l’ajout des{" "}
+                  <a href="#customisation">
+                    informations de la convention collective :{" "}
+                    {convention.shortTitle}
+                  </a>
+                </>
+              ) : (
+                <>
+                  Le contenu de cette page peut être personnalisé en fonction de
+                  votre situation.{" "}
+                  <a href="#customisation">Voir en bas de page</a> pour
+                  renseigner votre covention collective.
+                </>
+              )}
+            </IconStripe>
+          </CustomWrapper>
+        </>
+      )}
+      {answers.generic && (
+        <section>
+          <Title leftStripped>Que dit le code du travail&nbsp;?</Title>
+          <Mdx
+            markdown={answers.generic.markdown}
+            components={rehypeToReact(content)}
+          />
+        </section>
+      )}
+      {hasConventionAnswers && (
+        <StyledSection>
+          <Wrapper variant="dark">
+            <StyledTitle
+              shift={spacings.xmedium}
+              variant="primary"
+              marginTop={Boolean(answers.generic)}
+              id="customisation"
+            >
+              Que dit votre convention collective&nbsp;?
+            </StyledTitle>
+            {!isCcDetected && (
+              <SearchConvention
+                title=""
+                onSelectConvention={({ convention, label }) =>
+                  setCcInfo({ convention, label })
+                }
+              />
+            )}
+            {isCcDetected && (
               <>
-                {convention.title} (IDCC {formatIdcc(convention.num)})
+                <StyledDiv>
+                  Ce contenu est personnalisé avec les informations de la
+                  convention collective:
+                </StyledDiv>
+                <Toast variant="primary" onRemove={() => setCcInfo({})}>
+                  {convention.shortTitle}
+                </Toast>
+                {(conventionAnswer && (
+                  <>
+                    <MdxWrapper>
+                      <Mdx
+                        markdown={conventionAnswer.markdown}
+                        components={rehypeToReact}
+                      />
+                    </MdxWrapper>
+
+                    <References references={conventionAnswer.references} />
+                  </>
+                )) || (
+                  <>
+                    <Section>
+                      Désolé, nous n’avons pas de réponse pour cette convention
+                      collective.
+                    </Section>
+                  </>
+                )}
+                <ButtonWrapper>
+                  <Button variant="primary" onClick={() => setCcInfo({})}>
+                    Changer de convention collective
+                    <StyledCloseIcon />
+                  </Button>
+                </ButtonWrapper>
               </>
             )}
-          </Heading>
-          {(answer && (
-            <>
-              <MdxWrapper>
-                <Mdx markdown={answer.markdown} components={rehypeToReact} />
-              </MdxWrapper>
-
-              <References references={answer.references} />
-            </>
-          )) || (
-            <>
-              <NoConventionAlert variant="secondary">
-                Désolé nous n&apos;avons pas de réponse pour cette convention
-                collective
-              </NoConventionAlert>
-            </>
-          )}
-          <br />
-          <Button variant="primary" onClick={() => setCcInfo({})}>
-            Changer de convention collective
-          </Button>
-        </>
+          </Wrapper>
+        </StyledSection>
       )}
-    </div>
+    </>
   );
 };
 
-const Contribution = ({ answers, content }) => (
-  <>
-    {answers.generic && (
-      <section>
-        <Title leftStripped>Que dit le code du travail ?</Title>
-        <Mdx
-          markdown={answers.generic.markdown}
-          components={rehypeToReact(content)}
-        />
-      </section>
-    )}
-    {answers.conventions && answers.conventions.length && (
-      <section>
-        <StyledTitle marginTop={Boolean(answers.generic)}>
-          Que dit votre convention collective ?
-        </StyledTitle>
-        <AnswersConventions answers={answers.conventions} />
-      </section>
-    )}
-  </>
-);
-
-const { spacings } = theme;
+const { breakpoints, fonts, spacings } = theme;
 
 const LineRef = styled.li`
   margin: 5px 0;
@@ -185,12 +212,43 @@ const MdxWrapper = styled.div`
   margin-bottom: ${spacings.medium};
 `;
 
+const StyledSection = styled(Section)`
+  padding-bottom: 0;
+`;
+
+const CustomWrapper = styled(Wrapper)`
+  margin-bottom: ${spacings.large};
+  @media (max-width: ${breakpoints.mobile}) {
+    margin-bottom: ${spacings.medium};
+  }
+`;
+
+const CustomTitle = styled.div`
+  color: ${({ theme }) => theme.primary};
+  font-weight: 600;
+  font-size: ${fonts.sizes.headings.small};
+  @media (max-width: ${breakpoints.mobile}) {
+    font-size: ${fonts.sizes.default};
+  }
+`;
+
+const StyledDiv = styled.div`
+  margin-bottom: ${spacings.tiny};
+  color: ${({ theme }) => theme.primary};
+`;
+
 const StyledTitle = styled(Title)`
   margin-top: ${({ marginTop }) => (marginTop ? spacings.large : "0")};
 `;
 
-const NoConventionAlert = styled(Alert)`
-  margin: 40px 0;
+const ButtonWrapper = styled.div`
+  margin-bottom: ${spacings.base};
+  text-align: center;
+`;
+
+const StyledCloseIcon = styled(icons.Close)`
+  width: 2.8rem;
+  margin-left: ${spacings.base};
 `;
 
 export default Contribution;
diff --git a/packages/code-du-travail-frontend/src/contributions/__tests__/__snapshots__/Contribution.test.js.snap b/packages/code-du-travail-frontend/src/contributions/__tests__/__snapshots__/Contribution.test.js.snap
index 102d0562da..a20f7e64c3 100644
--- a/packages/code-du-travail-frontend/src/contributions/__tests__/__snapshots__/Contribution.test.js.snap
+++ b/packages/code-du-travail-frontend/src/contributions/__tests__/__snapshots__/Contribution.test.js.snap
@@ -1,7 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Contribution /> should NOT render invalid preselected convention 1`] = `
-.c2 {
+.c10 {
+  padding: 3.2rem 0;
+  background-color: transparent;
+  color: #3e486e;
+}
+
+.c12 {
+  padding: 2rem 2.4rem;
+  color: #3e486e;
+  border-radius: 0.6rem;
+  background-color: #f2f5fa;
+  border: 1px solid #f2f5fa;
+}
+
+.c12 > *:first-child {
+  margin-top: 0;
+}
+
+.c12 > *:last-child {
+  margin-bottom: 0;
+}
+
+.c9 {
   position: absolute;
   background-color: #7994d4;
   border-radius: 0.6rem;
@@ -14,17 +36,112 @@ exports[`<Contribution /> should NOT render invalid preselected convention 1`] =
   transform: translateY(-50%);
 }
 
-.c4 {
-  position: relative;
-  margin: 0 0 1rem 0;
-  color: #2f3b6c;
-  font-weight: 600;
-  font-size: 1.8rem;
-  font-family: "Open Sans",sans-serif;
-  line-height: 1.25;
+.c16 {
+  position: absolute;
+  background-color: #f66663;
+  border-radius: none;
+  top: 50%;
+  left: 0;
+  width: 0.4rem;
+  height: 100%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
 }
 
-.c6 {
+.c0 {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 5rem;
+  height: 5rem;
+  overflow: hidden;
+  color: #fff;
+  border-radius: 0 0.6rem 0 0;
+}
+
+.c0:before {
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  border-color: transparent #f66663 transparent transparent;
+  border-style: solid;
+  border-width: 0 5rem 5rem 0;
+  content: "";
+}
+
+.c1 {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  width: 3rem;
+  height: 3rem;
+}
+
+.c20 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  box-sizing: content-box;
+  font-weight: 500;
+  font-size: 1.6rem;
+  line-height: 1.125em;
+  text-align: center;
+  vertical-align: middle;
+  border: 1px solid;
+  border-radius: 0.6rem;
+  cursor: pointer;
+  -webkit-transition: background-color 250ms linear, border-color 250ms linear,-webkit-transform 100ms linear;
+  -webkit-transition: background-color 250ms linear, border-color 250ms linear,transform 100ms linear;
+  transition: background-color 250ms linear, border-color 250ms linear,transform 100ms linear;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  height: 4rem;
+  padding: 0 1rem;
+  color: #3e486e;
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+  opacity: 1;
+}
+
+.c20:link,
+.c20:visited {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #3e486e;
+}
+
+.c20:not([disabled]):hover,
+.c20:not([disabled]):active,
+.c20:not([disabled]):focus {
+  opacity: 0.6;
+  -webkit-transform: translateY(-2px);
+  -ms-transform: translateY(-2px);
+  transform: translateY(-2px);
+  background: transparent;
+  border-color: transparent;
+}
+
+.c20[disabled] {
+  color: rgba(62,72,110,0.4);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+.c23 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -61,16 +178,16 @@ exports[`<Contribution /> should NOT render invalid preselected convention 1`] =
   opacity: 1;
 }
 
-.c6:link,
-.c6:visited {
+.c23:link,
+.c23:visited {
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #fff;
 }
 
-.c6:not([disabled]):hover,
-.c6:not([disabled]):active,
-.c6:not([disabled]):focus {
+.c23:not([disabled]):hover,
+.c23:not([disabled]):active,
+.c23:not([disabled]):focus {
   opacity: 1;
   -webkit-transform: translateY(-2px);
   -ms-transform: translateY(-2px);
@@ -79,18 +196,89 @@ exports[`<Contribution /> should NOT render invalid preselected convention 1`] =
   border-color: #f99593;
 }
 
-.c6[disabled] {
+.c23[disabled] {
   color: rgba(255,255,255,0.4);
   box-shadow: none;
   cursor: not-allowed;
 }
 
-.c0 {
-  margin: 0 auto 1rem;
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: stretch;
+  -webkit-justify-content: stretch;
+  -ms-flex-pack: stretch;
+  justify-content: stretch;
+}
+
+.c4 {
+  display: block;
+  -webkit-flex: 0 0 4.2rem;
+  -ms-flex: 0 0 4.2rem;
+  flex: 0 0 4.2rem;
+  margin-right: 2.4rem;
+}
+
+.c5 {
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+}
+
+.c18 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  width: auto;
+  min-height: 48px;
+  color: #3e486e;
+  background-color: #fff;
+  border-color: #f66663;
+  border-style: solid;
+  border-width: 2px;
+  border-radius: 0.6rem;
+  box-shadow: none;
+  -webkit-animation: none;
+  animation: none;
+}
+
+.c19 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  padding: 1rem 1.6rem;
   text-align: left;
 }
 
-.c1 {
+.c21 {
+  margin-top: 0.4rem;
+  color: #f66663;
+}
+
+.c7 {
+  margin-bottom: 1.6rem;
+  margin-left: auto;
+  text-align: left;
+}
+
+.c13 {
+  margin-bottom: 1.6rem;
+  margin-left: -2.4rem;
+  text-align: left;
+}
+
+.c8 {
   position: relative;
   margin: 0;
   color: #2f3b6c;
@@ -102,70 +290,264 @@ exports[`<Contribution /> should NOT render invalid preselected convention 1`] =
   text-align: left;
 }
 
-.c3 {
-  margin-top: 3.2rem;
+.c15 {
+  position: relative;
+  margin: 0;
+  color: #2f3b6c;
+  font-weight: normal;
+  font-size: 2.8rem;
+  font-family: "Merriweather",serif;
+  line-height: 1.25;
+  padding-left: 2.4rem;
+  text-align: left;
 }
 
-.c5 {
-  margin-bottom: 1.6rem;
-  padding: 1rem 2rem;
+.c11 {
+  padding-bottom: 0;
+}
+
+.c2 {
+  padding: 2rem 2.4rem;
   color: #3e486e;
-  background-color: #f2f5fa;
-  border: 1px solid transparent;
   border-radius: 0.6rem;
-  margin: 40px 0;
+  background-color: #f2f5fa;
+  border: 1px solid #f2f5fa;
+  margin-bottom: 3.2rem;
 }
 
-.c5 > *:first-child {
+.c2 > *:first-child {
   margin-top: 0;
 }
 
-.c5 > *:last-child {
+.c2 > *:last-child {
   margin-bottom: 0;
 }
 
+.c6 {
+  color: #f66663;
+  font-weight: 600;
+  font-size: 1.8rem;
+}
+
+.c17 {
+  margin-bottom: 0.4rem;
+  color: #f66663;
+}
+
+.c14 {
+  margin-top: 3.2rem;
+}
+
+.c22 {
+  margin-bottom: 1.6rem;
+  text-align: center;
+}
+
+.c24 {
+  width: 2.8rem;
+  margin-left: 1.6rem;
+}
+
 @media (max-width:600px) {
-  .c4 {
-    font-size: 1.6rem;
+  .c12 {
+    padding: 1.6rem 1rem;
+  }
+}
+
+@media print {
+  .c12 {
+    padding: 0 5pt;
+    border: none;
   }
 }
 
 @media (max-width:600px) {
-  .c6 {
+  .c20 {
     font-size: 1.4rem;
   }
 }
 
 @media (max-width:600px) {
-  .c6 {
+  .c23 {
+    font-size: 1.4rem;
+  }
+}
+
+@media (max-width:600px) {
+  .c23 {
     padding: 0 3rem;
   }
 }
 
 @media (max-width:600px) {
-  .c1 {
+  .c4 {
+    -webkit-flex: 0 0 3.4rem;
+    -ms-flex: 0 0 3.4rem;
+    flex: 0 0 3.4rem;
+    margin-right: 1rem;
+  }
+}
+
+@media (max-width:600px) {
+  .c7 {
+    margin-bottom: 1rem;
+    margin-left: auto;
+  }
+}
+
+@media (max-width:600px) {
+  .c13 {
+    margin-bottom: 1rem;
+    margin-left: -1rem;
+  }
+}
+
+@media (max-width:600px) {
+  .c8 {
     padding-left: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c1 {
+  .c8 {
+    font-size: 2.2rem;
+  }
+}
+
+@media (max-width:600px) {
+  .c15 {
+    padding-left: 1.6rem;
+  }
+}
+
+@media (max-width:600px) {
+  .c15 {
     font-size: 2.2rem;
   }
 }
 
+@media (max-width:600px) {
+  .c2 {
+    padding: 1.6rem 1rem;
+  }
+}
+
+@media print {
+  .c2 {
+    padding: 0 5pt;
+    border: none;
+  }
+}
+
+@media (max-width:600px) {
+  .c2 {
+    margin-bottom: 2rem;
+  }
+}
+
+@media (max-width:600px) {
+  .c6 {
+    font-size: 1.6rem;
+  }
+}
+
 <div>
+  <div
+    class="c0"
+  >
+    <div
+      class="c1"
+    >
+      <svg
+        fill="none"
+        viewBox="0 0 32 32"
+      >
+        <path
+          clip-rule="evenodd"
+          d="M11.938 16.5a3.548 3.548 0 013.562-3.563 3.548 3.548 0 013.563 3.563 3.548 3.548 0 01-3.563 3.563 3.548 3.548 0 01-3.563-3.563zm2.062 0c0 .84.66 1.5 1.5 1.5s1.5-.66 1.5-1.5-.66-1.5-1.5-1.5-1.5.66-1.5 1.5z"
+          fill="currentColor"
+          fill-rule="evenodd"
+        />
+        <path
+          clip-rule="evenodd"
+          d="M25 14.838v3.404l-1.663.87-.474 1.109.554 1.82-2.375 2.376-1.9-.555-1.109.476-.87 1.662h-3.405l-.87-1.663-1.109-.474-1.82.554-2.376-2.375.554-1.9-.475-1.109L6 18.163v-3.405l1.662-.87.475-1.109-.554-1.82 2.375-2.376 1.9.554 1.109-.475.87-1.662h3.405l.87 1.662 1.109.475 1.82-.554 2.376 2.375-.555 1.9.476 1.109 1.662.87zm-4.1 5.112l.825-2.025L23 17.25v-1.5l-1.2-.6-.825-2.025.375-1.35-1.05-1.05-1.35.375-2.025-.825L16.25 9h-1.5l-.6 1.2-2.025.825-1.35-.375-1.05 1.05.375 1.35-.825 2.025L8 15.75v1.5l1.2.6.825 2.025-.375 1.35 1.05 1.05 1.35-.375 2.025.825L14.75 24h1.5l.6-1.2 2.025-.825 1.35.375 1.05-1.05-.375-1.35z"
+          fill="currentColor"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="c2"
+  >
+    <div
+      class="c3"
+    >
+      <div
+        class="c4"
+      >
+        <svg
+          fill="none"
+          viewBox="0 0 52 52"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M17 2L6 13v2c0 1 .398 1 1.076 1h9.693C18.554 16 20 14.657 20 13V4h19a1 1 0 011 1v27h2V5a3 3 0 00-3-3H17zm-.23 12H8L18 4v9c0 .552-.636 1-1.23 1z"
+            fill="#4E6896"
+            fill-rule="evenodd"
+          />
+          <path
+            d="M27 50v-2H9a1 1 0 01-1-1V24s0-1-1-1-1 1-1 1v23a3 3 0 003 3h18zM7 20a1 1 0 100-2 1 1 0 000 2z"
+            fill="#4E6896"
+          />
+          <path
+            d="M15.053 20C14.47 20 14 20.448 14 21s.471 1 1.053 1h17.894C33.53 22 34 21.552 34 21s-.471-1-1.053-1H15.053zM14 27c0-.552.471-1 1.053-1h17.894c.582 0 1.053.448 1.053 1s-.471 1-1.053 1H15.053C14.47 28 14 27.552 14 27z"
+            fill="#FF7067"
+          />
+          <path
+            clip-rule="evenodd"
+            d="M36.5 37.938a3.548 3.548 0 00-3.563 3.562 3.548 3.548 0 003.563 3.563 3.548 3.548 0 003.563-3.563 3.548 3.548 0 00-3.563-3.563zm0 5.062c-.84 0-1.5-.66-1.5-1.5s.66-1.5 1.5-1.5 1.5.66 1.5 1.5-.66 1.5-1.5 1.5z"
+            fill="#FF7067"
+            fill-rule="evenodd"
+          />
+          <path
+            clip-rule="evenodd"
+            d="M46 43.242v-3.404l-1.663-.871-.475-1.109.555-1.9-2.375-2.375-1.821.555-1.108-.475L38.241 32h-3.404l-.871 1.663-1.109.475-1.9-.555-2.375 2.375.555 1.821-.476 1.108-1.662.871v3.404l1.663.871.474 1.109-.554 1.9 2.375 2.375 1.821-.555 1.108.475.871 1.663h3.404l.871-1.663 1.109-.475 1.9.555 2.375-2.375-.555-1.821.475-1.108L46 43.241zm-3.275-.317L41.9 44.95l.375 1.35-1.05 1.05-1.35-.375-2.025.825-.6 1.2h-1.5l-.675-1.275-2.025-.825-1.35.375-1.05-1.05.375-1.35-.825-2.025-1.2-.6v-1.5l1.275-.675.825-2.025-.375-1.35 1.05-1.05 1.35.375 2.025-.825.6-1.2h1.5l.675 1.275 2.025.825 1.35-.375 1.05 1.05-.375 1.35.825 2.025 1.2.6v1.5l-1.275.675z"
+            fill="#FF7067"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </div>
+      <div
+        class="c5"
+      >
+        <div
+          class="c6"
+        >
+          Page personnalisable
+        </div>
+        Cette page a été personnalisée avec l’ajout des
+         
+        <a
+          href="#customisation"
+        >
+          informations de la convention collective :
+           
+        </a>
+      </div>
+    </div>
+  </div>
   <section>
     <header
-      class="c0"
+      class="c7"
     >
       <h2
-        class="c1"
+        class="c8"
       >
         <div
-          class="c2"
+          class="c9"
         />
-        Que dit le code du travail ?
+        Que dit le code du travail ?
       </h2>
     </header>
     <div>
@@ -177,59 +559,124 @@ exports[`<Contribution /> should NOT render invalid preselected convention 1`] =
       </p>
     </div>
   </section>
-  <section>
-    <header
-      class="c0 c3"
+  <div
+    class="c10 c11"
+  >
+    <div
+      class="c12"
     >
-      <h2
-        class="c1"
+      <header
+        class="c13 c14"
+        id="customisation"
+      >
+        <h2
+          class="c15"
+        >
+          <div
+            class="c16"
+          />
+          Que dit votre convention collective ?
+        </h2>
+      </header>
+      <div
+        class="c17"
+      >
+        Ce contenu est personnalisé avec les informations de la convention collective:
+      </div>
+      <div
+        class="c18"
       >
         <div
-          class="c2"
+          class="c19"
+          role="alert"
         />
-        Que dit votre convention collective ?
-      </h2>
-    </header>
-    <div>
-      <h4
-        class="c4"
-      >
-        <span
-          aria-label="Icone convention collective"
-          role="img"
-        >
-          📖
-        </span>
-         
-        <a
-          href="https://www.legifrance.gouv.fr/affichIDCC.do?idConvention=123"
-          rel="noopener noreferrer"
-          target="_blank"
+        <button
+          aria-label="Fermer"
+          class="c20"
         >
-          preselected convention
-           (IDCC 
-          9999
-          )
-        </a>
-      </h4>
+          <svg
+            class="c21"
+            fill="none"
+            height="24"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            variant="primary"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <line
+              x1="18"
+              x2="6"
+              y1="6"
+              y2="18"
+            />
+            <line
+              x1="6"
+              x2="18"
+              y1="6"
+              y2="18"
+            />
+          </svg>
+        </button>
+      </div>
       <div
-        class="c5"
+        class="c10"
       >
-        Désolé nous n'avons pas de réponse pour cette convention collective
+        Désolé, nous n’avons pas de réponse pour cette convention collective.
       </div>
-      <br />
-      <button
-        class="c6"
+      <div
+        class="c22"
       >
-        Changer de convention collective
-      </button>
+        <button
+          class="c23"
+        >
+          Changer de convention collective
+          <svg
+            class="c24"
+            fill="none"
+            viewBox="0 0 32 32"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M14.752 16.5L7.258 8.591A.957.957 0 017 7.932c0-.247.093-.484.259-.659A.858.858 0 017.883 7a.86.86 0 01.625.273L16 15.183l7.492-7.91A.859.859 0 0124.117 7c.234 0 .459.098.624.273a.957.957 0 01.259.659.957.957 0 01-.259.66L17.249 16.5l7.492 7.909a.958.958 0 01.259.659.957.957 0 01-.259.659.859.859 0 01-.624.273.86.86 0 01-.625-.273L16 17.817l-7.492 7.91a.859.859 0 01-.625.273.859.859 0 01-.624-.273.957.957 0 01-.259-.659.96.96 0 01.259-.66l7.492-7.908z"
+              fill="currentColor"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </button>
+      </div>
     </div>
-  </section>
+  </div>
 </div>
 `;
 
 exports[`<Contribution /> should render answer references 1`] = `
-.c2 {
+.c10 {
+  padding: 3.2rem 0;
+  background-color: transparent;
+  color: #3e486e;
+}
+
+.c12 {
+  padding: 2rem 2.4rem;
+  color: #3e486e;
+  border-radius: 0.6rem;
+  background-color: #f2f5fa;
+  border: 1px solid #f2f5fa;
+}
+
+.c12 > *:first-child {
+  margin-top: 0;
+}
+
+.c12 > *:last-child {
+  margin-bottom: 0;
+}
+
+.c9 {
   position: absolute;
   background-color: #7994d4;
   border-radius: 0.6rem;
@@ -242,7 +689,20 @@ exports[`<Contribution /> should render answer references 1`] = `
   transform: translateY(-50%);
 }
 
-.c4 {
+.c16 {
+  position: absolute;
+  background-color: #f66663;
+  border-radius: none;
+  top: 50%;
+  left: 0;
+  width: 0.4rem;
+  height: 100%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+.c23 {
   position: relative;
   margin: 0 0 1rem 0;
   color: #2f3b6c;
@@ -252,7 +712,99 @@ exports[`<Contribution /> should render answer references 1`] = `
   line-height: 1.25;
 }
 
-.c8 {
+.c0 {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 5rem;
+  height: 5rem;
+  overflow: hidden;
+  color: #fff;
+  border-radius: 0 0.6rem 0 0;
+}
+
+.c0:before {
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  border-color: transparent #f66663 transparent transparent;
+  border-style: solid;
+  border-width: 0 5rem 5rem 0;
+  content: "";
+}
+
+.c1 {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  width: 3rem;
+  height: 3rem;
+}
+
+.c20 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  box-sizing: content-box;
+  font-weight: 500;
+  font-size: 1.6rem;
+  line-height: 1.125em;
+  text-align: center;
+  vertical-align: middle;
+  border: 1px solid;
+  border-radius: 0.6rem;
+  cursor: pointer;
+  -webkit-transition: background-color 250ms linear, border-color 250ms linear,-webkit-transform 100ms linear;
+  -webkit-transition: background-color 250ms linear, border-color 250ms linear,transform 100ms linear;
+  transition: background-color 250ms linear, border-color 250ms linear,transform 100ms linear;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  height: 4rem;
+  padding: 0 1rem;
+  color: #3e486e;
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+  opacity: 1;
+}
+
+.c20:link,
+.c20:visited {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #3e486e;
+}
+
+.c20:not([disabled]):hover,
+.c20:not([disabled]):active,
+.c20:not([disabled]):focus {
+  opacity: 0.6;
+  -webkit-transform: translateY(-2px);
+  -ms-transform: translateY(-2px);
+  transform: translateY(-2px);
+  background: transparent;
+  border-color: transparent;
+}
+
+.c20[disabled] {
+  color: rgba(62,72,110,0.4);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+.c27 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -289,16 +841,16 @@ exports[`<Contribution /> should render answer references 1`] = `
   opacity: 1;
 }
 
-.c8:link,
-.c8:visited {
+.c27:link,
+.c27:visited {
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #fff;
 }
 
-.c8:not([disabled]):hover,
-.c8:not([disabled]):active,
-.c8:not([disabled]):focus {
+.c27:not([disabled]):hover,
+.c27:not([disabled]):active,
+.c27:not([disabled]):focus {
   opacity: 1;
   -webkit-transform: translateY(-2px);
   -ms-transform: translateY(-2px);
@@ -307,13 +859,38 @@ exports[`<Contribution /> should render answer references 1`] = `
   border-color: #f99593;
 }
 
-.c8[disabled] {
+.c27[disabled] {
   color: rgba(255,255,255,0.4);
   box-shadow: none;
   cursor: not-allowed;
 }
 
-.c6 {
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: stretch;
+  -webkit-justify-content: stretch;
+  -ms-flex-pack: stretch;
+  justify-content: stretch;
+}
+
+.c4 {
+  display: block;
+  -webkit-flex: 0 0 4.2rem;
+  -ms-flex: 0 0 4.2rem;
+  flex: 0 0 4.2rem;
+  margin-right: 2.4rem;
+}
+
+.c5 {
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+}
+
+.c24 {
   display: block;
   margin: 0 0 1rem 0;
   color: #4d73b8;
@@ -324,78 +901,342 @@ exports[`<Contribution /> should render answer references 1`] = `
   text-transform: uppercase;
 }
 
-.c0 {
-  margin: 0 auto 1rem;
-  text-align: left;
+.c18 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  width: auto;
+  min-height: 48px;
+  color: #3e486e;
+  background-color: #fff;
+  border-color: #f66663;
+  border-style: solid;
+  border-width: 2px;
+  border-radius: 0.6rem;
+  box-shadow: none;
+  -webkit-animation: none;
+  animation: none;
+}
+
+.c19 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  padding: 1rem 1.6rem;
+  text-align: left;
+}
+
+.c21 {
+  margin-top: 0.4rem;
+  color: #f66663;
+}
+
+.c7 {
+  margin-bottom: 1.6rem;
+  margin-left: auto;
+  text-align: left;
+}
+
+.c13 {
+  margin-bottom: 1.6rem;
+  margin-left: -2.4rem;
+  text-align: left;
+}
+
+.c8 {
+  position: relative;
+  margin: 0;
+  color: #2f3b6c;
+  font-weight: normal;
+  font-size: 2.8rem;
+  font-family: "Merriweather",serif;
+  line-height: 1.25;
+  padding-left: 3.2rem;
+  text-align: left;
+}
+
+.c15 {
+  position: relative;
+  margin: 0;
+  color: #2f3b6c;
+  font-weight: normal;
+  font-size: 2.8rem;
+  font-family: "Merriweather",serif;
+  line-height: 1.25;
+  padding-left: 2.4rem;
+  text-align: left;
+}
+
+.c25 {
+  margin: 5px 0;
+  list-style-type: none;
+}
+
+.c22 {
+  margin-bottom: 2rem;
+}
+
+.c11 {
+  padding-bottom: 0;
+}
+
+.c2 {
+  padding: 2rem 2.4rem;
+  color: #3e486e;
+  border-radius: 0.6rem;
+  background-color: #f2f5fa;
+  border: 1px solid #f2f5fa;
+  margin-bottom: 3.2rem;
+}
+
+.c2 > *:first-child {
+  margin-top: 0;
+}
+
+.c2 > *:last-child {
+  margin-bottom: 0;
+}
+
+.c6 {
+  color: #f66663;
+  font-weight: 600;
+  font-size: 1.8rem;
+}
+
+.c17 {
+  margin-bottom: 0.4rem;
+  color: #f66663;
+}
+
+.c14 {
+  margin-top: 3.2rem;
+}
+
+.c26 {
+  margin-bottom: 1.6rem;
+  text-align: center;
+}
+
+.c28 {
+  width: 2.8rem;
+  margin-left: 1.6rem;
+}
+
+@media (max-width:600px) {
+  .c12 {
+    padding: 1.6rem 1rem;
+  }
+}
+
+@media print {
+  .c12 {
+    padding: 0 5pt;
+    border: none;
+  }
+}
+
+@media (max-width:600px) {
+  .c23 {
+    font-size: 1.6rem;
+  }
+}
+
+@media (max-width:600px) {
+  .c20 {
+    font-size: 1.4rem;
+  }
 }
 
-.c1 {
-  position: relative;
-  margin: 0;
-  color: #2f3b6c;
-  font-weight: normal;
-  font-size: 2.8rem;
-  font-family: "Merriweather",serif;
-  line-height: 1.25;
-  padding-left: 3.2rem;
-  text-align: left;
+@media (max-width:600px) {
+  .c27 {
+    font-size: 1.4rem;
+  }
 }
 
-.c7 {
-  margin: 5px 0;
-  list-style-type: none;
+@media (max-width:600px) {
+  .c27 {
+    padding: 0 3rem;
+  }
 }
 
-.c5 {
-  margin-bottom: 2rem;
+@media (max-width:600px) {
+  .c4 {
+    -webkit-flex: 0 0 3.4rem;
+    -ms-flex: 0 0 3.4rem;
+    flex: 0 0 3.4rem;
+    margin-right: 1rem;
+  }
 }
 
-.c3 {
-  margin-top: 3.2rem;
+@media (max-width:600px) {
+  .c7 {
+    margin-bottom: 1rem;
+    margin-left: auto;
+  }
 }
 
 @media (max-width:600px) {
-  .c4 {
-    font-size: 1.6rem;
+  .c13 {
+    margin-bottom: 1rem;
+    margin-left: -1rem;
   }
 }
 
 @media (max-width:600px) {
   .c8 {
-    font-size: 1.4rem;
+    padding-left: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
   .c8 {
-    padding: 0 3rem;
+    font-size: 2.2rem;
   }
 }
 
 @media (max-width:600px) {
-  .c1 {
+  .c15 {
     padding-left: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c1 {
+  .c15 {
     font-size: 2.2rem;
   }
 }
 
+@media (max-width:600px) {
+  .c2 {
+    padding: 1.6rem 1rem;
+  }
+}
+
+@media print {
+  .c2 {
+    padding: 0 5pt;
+    border: none;
+  }
+}
+
+@media (max-width:600px) {
+  .c2 {
+    margin-bottom: 2rem;
+  }
+}
+
+@media (max-width:600px) {
+  .c6 {
+    font-size: 1.6rem;
+  }
+}
+
 <div>
+  <div
+    class="c0"
+  >
+    <div
+      class="c1"
+    >
+      <svg
+        fill="none"
+        viewBox="0 0 32 32"
+      >
+        <path
+          clip-rule="evenodd"
+          d="M11.938 16.5a3.548 3.548 0 013.562-3.563 3.548 3.548 0 013.563 3.563 3.548 3.548 0 01-3.563 3.563 3.548 3.548 0 01-3.563-3.563zm2.062 0c0 .84.66 1.5 1.5 1.5s1.5-.66 1.5-1.5-.66-1.5-1.5-1.5-1.5.66-1.5 1.5z"
+          fill="currentColor"
+          fill-rule="evenodd"
+        />
+        <path
+          clip-rule="evenodd"
+          d="M25 14.838v3.404l-1.663.87-.474 1.109.554 1.82-2.375 2.376-1.9-.555-1.109.476-.87 1.662h-3.405l-.87-1.663-1.109-.474-1.82.554-2.376-2.375.554-1.9-.475-1.109L6 18.163v-3.405l1.662-.87.475-1.109-.554-1.82 2.375-2.376 1.9.554 1.109-.475.87-1.662h3.405l.87 1.662 1.109.475 1.82-.554 2.376 2.375-.555 1.9.476 1.109 1.662.87zm-4.1 5.112l.825-2.025L23 17.25v-1.5l-1.2-.6-.825-2.025.375-1.35-1.05-1.05-1.35.375-2.025-.825L16.25 9h-1.5l-.6 1.2-2.025.825-1.35-.375-1.05 1.05.375 1.35-.825 2.025L8 15.75v1.5l1.2.6.825 2.025-.375 1.35 1.05 1.05 1.35-.375 2.025.825L14.75 24h1.5l.6-1.2 2.025-.825 1.35.375 1.05-1.05-.375-1.35z"
+          fill="currentColor"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="c2"
+  >
+    <div
+      class="c3"
+    >
+      <div
+        class="c4"
+      >
+        <svg
+          fill="none"
+          viewBox="0 0 52 52"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M17 2L6 13v2c0 1 .398 1 1.076 1h9.693C18.554 16 20 14.657 20 13V4h19a1 1 0 011 1v27h2V5a3 3 0 00-3-3H17zm-.23 12H8L18 4v9c0 .552-.636 1-1.23 1z"
+            fill="#4E6896"
+            fill-rule="evenodd"
+          />
+          <path
+            d="M27 50v-2H9a1 1 0 01-1-1V24s0-1-1-1-1 1-1 1v23a3 3 0 003 3h18zM7 20a1 1 0 100-2 1 1 0 000 2z"
+            fill="#4E6896"
+          />
+          <path
+            d="M15.053 20C14.47 20 14 20.448 14 21s.471 1 1.053 1h17.894C33.53 22 34 21.552 34 21s-.471-1-1.053-1H15.053zM14 27c0-.552.471-1 1.053-1h17.894c.582 0 1.053.448 1.053 1s-.471 1-1.053 1H15.053C14.47 28 14 27.552 14 27z"
+            fill="#FF7067"
+          />
+          <path
+            clip-rule="evenodd"
+            d="M36.5 37.938a3.548 3.548 0 00-3.563 3.562 3.548 3.548 0 003.563 3.563 3.548 3.548 0 003.563-3.563 3.548 3.548 0 00-3.563-3.563zm0 5.062c-.84 0-1.5-.66-1.5-1.5s.66-1.5 1.5-1.5 1.5.66 1.5 1.5-.66 1.5-1.5 1.5z"
+            fill="#FF7067"
+            fill-rule="evenodd"
+          />
+          <path
+            clip-rule="evenodd"
+            d="M46 43.242v-3.404l-1.663-.871-.475-1.109.555-1.9-2.375-2.375-1.821.555-1.108-.475L38.241 32h-3.404l-.871 1.663-1.109.475-1.9-.555-2.375 2.375.555 1.821-.476 1.108-1.662.871v3.404l1.663.871.474 1.109-.554 1.9 2.375 2.375 1.821-.555 1.108.475.871 1.663h3.404l.871-1.663 1.109-.475 1.9.555 2.375-2.375-.555-1.821.475-1.108L46 43.241zm-3.275-.317L41.9 44.95l.375 1.35-1.05 1.05-1.35-.375-2.025.825-.6 1.2h-1.5l-.675-1.275-2.025-.825-1.35.375-1.05-1.05.375-1.35-.825-2.025-1.2-.6v-1.5l1.275-.675.825-2.025-.375-1.35 1.05-1.05 1.35.375 2.025-.825.6-1.2h1.5l.675 1.275 2.025.825 1.35-.375 1.05 1.05-.375 1.35.825 2.025 1.2.6v1.5l-1.275.675z"
+            fill="#FF7067"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </div>
+      <div
+        class="c5"
+      >
+        <div
+          class="c6"
+        >
+          Page personnalisable
+        </div>
+        Cette page a été personnalisée avec l’ajout des
+         
+        <a
+          href="#customisation"
+        >
+          informations de la convention collective :
+           
+        </a>
+      </div>
+    </div>
+  </div>
   <section>
     <header
-      class="c0"
+      class="c7"
     >
       <h2
-        class="c1"
+        class="c8"
       >
         <div
-          class="c2"
+          class="c9"
         />
-        Que dit le code du travail ?
+        Que dit le code du travail ?
       </h2>
     </header>
     <div>
@@ -407,43 +1248,71 @@ exports[`<Contribution /> should render answer references 1`] = `
       </p>
     </div>
   </section>
-  <section>
-    <header
-      class="c0 c3"
+  <div
+    class="c10 c11"
+  >
+    <div
+      class="c12"
     >
-      <h2
-        class="c1"
+      <header
+        class="c13 c14"
+        id="customisation"
+      >
+        <h2
+          class="c15"
+        >
+          <div
+            class="c16"
+          />
+          Que dit votre convention collective ?
+        </h2>
+      </header>
+      <div
+        class="c17"
+      >
+        Ce contenu est personnalisé avec les informations de la convention collective:
+      </div>
+      <div
+        class="c18"
       >
         <div
-          class="c2"
+          class="c19"
+          role="alert"
         />
-        Que dit votre convention collective ?
-      </h2>
-    </header>
-    <div>
-      <h4
-        class="c4"
-      >
-        <span
-          aria-label="Icone convention collective"
-          role="img"
-        >
-          📖
-        </span>
-         
-        <a
-          href="https://www.legifrance.gouv.fr/affichIDCC.do?idConvention=123"
-          rel="noopener noreferrer"
-          target="_blank"
+        <button
+          aria-label="Fermer"
+          class="c20"
         >
-          preselected convention
-           (IDCC 
-          0044
-          )
-        </a>
-      </h4>
+          <svg
+            class="c21"
+            fill="none"
+            height="24"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            variant="primary"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <line
+              x1="18"
+              x2="6"
+              y1="6"
+              y2="18"
+            />
+            <line
+              x1="6"
+              x2="18"
+              y1="6"
+              y2="18"
+            />
+          </svg>
+        </button>
+      </div>
       <div
-        class="c5"
+        class="c22"
       >
         <div>
           <p>
@@ -455,17 +1324,17 @@ exports[`<Contribution /> should render answer references 1`] = `
         </div>
       </div>
       <h3
-        class="c4"
+        class="c23"
       >
         Références
       </h3>
       <span
-        class="c6"
+        class="c24"
       >
         Convention collective
       </span>
       <li
-        class="c7"
+        class="c25"
       >
         <a
           href="http://path/to/agreement"
@@ -474,12 +1343,12 @@ exports[`<Contribution /> should render answer references 1`] = `
         />
       </li>
       <span
-        class="c6"
+        class="c24"
       >
         Autres sources
       </span>
       <li
-        class="c7"
+        class="c25"
       >
         <a
           href="http://path/to/ref"
@@ -489,19 +1358,56 @@ exports[`<Contribution /> should render answer references 1`] = `
           reference externe 1
         </a>
       </li>
-      <br />
-      <button
-        class="c8"
+      <div
+        class="c26"
       >
-        Changer de convention collective
-      </button>
+        <button
+          class="c27"
+        >
+          Changer de convention collective
+          <svg
+            class="c28"
+            fill="none"
+            viewBox="0 0 32 32"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M14.752 16.5L7.258 8.591A.957.957 0 017 7.932c0-.247.093-.484.259-.659A.858.858 0 017.883 7a.86.86 0 01.625.273L16 15.183l7.492-7.91A.859.859 0 0124.117 7c.234 0 .459.098.624.273a.957.957 0 01.259.659.957.957 0 01-.259.66L17.249 16.5l7.492 7.909a.958.958 0 01.259.659.957.957 0 01-.259.659.859.859 0 01-.624.273.86.86 0 01-.625-.273L16 17.817l-7.492 7.91a.859.859 0 01-.625.273.859.859 0 01-.624-.273.957.957 0 01-.259-.659.96.96 0 01.259-.66l7.492-7.908z"
+              fill="currentColor"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </button>
+      </div>
     </div>
-  </section>
+  </div>
 </div>
 `;
 
 exports[`<Contribution /> should render preselected convention 1`] = `
-.c2 {
+.c10 {
+  padding: 3.2rem 0;
+  background-color: transparent;
+  color: #3e486e;
+}
+
+.c12 {
+  padding: 2rem 2.4rem;
+  color: #3e486e;
+  border-radius: 0.6rem;
+  background-color: #f2f5fa;
+  border: 1px solid #f2f5fa;
+}
+
+.c12 > *:first-child {
+  margin-top: 0;
+}
+
+.c12 > *:last-child {
+  margin-bottom: 0;
+}
+
+.c9 {
   position: absolute;
   background-color: #7994d4;
   border-radius: 0.6rem;
@@ -514,17 +1420,112 @@ exports[`<Contribution /> should render preselected convention 1`] = `
   transform: translateY(-50%);
 }
 
-.c4 {
-  position: relative;
-  margin: 0 0 1rem 0;
-  color: #2f3b6c;
-  font-weight: 600;
-  font-size: 1.8rem;
-  font-family: "Open Sans",sans-serif;
-  line-height: 1.25;
+.c16 {
+  position: absolute;
+  background-color: #f66663;
+  border-radius: none;
+  top: 50%;
+  left: 0;
+  width: 0.4rem;
+  height: 100%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
 }
 
-.c6 {
+.c0 {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 5rem;
+  height: 5rem;
+  overflow: hidden;
+  color: #fff;
+  border-radius: 0 0.6rem 0 0;
+}
+
+.c0:before {
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  border-color: transparent #f66663 transparent transparent;
+  border-style: solid;
+  border-width: 0 5rem 5rem 0;
+  content: "";
+}
+
+.c1 {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  width: 3rem;
+  height: 3rem;
+}
+
+.c20 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  box-sizing: content-box;
+  font-weight: 500;
+  font-size: 1.6rem;
+  line-height: 1.125em;
+  text-align: center;
+  vertical-align: middle;
+  border: 1px solid;
+  border-radius: 0.6rem;
+  cursor: pointer;
+  -webkit-transition: background-color 250ms linear, border-color 250ms linear,-webkit-transform 100ms linear;
+  -webkit-transition: background-color 250ms linear, border-color 250ms linear,transform 100ms linear;
+  transition: background-color 250ms linear, border-color 250ms linear,transform 100ms linear;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  height: 4rem;
+  padding: 0 1rem;
+  color: #3e486e;
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+  opacity: 1;
+}
+
+.c20:link,
+.c20:visited {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #3e486e;
+}
+
+.c20:not([disabled]):hover,
+.c20:not([disabled]):active,
+.c20:not([disabled]):focus {
+  opacity: 0.6;
+  -webkit-transform: translateY(-2px);
+  -ms-transform: translateY(-2px);
+  transform: translateY(-2px);
+  background: transparent;
+  border-color: transparent;
+}
+
+.c20[disabled] {
+  color: rgba(62,72,110,0.4);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+.c24 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -561,36 +1562,119 @@ exports[`<Contribution /> should render preselected convention 1`] = `
   opacity: 1;
 }
 
-.c6:link,
-.c6:visited {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: #fff;
+.c24:link,
+.c24:visited {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #fff;
+}
+
+.c24:not([disabled]):hover,
+.c24:not([disabled]):active,
+.c24:not([disabled]):focus {
+  opacity: 1;
+  -webkit-transform: translateY(-2px);
+  -ms-transform: translateY(-2px);
+  transform: translateY(-2px);
+  background: #f99593;
+  border-color: #f99593;
+}
+
+.c24[disabled] {
+  color: rgba(255,255,255,0.4);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: stretch;
+  -webkit-justify-content: stretch;
+  -ms-flex-pack: stretch;
+  justify-content: stretch;
+}
+
+.c4 {
+  display: block;
+  -webkit-flex: 0 0 4.2rem;
+  -ms-flex: 0 0 4.2rem;
+  flex: 0 0 4.2rem;
+  margin-right: 2.4rem;
+}
+
+.c5 {
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+}
+
+.c18 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  width: auto;
+  min-height: 48px;
+  color: #3e486e;
+  background-color: #fff;
+  border-color: #f66663;
+  border-style: solid;
+  border-width: 2px;
+  border-radius: 0.6rem;
+  box-shadow: none;
+  -webkit-animation: none;
+  animation: none;
+}
+
+.c19 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  -webkit-align-self: center;
+  -ms-flex-item-align: center;
+  align-self: center;
+  padding: 1rem 1.6rem;
+  text-align: left;
+}
+
+.c21 {
+  margin-top: 0.4rem;
+  color: #f66663;
 }
 
-.c6:not([disabled]):hover,
-.c6:not([disabled]):active,
-.c6:not([disabled]):focus {
-  opacity: 1;
-  -webkit-transform: translateY(-2px);
-  -ms-transform: translateY(-2px);
-  transform: translateY(-2px);
-  background: #f99593;
-  border-color: #f99593;
+.c7 {
+  margin-bottom: 1.6rem;
+  margin-left: auto;
+  text-align: left;
 }
 
-.c6[disabled] {
-  color: rgba(255,255,255,0.4);
-  box-shadow: none;
-  cursor: not-allowed;
+.c13 {
+  margin-bottom: 1.6rem;
+  margin-left: -2.4rem;
+  text-align: left;
 }
 
-.c0 {
-  margin: 0 auto 1rem;
+.c8 {
+  position: relative;
+  margin: 0;
+  color: #2f3b6c;
+  font-weight: normal;
+  font-size: 2.8rem;
+  font-family: "Merriweather",serif;
+  line-height: 1.25;
+  padding-left: 3.2rem;
   text-align: left;
 }
 
-.c1 {
+.c15 {
   position: relative;
   margin: 0;
   color: #2f3b6c;
@@ -598,60 +1682,260 @@ exports[`<Contribution /> should render preselected convention 1`] = `
   font-size: 2.8rem;
   font-family: "Merriweather",serif;
   line-height: 1.25;
-  padding-left: 3.2rem;
+  padding-left: 2.4rem;
   text-align: left;
 }
 
-.c5 {
+.c22 {
   margin-bottom: 2rem;
 }
 
-.c3 {
+.c11 {
+  padding-bottom: 0;
+}
+
+.c2 {
+  padding: 2rem 2.4rem;
+  color: #3e486e;
+  border-radius: 0.6rem;
+  background-color: #f2f5fa;
+  border: 1px solid #f2f5fa;
+  margin-bottom: 3.2rem;
+}
+
+.c2 > *:first-child {
+  margin-top: 0;
+}
+
+.c2 > *:last-child {
+  margin-bottom: 0;
+}
+
+.c6 {
+  color: #f66663;
+  font-weight: 600;
+  font-size: 1.8rem;
+}
+
+.c17 {
+  margin-bottom: 0.4rem;
+  color: #f66663;
+}
+
+.c14 {
   margin-top: 3.2rem;
 }
 
+.c23 {
+  margin-bottom: 1.6rem;
+  text-align: center;
+}
+
+.c25 {
+  width: 2.8rem;
+  margin-left: 1.6rem;
+}
+
 @media (max-width:600px) {
-  .c4 {
-    font-size: 1.6rem;
+  .c12 {
+    padding: 1.6rem 1rem;
+  }
+}
+
+@media print {
+  .c12 {
+    padding: 0 5pt;
+    border: none;
   }
 }
 
 @media (max-width:600px) {
-  .c6 {
+  .c20 {
     font-size: 1.4rem;
   }
 }
 
 @media (max-width:600px) {
-  .c6 {
+  .c24 {
+    font-size: 1.4rem;
+  }
+}
+
+@media (max-width:600px) {
+  .c24 {
     padding: 0 3rem;
   }
 }
 
 @media (max-width:600px) {
-  .c1 {
+  .c4 {
+    -webkit-flex: 0 0 3.4rem;
+    -ms-flex: 0 0 3.4rem;
+    flex: 0 0 3.4rem;
+    margin-right: 1rem;
+  }
+}
+
+@media (max-width:600px) {
+  .c7 {
+    margin-bottom: 1rem;
+    margin-left: auto;
+  }
+}
+
+@media (max-width:600px) {
+  .c13 {
+    margin-bottom: 1rem;
+    margin-left: -1rem;
+  }
+}
+
+@media (max-width:600px) {
+  .c8 {
     padding-left: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c1 {
+  .c8 {
+    font-size: 2.2rem;
+  }
+}
+
+@media (max-width:600px) {
+  .c15 {
+    padding-left: 1.6rem;
+  }
+}
+
+@media (max-width:600px) {
+  .c15 {
     font-size: 2.2rem;
   }
 }
 
+@media (max-width:600px) {
+  .c2 {
+    padding: 1.6rem 1rem;
+  }
+}
+
+@media print {
+  .c2 {
+    padding: 0 5pt;
+    border: none;
+  }
+}
+
+@media (max-width:600px) {
+  .c2 {
+    margin-bottom: 2rem;
+  }
+}
+
+@media (max-width:600px) {
+  .c6 {
+    font-size: 1.6rem;
+  }
+}
+
 <div>
+  <div
+    class="c0"
+  >
+    <div
+      class="c1"
+    >
+      <svg
+        fill="none"
+        viewBox="0 0 32 32"
+      >
+        <path
+          clip-rule="evenodd"
+          d="M11.938 16.5a3.548 3.548 0 013.562-3.563 3.548 3.548 0 013.563 3.563 3.548 3.548 0 01-3.563 3.563 3.548 3.548 0 01-3.563-3.563zm2.062 0c0 .84.66 1.5 1.5 1.5s1.5-.66 1.5-1.5-.66-1.5-1.5-1.5-1.5.66-1.5 1.5z"
+          fill="currentColor"
+          fill-rule="evenodd"
+        />
+        <path
+          clip-rule="evenodd"
+          d="M25 14.838v3.404l-1.663.87-.474 1.109.554 1.82-2.375 2.376-1.9-.555-1.109.476-.87 1.662h-3.405l-.87-1.663-1.109-.474-1.82.554-2.376-2.375.554-1.9-.475-1.109L6 18.163v-3.405l1.662-.87.475-1.109-.554-1.82 2.375-2.376 1.9.554 1.109-.475.87-1.662h3.405l.87 1.662 1.109.475 1.82-.554 2.376 2.375-.555 1.9.476 1.109 1.662.87zm-4.1 5.112l.825-2.025L23 17.25v-1.5l-1.2-.6-.825-2.025.375-1.35-1.05-1.05-1.35.375-2.025-.825L16.25 9h-1.5l-.6 1.2-2.025.825-1.35-.375-1.05 1.05.375 1.35-.825 2.025L8 15.75v1.5l1.2.6.825 2.025-.375 1.35 1.05 1.05 1.35-.375 2.025.825L14.75 24h1.5l.6-1.2 2.025-.825 1.35.375 1.05-1.05-.375-1.35z"
+          fill="currentColor"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="c2"
+  >
+    <div
+      class="c3"
+    >
+      <div
+        class="c4"
+      >
+        <svg
+          fill="none"
+          viewBox="0 0 52 52"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M17 2L6 13v2c0 1 .398 1 1.076 1h9.693C18.554 16 20 14.657 20 13V4h19a1 1 0 011 1v27h2V5a3 3 0 00-3-3H17zm-.23 12H8L18 4v9c0 .552-.636 1-1.23 1z"
+            fill="#4E6896"
+            fill-rule="evenodd"
+          />
+          <path
+            d="M27 50v-2H9a1 1 0 01-1-1V24s0-1-1-1-1 1-1 1v23a3 3 0 003 3h18zM7 20a1 1 0 100-2 1 1 0 000 2z"
+            fill="#4E6896"
+          />
+          <path
+            d="M15.053 20C14.47 20 14 20.448 14 21s.471 1 1.053 1h17.894C33.53 22 34 21.552 34 21s-.471-1-1.053-1H15.053zM14 27c0-.552.471-1 1.053-1h17.894c.582 0 1.053.448 1.053 1s-.471 1-1.053 1H15.053C14.47 28 14 27.552 14 27z"
+            fill="#FF7067"
+          />
+          <path
+            clip-rule="evenodd"
+            d="M36.5 37.938a3.548 3.548 0 00-3.563 3.562 3.548 3.548 0 003.563 3.563 3.548 3.548 0 003.563-3.563 3.548 3.548 0 00-3.563-3.563zm0 5.062c-.84 0-1.5-.66-1.5-1.5s.66-1.5 1.5-1.5 1.5.66 1.5 1.5-.66 1.5-1.5 1.5z"
+            fill="#FF7067"
+            fill-rule="evenodd"
+          />
+          <path
+            clip-rule="evenodd"
+            d="M46 43.242v-3.404l-1.663-.871-.475-1.109.555-1.9-2.375-2.375-1.821.555-1.108-.475L38.241 32h-3.404l-.871 1.663-1.109.475-1.9-.555-2.375 2.375.555 1.821-.476 1.108-1.662.871v3.404l1.663.871.474 1.109-.554 1.9 2.375 2.375 1.821-.555 1.108.475.871 1.663h3.404l.871-1.663 1.109-.475 1.9.555 2.375-2.375-.555-1.821.475-1.108L46 43.241zm-3.275-.317L41.9 44.95l.375 1.35-1.05 1.05-1.35-.375-2.025.825-.6 1.2h-1.5l-.675-1.275-2.025-.825-1.35.375-1.05-1.05.375-1.35-.825-2.025-1.2-.6v-1.5l1.275-.675.825-2.025-.375-1.35 1.05-1.05 1.35.375 2.025-.825.6-1.2h1.5l.675 1.275 2.025.825 1.35-.375 1.05 1.05-.375 1.35.825 2.025 1.2.6v1.5l-1.275.675z"
+            fill="#FF7067"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </div>
+      <div
+        class="c5"
+      >
+        <div
+          class="c6"
+        >
+          Page personnalisable
+        </div>
+        Cette page a été personnalisée avec l’ajout des
+         
+        <a
+          href="#customisation"
+        >
+          informations de la convention collective :
+           
+        </a>
+      </div>
+    </div>
+  </div>
   <section>
     <header
-      class="c0"
+      class="c7"
     >
       <h2
-        class="c1"
+        class="c8"
       >
         <div
-          class="c2"
+          class="c9"
         />
-        Que dit le code du travail ?
+        Que dit le code du travail ?
       </h2>
     </header>
     <div>
@@ -663,43 +1947,71 @@ exports[`<Contribution /> should render preselected convention 1`] = `
       </p>
     </div>
   </section>
-  <section>
-    <header
-      class="c0 c3"
+  <div
+    class="c10 c11"
+  >
+    <div
+      class="c12"
     >
-      <h2
-        class="c1"
+      <header
+        class="c13 c14"
+        id="customisation"
+      >
+        <h2
+          class="c15"
+        >
+          <div
+            class="c16"
+          />
+          Que dit votre convention collective ?
+        </h2>
+      </header>
+      <div
+        class="c17"
+      >
+        Ce contenu est personnalisé avec les informations de la convention collective:
+      </div>
+      <div
+        class="c18"
       >
         <div
-          class="c2"
+          class="c19"
+          role="alert"
         />
-        Que dit votre convention collective ?
-      </h2>
-    </header>
-    <div>
-      <h4
-        class="c4"
-      >
-        <span
-          aria-label="Icone convention collective"
-          role="img"
-        >
-          📖
-        </span>
-         
-        <a
-          href="https://www.legifrance.gouv.fr/affichIDCC.do?idConvention=123"
-          rel="noopener noreferrer"
-          target="_blank"
+        <button
+          aria-label="Fermer"
+          class="c20"
         >
-          preselected convention
-           (IDCC 
-          0044
-          )
-        </a>
-      </h4>
+          <svg
+            class="c21"
+            fill="none"
+            height="24"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            variant="primary"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <line
+              x1="18"
+              x2="6"
+              y1="6"
+              y2="18"
+            />
+            <line
+              x1="6"
+              x2="18"
+              y1="6"
+              y2="18"
+            />
+          </svg>
+        </button>
+      </div>
       <div
-        class="c5"
+        class="c22"
       >
         <div>
           <p>
@@ -710,33 +2022,56 @@ exports[`<Contribution /> should render preselected convention 1`] = `
           </p>
         </div>
       </div>
-      <br />
-      <button
-        class="c6"
+      <div
+        class="c23"
       >
-        Changer de convention collective
-      </button>
+        <button
+          class="c24"
+        >
+          Changer de convention collective
+          <svg
+            class="c25"
+            fill="none"
+            viewBox="0 0 32 32"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M14.752 16.5L7.258 8.591A.957.957 0 017 7.932c0-.247.093-.484.259-.659A.858.858 0 017.883 7a.86.86 0 01.625.273L16 15.183l7.492-7.91A.859.859 0 0124.117 7c.234 0 .459.098.624.273a.957.957 0 01.259.659.957.957 0 01-.259.66L17.249 16.5l7.492 7.909a.958.958 0 01.259.659.957.957 0 01-.259.659.859.859 0 01-.624.273.86.86 0 01-.625-.273L16 17.817l-7.492 7.91a.859.859 0 01-.625.273.859.859 0 01-.624-.273.957.957 0 01-.259-.659.96.96 0 01.259-.66l7.492-7.908z"
+              fill="currentColor"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </button>
+      </div>
     </div>
-  </section>
+  </div>
 </div>
 `;
 
 exports[`<Contribution /> should render with both answers 1`] = `
-.c4 {
-  max-width: 124rem;
-  margin: 0 auto;
-  padding: 0 2rem;
+.c10 {
+  padding: 3.2rem 0;
+  background-color: transparent;
+  color: #3e486e;
+}
+
+.c12 {
+  padding: 2rem 2.4rem;
+  color: #3e486e;
+  border-radius: 0.6rem;
+  background-color: #f2f5fa;
+  border: 1px solid #f2f5fa;
 }
 
-.c4 > *:first-child {
+.c12 > *:first-child {
   margin-top: 0;
 }
 
-.c4 > *:last-child {
+.c12 > *:last-child {
   margin-bottom: 0;
 }
 
-.c2 {
+.c9 {
   position: absolute;
   background-color: #7994d4;
   border-radius: 0.6rem;
@@ -749,12 +2084,81 @@ exports[`<Contribution /> should render with both answers 1`] = `
   transform: translateY(-50%);
 }
 
+.c16 {
+  position: absolute;
+  background-color: #f66663;
+  border-radius: none;
+  top: 50%;
+  left: 0;
+  width: 0.4rem;
+  height: 100%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+.c0 {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 5rem;
+  height: 5rem;
+  overflow: hidden;
+  color: #fff;
+  border-radius: 0 0.6rem 0 0;
+}
+
+.c0:before {
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  border-color: transparent #f66663 transparent transparent;
+  border-style: solid;
+  border-width: 0 5rem 5rem 0;
+  content: "";
+}
+
+.c1 {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  width: 3rem;
+  height: 3rem;
+}
+
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: stretch;
+  -webkit-justify-content: stretch;
+  -ms-flex-pack: stretch;
+  justify-content: stretch;
+}
+
+.c4 {
+  display: block;
+  -webkit-flex: 0 0 4.2rem;
+  -ms-flex: 0 0 4.2rem;
+  flex: 0 0 4.2rem;
+  margin-right: 2.4rem;
+}
+
 .c5 {
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+}
+
+.c17 {
   position: relative;
   display: inline-block;
 }
 
-.c7 {
+.c19 {
   width: 100%;
   height: 5.4rem;
   padding: 0 2rem;
@@ -776,15 +2180,15 @@ exports[`<Contribution /> should render with both answers 1`] = `
   appearance: none;
 }
 
-.c7::-webkit-outer-spin-button,
-.c7::-webkit-inner-spin-button {
+.c19::-webkit-outer-spin-button,
+.c19::-webkit-inner-spin-button {
   margin: 0;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c7::-webkit-calendar-picker-indicator {
+.c19::-webkit-calendar-picker-indicator {
   display: block;
   width: 3.2rem;
   height: 3.2rem;
@@ -797,52 +2201,59 @@ exports[`<Contribution /> should render with both answers 1`] = `
   mask-image: url("data:image/svg+xml;,%3Csvg%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.947%207.601h1.601c1.472%200%202.521%201.198%202.521%202.669v2.306l-.001%2010.392c0%201.472-1.049%202.669-2.521%202.669H8.669A2.672%202.672%200%20016%2022.967l.001-12.697a2.672%202.672%200%20012.67-2.669h1.331V6h.999v1.601H20V6h.947v1.601zm1.6%2017.036c.883%200%201.454-.786%201.454-1.67v-10.33h-17L7%2022.967c0%20.884.785%201.67%201.668%201.67h13.879zm-15.548-13h17.002l.001-1.367c0-.883-.57-1.601-1.453-1.601h-1.6v1.068H20V8.669h-9v1.068h-1V8.669H8.669C7.786%208.669%207%209.387%207%2010.27v1.367zm9.677%206.277h-2.135a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203h-2.135v2.135h2.136v-2.135zm3.203%203.203h2.135a1.07%201.07%200%20001.068-1.068v-2.135a1.07%201.07%200%2000-1.068-1.068H19.88a1.07%201.07%200%2000-1.068%201.068v2.135a1.07%201.07%200%20001.068%201.068zm0-3.203h2.135l.001%202.135H19.88v-2.135zm-8.54%208.541H9.204a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203H9.204v2.135h2.136l-.001-2.135zm3.202%203.203h2.135a1.07%201.07%200%20001.068-1.068v-2.135a1.07%201.07%200%2000-1.068-1.068h-2.135a1.07%201.07%200%2000-1.068%201.068v2.135a1.07%201.07%200%20001.068%201.068zm0-3.203h2.135l.001%202.135h-2.136v-2.135zm7.473%203.203H19.88a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203H19.88v2.135h2.136v-2.135z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
 }
 
-.c7:invalid {
+.c19:invalid {
   border-color: #eb5757;
 }
 
-.c7::-webkit-input-placeholder {
+.c19::-webkit-input-placeholder {
   color: #9298af;
 }
 
-.c7::-moz-placeholder {
+.c19::-moz-placeholder {
   color: #9298af;
 }
 
-.c7:-ms-input-placeholder {
+.c19:-ms-input-placeholder {
   color: #9298af;
 }
 
-.c7::placeholder {
+.c19::placeholder {
   color: #9298af;
 }
 
-.c7:focus {
+.c19:focus {
   border-color: #7994d4;
 }
 
-.c7:focus::-webkit-input-placeholder {
+.c19:focus::-webkit-input-placeholder {
   color: transparent;
 }
 
-.c7:focus::-moz-placeholder {
+.c19:focus::-moz-placeholder {
   color: transparent;
 }
 
-.c7:focus:-ms-input-placeholder {
+.c19:focus:-ms-input-placeholder {
   color: transparent;
 }
 
-.c7:focus::placeholder {
+.c19:focus::placeholder {
   color: transparent;
 }
 
-.c0 {
-  margin: 0 auto 1rem;
+.c7 {
+  margin-bottom: 1.6rem;
+  margin-left: auto;
   text-align: left;
 }
 
-.c1 {
+.c13 {
+  margin-bottom: 1.6rem;
+  margin-left: -2.4rem;
+  text-align: left;
+}
+
+.c8 {
   position: relative;
   margin: 0;
   color: #2f3b6c;
@@ -854,58 +2265,242 @@ exports[`<Contribution /> should render with both answers 1`] = `
   text-align: left;
 }
 
+.c15 {
+  position: relative;
+  margin: 0;
+  color: #2f3b6c;
+  font-weight: normal;
+  font-size: 2.8rem;
+  font-family: "Merriweather",serif;
+  line-height: 1.25;
+  padding-left: 2.4rem;
+  text-align: left;
+}
+
+.c18 {
+  display: block;
+}
+
+.c11 {
+  padding-bottom: 0;
+}
+
+.c2 {
+  padding: 2rem 2.4rem;
+  color: #3e486e;
+  border-radius: 0.6rem;
+  background-color: #f2f5fa;
+  border: 1px solid #f2f5fa;
+  margin-bottom: 3.2rem;
+}
+
+.c2 > *:first-child {
+  margin-top: 0;
+}
+
+.c2 > *:last-child {
+  margin-bottom: 0;
+}
+
 .c6 {
-  display: block;
+  color: #f66663;
+  font-weight: 600;
+  font-size: 1.8rem;
 }
 
-.c3 {
+.c14 {
   margin-top: 3.2rem;
 }
 
 @media (max-width:600px) {
-  .c4 {
-    padding: 0 1rem;
+  .c12 {
+    padding: 1.6rem 1rem;
   }
 }
 
 @media print {
+  .c12 {
+    padding: 0 5pt;
+    border: none;
+  }
+}
+
+@media (max-width:600px) {
   .c4 {
-    max-width: 100%;
-    padding: 0;
+    -webkit-flex: 0 0 3.4rem;
+    -ms-flex: 0 0 3.4rem;
+    flex: 0 0 3.4rem;
+    margin-right: 1rem;
   }
 }
 
 @media (max-width:600px) {
-  .c7 {
+  .c19 {
     padding: 0 1rem;
     padding-right: 2rem;
   }
 }
 
 @media (max-width:600px) {
-  .c1 {
+  .c7 {
+    margin-bottom: 1rem;
+    margin-left: auto;
+  }
+}
+
+@media (max-width:600px) {
+  .c13 {
+    margin-bottom: 1rem;
+    margin-left: -1rem;
+  }
+}
+
+@media (max-width:600px) {
+  .c8 {
     padding-left: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c1 {
+  .c8 {
+    font-size: 2.2rem;
+  }
+}
+
+@media (max-width:600px) {
+  .c15 {
+    padding-left: 1.6rem;
+  }
+}
+
+@media (max-width:600px) {
+  .c15 {
     font-size: 2.2rem;
   }
 }
 
+@media (max-width:600px) {
+  .c2 {
+    padding: 1.6rem 1rem;
+  }
+}
+
+@media print {
+  .c2 {
+    padding: 0 5pt;
+    border: none;
+  }
+}
+
+@media (max-width:600px) {
+  .c2 {
+    margin-bottom: 2rem;
+  }
+}
+
+@media (max-width:600px) {
+  .c6 {
+    font-size: 1.6rem;
+  }
+}
+
 <div>
+  <div
+    class="c0"
+  >
+    <div
+      class="c1"
+    >
+      <svg
+        fill="none"
+        viewBox="0 0 32 32"
+      >
+        <path
+          clip-rule="evenodd"
+          d="M11.938 16.5a3.548 3.548 0 013.562-3.563 3.548 3.548 0 013.563 3.563 3.548 3.548 0 01-3.563 3.563 3.548 3.548 0 01-3.563-3.563zm2.062 0c0 .84.66 1.5 1.5 1.5s1.5-.66 1.5-1.5-.66-1.5-1.5-1.5-1.5.66-1.5 1.5z"
+          fill="currentColor"
+          fill-rule="evenodd"
+        />
+        <path
+          clip-rule="evenodd"
+          d="M25 14.838v3.404l-1.663.87-.474 1.109.554 1.82-2.375 2.376-1.9-.555-1.109.476-.87 1.662h-3.405l-.87-1.663-1.109-.474-1.82.554-2.376-2.375.554-1.9-.475-1.109L6 18.163v-3.405l1.662-.87.475-1.109-.554-1.82 2.375-2.376 1.9.554 1.109-.475.87-1.662h3.405l.87 1.662 1.109.475 1.82-.554 2.376 2.375-.555 1.9.476 1.109 1.662.87zm-4.1 5.112l.825-2.025L23 17.25v-1.5l-1.2-.6-.825-2.025.375-1.35-1.05-1.05-1.35.375-2.025-.825L16.25 9h-1.5l-.6 1.2-2.025.825-1.35-.375-1.05 1.05.375 1.35-.825 2.025L8 15.75v1.5l1.2.6.825 2.025-.375 1.35 1.05 1.05 1.35-.375 2.025.825L14.75 24h1.5l.6-1.2 2.025-.825 1.35.375 1.05-1.05-.375-1.35z"
+          fill="currentColor"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="c2"
+  >
+    <div
+      class="c3"
+    >
+      <div
+        class="c4"
+      >
+        <svg
+          fill="none"
+          viewBox="0 0 52 52"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M17 2L6 13v2c0 1 .398 1 1.076 1h9.693C18.554 16 20 14.657 20 13V4h19a1 1 0 011 1v27h2V5a3 3 0 00-3-3H17zm-.23 12H8L18 4v9c0 .552-.636 1-1.23 1z"
+            fill="#4E6896"
+            fill-rule="evenodd"
+          />
+          <path
+            d="M27 50v-2H9a1 1 0 01-1-1V24s0-1-1-1-1 1-1 1v23a3 3 0 003 3h18zM7 20a1 1 0 100-2 1 1 0 000 2z"
+            fill="#4E6896"
+          />
+          <path
+            d="M15.053 20C14.47 20 14 20.448 14 21s.471 1 1.053 1h17.894C33.53 22 34 21.552 34 21s-.471-1-1.053-1H15.053zM14 27c0-.552.471-1 1.053-1h17.894c.582 0 1.053.448 1.053 1s-.471 1-1.053 1H15.053C14.47 28 14 27.552 14 27z"
+            fill="#FF7067"
+          />
+          <path
+            clip-rule="evenodd"
+            d="M36.5 37.938a3.548 3.548 0 00-3.563 3.562 3.548 3.548 0 003.563 3.563 3.548 3.548 0 003.563-3.563 3.548 3.548 0 00-3.563-3.563zm0 5.062c-.84 0-1.5-.66-1.5-1.5s.66-1.5 1.5-1.5 1.5.66 1.5 1.5-.66 1.5-1.5 1.5z"
+            fill="#FF7067"
+            fill-rule="evenodd"
+          />
+          <path
+            clip-rule="evenodd"
+            d="M46 43.242v-3.404l-1.663-.871-.475-1.109.555-1.9-2.375-2.375-1.821.555-1.108-.475L38.241 32h-3.404l-.871 1.663-1.109.475-1.9-.555-2.375 2.375.555 1.821-.476 1.108-1.662.871v3.404l1.663.871.474 1.109-.554 1.9 2.375 2.375 1.821-.555 1.108.475.871 1.663h3.404l.871-1.663 1.109-.475 1.9.555 2.375-2.375-.555-1.821.475-1.108L46 43.241zm-3.275-.317L41.9 44.95l.375 1.35-1.05 1.05-1.35-.375-2.025.825-.6 1.2h-1.5l-.675-1.275-2.025-.825-1.35.375-1.05-1.05.375-1.35-.825-2.025-1.2-.6v-1.5l1.275-.675.825-2.025-.375-1.35 1.05-1.05 1.35.375 2.025-.825.6-1.2h1.5l.675 1.275 2.025.825 1.35-.375 1.05 1.05-.375 1.35.825 2.025 1.2.6v1.5l-1.275.675z"
+            fill="#FF7067"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </div>
+      <div
+        class="c5"
+      >
+        <div
+          class="c6"
+        >
+          Page personnalisable
+        </div>
+        Le contenu de cette page peut être personnalisé en fonction de votre situation.
+         
+        <a
+          href="#customisation"
+        >
+          Voir en bas de page
+        </a>
+         pour renseigner votre covention collective.
+      </div>
+    </div>
+  </div>
   <section>
     <header
-      class="c0"
+      class="c7"
     >
       <h2
-        class="c1"
+        class="c8"
       >
         <div
-          class="c2"
+          class="c9"
         />
-        Que dit le code du travail ?
+        Que dit le code du travail ?
       </h2>
     </header>
     <div>
@@ -917,65 +2512,74 @@ exports[`<Contribution /> should render with both answers 1`] = `
       </p>
     </div>
   </section>
-  <section>
-    <header
-      class="c0 c3"
+  <div
+    class="c10 c11"
+  >
+    <div
+      class="c12"
     >
-      <h2
-        class="c1"
-      >
-        <div
-          class="c2"
-        />
-        Que dit votre convention collective ?
-      </h2>
-    </header>
-    <div>
-      <div
-        class="c4"
+      <header
+        class="c13 c14"
+        id="customisation"
       >
-        
-        <p>
-          Renseignez le nom de votre entreprise, son SIRET ou le nom de votre convention collective.
-        </p>
-        <span
-          class="c5 c6"
+        <h2
+          class="c15"
         >
-          <input
-            class="c7"
-            name="q"
-            placeholder="Nom d'entreprise, SIRET, nom de convention collective"
-            role="search"
-            type="search"
-            value=""
+          <div
+            class="c16"
           />
-        </span>
-        
-      </div>
+          Que dit votre convention collective ?
+        </h2>
+      </header>
+      
+      <p>
+        Renseignez le nom de votre entreprise, son SIRET ou le nom de votre convention collective.
+      </p>
+      <span
+        class="c17 c18"
+      >
+        <input
+          class="c19"
+          name="q"
+          placeholder="Nom d'entreprise, SIRET, nom de convention collective"
+          role="search"
+          type="search"
+          value=""
+        />
+      </span>
+      
     </div>
-  </section>
+  </div>
 </div>
 `;
 
 exports[`<Contribution /> should render with conventions answer 1`] = `
-.c4 {
-  max-width: 124rem;
-  margin: 0 auto;
-  padding: 0 2rem;
+.c7 {
+  padding: 3.2rem 0;
+  background-color: transparent;
+  color: #3e486e;
+}
+
+.c9 {
+  padding: 2rem 2.4rem;
+  color: #3e486e;
+  border-radius: 0.6rem;
+  background-color: #f2f5fa;
+  border: 1px solid #f2f5fa;
 }
 
-.c4 > *:first-child {
+.c9 > *:first-child {
   margin-top: 0;
 }
 
-.c4 > *:last-child {
+.c9 > *:last-child {
   margin-bottom: 0;
 }
 
-.c3 {
+.c13 {
   position: absolute;
-  background-color: #7994d4;
-  border-radius: 0.6rem;
+  background-color: #f66663;
+  border-radius: none;
   top: 50%;
   left: 0;
   width: 0.4rem;
@@ -985,12 +2589,68 @@ exports[`<Contribution /> should render with conventions answer 1`] = `
   transform: translateY(-50%);
 }
 
+.c0 {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 5rem;
+  height: 5rem;
+  overflow: hidden;
+  color: #fff;
+  border-radius: 0 0.6rem 0 0;
+}
+
+.c0:before {
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  border-color: transparent #f66663 transparent transparent;
+  border-style: solid;
+  border-width: 0 5rem 5rem 0;
+  content: "";
+}
+
+.c1 {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  width: 3rem;
+  height: 3rem;
+}
+
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: stretch;
+  -webkit-justify-content: stretch;
+  -ms-flex-pack: stretch;
+  justify-content: stretch;
+}
+
+.c4 {
+  display: block;
+  -webkit-flex: 0 0 4.2rem;
+  -ms-flex: 0 0 4.2rem;
+  flex: 0 0 4.2rem;
+  margin-right: 2.4rem;
+}
+
 .c5 {
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+}
+
+.c14 {
   position: relative;
   display: inline-block;
 }
 
-.c7 {
+.c16 {
   width: 100%;
   height: 5.4rem;
   padding: 0 2rem;
@@ -1012,15 +2672,15 @@ exports[`<Contribution /> should render with conventions answer 1`] = `
   appearance: none;
 }
 
-.c7::-webkit-outer-spin-button,
-.c7::-webkit-inner-spin-button {
+.c16::-webkit-outer-spin-button,
+.c16::-webkit-inner-spin-button {
   margin: 0;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c7::-webkit-calendar-picker-indicator {
+.c16::-webkit-calendar-picker-indicator {
   display: block;
   width: 3.2rem;
   height: 3.2rem;
@@ -1033,52 +2693,53 @@ exports[`<Contribution /> should render with conventions answer 1`] = `
   mask-image: url("data:image/svg+xml;,%3Csvg%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.947%207.601h1.601c1.472%200%202.521%201.198%202.521%202.669v2.306l-.001%2010.392c0%201.472-1.049%202.669-2.521%202.669H8.669A2.672%202.672%200%20016%2022.967l.001-12.697a2.672%202.672%200%20012.67-2.669h1.331V6h.999v1.601H20V6h.947v1.601zm1.6%2017.036c.883%200%201.454-.786%201.454-1.67v-10.33h-17L7%2022.967c0%20.884.785%201.67%201.668%201.67h13.879zm-15.548-13h17.002l.001-1.367c0-.883-.57-1.601-1.453-1.601h-1.6v1.068H20V8.669h-9v1.068h-1V8.669H8.669C7.786%208.669%207%209.387%207%2010.27v1.367zm9.677%206.277h-2.135a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203h-2.135v2.135h2.136v-2.135zm3.203%203.203h2.135a1.07%201.07%200%20001.068-1.068v-2.135a1.07%201.07%200%2000-1.068-1.068H19.88a1.07%201.07%200%2000-1.068%201.068v2.135a1.07%201.07%200%20001.068%201.068zm0-3.203h2.135l.001%202.135H19.88v-2.135zm-8.54%208.541H9.204a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203H9.204v2.135h2.136l-.001-2.135zm3.202%203.203h2.135a1.07%201.07%200%20001.068-1.068v-2.135a1.07%201.07%200%2000-1.068-1.068h-2.135a1.07%201.07%200%2000-1.068%201.068v2.135a1.07%201.07%200%20001.068%201.068zm0-3.203h2.135l.001%202.135h-2.136v-2.135zm7.473%203.203H19.88a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203H19.88v2.135h2.136v-2.135z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
 }
 
-.c7:invalid {
+.c16:invalid {
   border-color: #eb5757;
 }
 
-.c7::-webkit-input-placeholder {
+.c16::-webkit-input-placeholder {
   color: #9298af;
 }
 
-.c7::-moz-placeholder {
+.c16::-moz-placeholder {
   color: #9298af;
 }
 
-.c7:-ms-input-placeholder {
+.c16:-ms-input-placeholder {
   color: #9298af;
 }
 
-.c7::placeholder {
+.c16::placeholder {
   color: #9298af;
 }
 
-.c7:focus {
+.c16:focus {
   border-color: #7994d4;
 }
 
-.c7:focus::-webkit-input-placeholder {
+.c16:focus::-webkit-input-placeholder {
   color: transparent;
 }
 
-.c7:focus::-moz-placeholder {
+.c16:focus::-moz-placeholder {
   color: transparent;
 }
 
-.c7:focus:-ms-input-placeholder {
+.c16:focus:-ms-input-placeholder {
   color: transparent;
 }
 
-.c7:focus::placeholder {
+.c16:focus::placeholder {
   color: transparent;
 }
 
-.c0 {
-  margin: 0 auto 1rem;
+.c10 {
+  margin-bottom: 1.6rem;
+  margin-left: -2.4rem;
   text-align: left;
 }
 
-.c2 {
+.c12 {
   position: relative;
   margin: 0;
   color: #2f3b6c;
@@ -1086,88 +2747,242 @@ exports[`<Contribution /> should render with conventions answer 1`] = `
   font-size: 2.8rem;
   font-family: "Merriweather",serif;
   line-height: 1.25;
-  padding-left: 3.2rem;
+  padding-left: 2.4rem;
   text-align: left;
 }
 
-.c6 {
+.c15 {
   display: block;
 }
 
-.c1 {
+.c8 {
+  padding-bottom: 0;
+}
+
+.c2 {
+  padding: 2rem 2.4rem;
+  color: #3e486e;
+  border-radius: 0.6rem;
+  background-color: #f2f5fa;
+  border: 1px solid #f2f5fa;
+  margin-bottom: 3.2rem;
+}
+
+.c2 > *:first-child {
+  margin-top: 0;
+}
+
+.c2 > *:last-child {
+  margin-bottom: 0;
+}
+
+.c6 {
+  color: #f66663;
+  font-weight: 600;
+  font-size: 1.8rem;
+}
+
+.c11 {
   margin-top: 0;
 }
 
 @media (max-width:600px) {
-  .c4 {
-    padding: 0 1rem;
+  .c9 {
+    padding: 1.6rem 1rem;
   }
 }
 
 @media print {
+  .c9 {
+    padding: 0 5pt;
+    border: none;
+  }
+}
+
+@media (max-width:600px) {
   .c4 {
-    max-width: 100%;
-    padding: 0;
+    -webkit-flex: 0 0 3.4rem;
+    -ms-flex: 0 0 3.4rem;
+    flex: 0 0 3.4rem;
+    margin-right: 1rem;
   }
 }
 
 @media (max-width:600px) {
-  .c7 {
+  .c16 {
     padding: 0 1rem;
     padding-right: 2rem;
   }
 }
 
 @media (max-width:600px) {
-  .c2 {
+  .c10 {
+    margin-bottom: 1rem;
+    margin-left: -1rem;
+  }
+}
+
+@media (max-width:600px) {
+  .c12 {
     padding-left: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c2 {
+  .c12 {
     font-size: 2.2rem;
   }
 }
 
+@media (max-width:600px) {
+  .c2 {
+    padding: 1.6rem 1rem;
+  }
+}
+
+@media print {
+  .c2 {
+    padding: 0 5pt;
+    border: none;
+  }
+}
+
+@media (max-width:600px) {
+  .c2 {
+    margin-bottom: 2rem;
+  }
+}
+
+@media (max-width:600px) {
+  .c6 {
+    font-size: 1.6rem;
+  }
+}
+
 <div>
-  <section>
-    <header
-      class="c0 c1"
+  <div
+    class="c0"
+  >
+    <div
+      class="c1"
     >
-      <h2
-        class="c2"
+      <svg
+        fill="none"
+        viewBox="0 0 32 32"
       >
-        <div
-          class="c3"
+        <path
+          clip-rule="evenodd"
+          d="M11.938 16.5a3.548 3.548 0 013.562-3.563 3.548 3.548 0 013.563 3.563 3.548 3.548 0 01-3.563 3.563 3.548 3.548 0 01-3.563-3.563zm2.062 0c0 .84.66 1.5 1.5 1.5s1.5-.66 1.5-1.5-.66-1.5-1.5-1.5-1.5.66-1.5 1.5z"
+          fill="currentColor"
+          fill-rule="evenodd"
         />
-        Que dit votre convention collective ?
-      </h2>
-    </header>
-    <div>
+        <path
+          clip-rule="evenodd"
+          d="M25 14.838v3.404l-1.663.87-.474 1.109.554 1.82-2.375 2.376-1.9-.555-1.109.476-.87 1.662h-3.405l-.87-1.663-1.109-.474-1.82.554-2.376-2.375.554-1.9-.475-1.109L6 18.163v-3.405l1.662-.87.475-1.109-.554-1.82 2.375-2.376 1.9.554 1.109-.475.87-1.662h3.405l.87 1.662 1.109.475 1.82-.554 2.376 2.375-.555 1.9.476 1.109 1.662.87zm-4.1 5.112l.825-2.025L23 17.25v-1.5l-1.2-.6-.825-2.025.375-1.35-1.05-1.05-1.35.375-2.025-.825L16.25 9h-1.5l-.6 1.2-2.025.825-1.35-.375-1.05 1.05.375 1.35-.825 2.025L8 15.75v1.5l1.2.6.825 2.025-.375 1.35 1.05 1.05 1.35-.375 2.025.825L14.75 24h1.5l.6-1.2 2.025-.825 1.35.375 1.05-1.05-.375-1.35z"
+          fill="currentColor"
+          fill-rule="evenodd"
+        />
+      </svg>
+    </div>
+  </div>
+  <div
+    class="c2"
+  >
+    <div
+      class="c3"
+    >
       <div
         class="c4"
       >
-        
-        <p>
-          Renseignez le nom de votre entreprise, son SIRET ou le nom de votre convention collective.
-        </p>
-        <span
-          class="c5 c6"
+        <svg
+          fill="none"
+          viewBox="0 0 52 52"
         >
-          <input
-            class="c7"
-            name="q"
-            placeholder="Nom d'entreprise, SIRET, nom de convention collective"
-            role="search"
-            type="search"
-            value=""
+          <path
+            clip-rule="evenodd"
+            d="M17 2L6 13v2c0 1 .398 1 1.076 1h9.693C18.554 16 20 14.657 20 13V4h19a1 1 0 011 1v27h2V5a3 3 0 00-3-3H17zm-.23 12H8L18 4v9c0 .552-.636 1-1.23 1z"
+            fill="#4E6896"
+            fill-rule="evenodd"
+          />
+          <path
+            d="M27 50v-2H9a1 1 0 01-1-1V24s0-1-1-1-1 1-1 1v23a3 3 0 003 3h18zM7 20a1 1 0 100-2 1 1 0 000 2z"
+            fill="#4E6896"
           />
-        </span>
-        
+          <path
+            d="M15.053 20C14.47 20 14 20.448 14 21s.471 1 1.053 1h17.894C33.53 22 34 21.552 34 21s-.471-1-1.053-1H15.053zM14 27c0-.552.471-1 1.053-1h17.894c.582 0 1.053.448 1.053 1s-.471 1-1.053 1H15.053C14.47 28 14 27.552 14 27z"
+            fill="#FF7067"
+          />
+          <path
+            clip-rule="evenodd"
+            d="M36.5 37.938a3.548 3.548 0 00-3.563 3.562 3.548 3.548 0 003.563 3.563 3.548 3.548 0 003.563-3.563 3.548 3.548 0 00-3.563-3.563zm0 5.062c-.84 0-1.5-.66-1.5-1.5s.66-1.5 1.5-1.5 1.5.66 1.5 1.5-.66 1.5-1.5 1.5z"
+            fill="#FF7067"
+            fill-rule="evenodd"
+          />
+          <path
+            clip-rule="evenodd"
+            d="M46 43.242v-3.404l-1.663-.871-.475-1.109.555-1.9-2.375-2.375-1.821.555-1.108-.475L38.241 32h-3.404l-.871 1.663-1.109.475-1.9-.555-2.375 2.375.555 1.821-.476 1.108-1.662.871v3.404l1.663.871.474 1.109-.554 1.9 2.375 2.375 1.821-.555 1.108.475.871 1.663h3.404l.871-1.663 1.109-.475 1.9.555 2.375-2.375-.555-1.821.475-1.108L46 43.241zm-3.275-.317L41.9 44.95l.375 1.35-1.05 1.05-1.35-.375-2.025.825-.6 1.2h-1.5l-.675-1.275-2.025-.825-1.35.375-1.05-1.05.375-1.35-.825-2.025-1.2-.6v-1.5l1.275-.675.825-2.025-.375-1.35 1.05-1.05 1.35.375 2.025-.825.6-1.2h1.5l.675 1.275 2.025.825 1.35-.375 1.05 1.05-.375 1.35.825 2.025 1.2.6v1.5l-1.275.675z"
+            fill="#FF7067"
+            fill-rule="evenodd"
+          />
+        </svg>
+      </div>
+      <div
+        class="c5"
+      >
+        <div
+          class="c6"
+        >
+          Page personnalisable
+        </div>
+        Le contenu de cette page peut être personnalisé en fonction de votre situation.
+         
+        <a
+          href="#customisation"
+        >
+          Voir en bas de page
+        </a>
+         pour renseigner votre covention collective.
       </div>
     </div>
-  </section>
+  </div>
+  <div
+    class="c7 c8"
+  >
+    <div
+      class="c9"
+    >
+      <header
+        class="c10 c11"
+        id="customisation"
+      >
+        <h2
+          class="c12"
+        >
+          <div
+            class="c13"
+          />
+          Que dit votre convention collective ?
+        </h2>
+      </header>
+      
+      <p>
+        Renseignez le nom de votre entreprise, son SIRET ou le nom de votre convention collective.
+      </p>
+      <span
+        class="c14 c15"
+      >
+        <input
+          class="c16"
+          name="q"
+          placeholder="Nom d'entreprise, SIRET, nom de convention collective"
+          role="search"
+          type="search"
+          value=""
+        />
+      </span>
+      
+    </div>
+  </div>
 </div>
 `;
 
@@ -1186,7 +3001,8 @@ exports[`<Contribution /> should render with generic answer 1`] = `
 }
 
 .c0 {
-  margin: 0 auto 1rem;
+  margin-bottom: 1.6rem;
+  margin-left: auto;
   text-align: left;
 }
 
@@ -1202,6 +3018,13 @@ exports[`<Contribution /> should render with generic answer 1`] = `
   text-align: left;
 }
 
+@media (max-width:600px) {
+  .c0 {
+    margin-bottom: 1rem;
+    margin-left: auto;
+  }
+}
+
 @media (max-width:600px) {
   .c1 {
     padding-left: 1.6rem;
@@ -1225,7 +3048,7 @@ exports[`<Contribution /> should render with generic answer 1`] = `
         <div
           class="c2"
         />
-        Que dit le code du travail ?
+        Que dit le code du travail ?
       </h2>
     </header>
     <div>
@@ -1255,7 +3078,8 @@ exports[`<Contribution /> should render with generic answer and content 1`] = `
 }
 
 .c0 {
-  margin: 0 auto 1rem;
+  margin-bottom: 1.6rem;
+  margin-left: auto;
   text-align: left;
 }
 
@@ -1271,6 +3095,13 @@ exports[`<Contribution /> should render with generic answer and content 1`] = `
   text-align: left;
 }
 
+@media (max-width:600px) {
+  .c0 {
+    margin-bottom: 1rem;
+    margin-left: auto;
+  }
+}
+
 @media (max-width:600px) {
   .c1 {
     padding-left: 1.6rem;
@@ -1294,7 +3125,7 @@ exports[`<Contribution /> should render with generic answer and content 1`] = `
         <div
           class="c2"
         />
-        Que dit le code du travail ?
+        Que dit le code du travail ?
       </h2>
     </header>
     <div>
diff --git a/packages/code-du-travail-frontend/src/conventions/Convention/__tests__/__snapshots__/index.test.js.snap b/packages/code-du-travail-frontend/src/conventions/Convention/__tests__/__snapshots__/index.test.js.snap
index 5ac6eb4d9b..0e17b6bd7b 100644
--- a/packages/code-du-travail-frontend/src/conventions/Convention/__tests__/__snapshots__/index.test.js.snap
+++ b/packages/code-du-travail-frontend/src/conventions/Convention/__tests__/__snapshots__/index.test.js.snap
@@ -97,7 +97,7 @@ exports[`<Convention /> renders 1`] = `
   padding: 1rem 2rem;
   color: #3e486e;
   background-color: #f2f5fa;
-  border: 1px solid transparent;
+  border: 1px solid #f2f5fa;
   border-radius: 0.6rem;
 }
 
@@ -412,7 +412,8 @@ exports[`<Convention /> renders 1`] = `
 }
 
 .c2 {
-  margin: 0 auto 1rem;
+  margin-bottom: 1.6rem;
+  margin-left: auto;
   text-align: left;
 }
 
@@ -587,6 +588,13 @@ exports[`<Convention /> renders 1`] = `
   }
 }
 
+@media (max-width:600px) {
+  .c2 {
+    margin-bottom: 1rem;
+    margin-left: auto;
+  }
+}
+
 @media (max-width:600px) {
   .c4 {
     padding-left: 1.6rem;
diff --git a/packages/code-du-travail-frontend/src/conventions/Search/Form.js b/packages/code-du-travail-frontend/src/conventions/Search/Form.js
index 41b54ac9e4..6027d398a6 100755
--- a/packages/code-du-travail-frontend/src/conventions/Search/Form.js
+++ b/packages/code-du-travail-frontend/src/conventions/Search/Form.js
@@ -5,7 +5,7 @@ import Link from "next/link";
 import Spinner from "react-svg-spinner";
 
 import slugify from "@cdt/data/slugify";
-import { Container, Input, Table, Heading, theme } from "@socialgouv/react-ui";
+import { Input, Table, Heading, theme } from "@socialgouv/react-ui";
 import { formatIdcc } from "@cdt/data/lib";
 
 import SearchCC from "./SearchCC";
@@ -56,8 +56,8 @@ const TagSiret = ({ siret }) => (
 
 const SearchResult = ({ label, siret, conventions, selectConvention }) => {
   return (
-    <tr>
-      <td>
+    <StyledTr>
+      <StyledTd>
         <Flex>
           <ResultLabel>{label}</ResultLabel>
           {siret && <TagSiret siret={siret} />}
@@ -78,8 +78,8 @@ const SearchResult = ({ label, siret, conventions, selectConvention }) => {
             <div>Aucune convention collective connue pour cette entreprise</div>
           )}
         </ConventionsContainer>
-      </td>
-    </tr>
+      </StyledTd>
+    </StyledTr>
   );
 };
 
@@ -88,8 +88,6 @@ const SearchResult = ({ label, siret, conventions, selectConvention }) => {
 const Search = ({
   title = "Recherche de convention collective",
   resetOnClick = true,
-  style,
-  className,
   onSelectConvention
 }) => {
   const [query, setQuery] = useState("");
@@ -107,7 +105,7 @@ const Search = ({
   };
 
   return (
-    <Container style={style} className={className}>
+    <>
       {title && <Heading>{title}</Heading>}
       <p>
         Renseignez le nom de votre entreprise, son SIRET ou le nom de votre
@@ -145,7 +143,7 @@ const Search = ({
                       {resultsConventions.length !== 0 && (
                         <React.Fragment>
                           <TitleResults>
-                            <td>Conventions collectives</td>
+                            <StyledTd>Conventions collectives</StyledTd>
                           </TitleResults>
                           {resultsConventions.map(result => (
                             <SearchResult
@@ -162,7 +160,7 @@ const Search = ({
                       {resultsEntreprises.length !== 0 && (
                         <React.Fragment>
                           <TitleResults>
-                            <td>Entreprises</td>
+                            <StyledTd>Entreprises</StyledTd>
                           </TitleResults>
                           {resultsEntreprises.map(result => (
                             <SearchResult
@@ -184,17 +182,19 @@ const Search = ({
           );
         }}
       />
-    </Container>
+    </>
   );
 };
 
-const { colors, fonts, spacings, breakpoints } = theme;
+const { box, colors, fonts, spacings, breakpoints } = theme;
 const BlockInput = styled(Input)`
   display: block;
 `;
 const FixedTable = styled(Table)`
   width: 100%;
-  table-layout: fixed;
+  overflow: hidden;
+  border: none;
+  border-radius: ${box.borderRadius};
 `;
 
 const TitleResults = styled.tr`
@@ -202,6 +202,16 @@ const TitleResults = styled.tr`
   background: ${colors.bgTertiary};
 `;
 
+const StyledTr = styled.tr`
+  & + & {
+    border-top: ${({ theme }) => box.border(theme.border)};
+  }
+`;
+
+const StyledTd = styled.td`
+  border: none !important;
+`;
+
 const ResultsContainer = styled.div`
   margin-top: ${spacings.medium};
 `;
diff --git a/packages/code-du-travail-frontend/src/conventions/Search/__tests__/__snapshots__/Modal.test.js.snap b/packages/code-du-travail-frontend/src/conventions/Search/__tests__/__snapshots__/Modal.test.js.snap
index 06f1861b73..882a7db7f7 100644
--- a/packages/code-du-travail-frontend/src/conventions/Search/__tests__/__snapshots__/Modal.test.js.snap
+++ b/packages/code-du-travail-frontend/src/conventions/Search/__tests__/__snapshots__/Modal.test.js.snap
@@ -12,20 +12,6 @@ exports[`<ConventionModal /> should render 1`] = `
 
 exports[`<ConventionModal /> should render a popup when click on button 1`] = `
 .c2 {
-  max-width: 124rem;
-  margin: 0 auto;
-  padding: 0 2rem;
-}
-
-.c2 > *:first-child {
-  margin-top: 0;
-}
-
-.c2 > *:last-child {
-  margin-bottom: 0;
-}
-
-.c3 {
   position: relative;
   margin: 0 0 1rem 0;
   color: #2f3b6c;
@@ -35,7 +21,7 @@ exports[`<ConventionModal /> should render a popup when click on button 1`] = `
   line-height: 1.25;
 }
 
-.c7 {
+.c6 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -72,16 +58,16 @@ exports[`<ConventionModal /> should render a popup when click on button 1`] = `
   opacity: 1;
 }
 
-.c7:link,
-.c7:visited {
+.c6:link,
+.c6:visited {
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #3e486e;
 }
 
-.c7:not([disabled]):hover,
-.c7:not([disabled]):active,
-.c7:not([disabled]):focus {
+.c6:not([disabled]):hover,
+.c6:not([disabled]):active,
+.c6:not([disabled]):focus {
   opacity: 0.6;
   -webkit-transform: translateY(-2px);
   -ms-transform: translateY(-2px);
@@ -90,13 +76,13 @@ exports[`<ConventionModal /> should render a popup when click on button 1`] = `
   border-color: transparent;
 }
 
-.c7[disabled] {
+.c6[disabled] {
   color: rgba(62,72,110,0.4);
   box-shadow: none;
   cursor: not-allowed;
 }
 
-.c9:not(:focus):not(:active) {
+.c8:not(:focus):not(:active) {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -132,18 +118,18 @@ exports[`<ConventionModal /> should render a popup when click on button 1`] = `
   outline: none;
 }
 
-.c8 {
+.c7 {
   position: absolute;
   top: 0;
   right: 0;
 }
 
-.c4 {
+.c3 {
   position: relative;
   display: inline-block;
 }
 
-.c6 {
+.c5 {
   width: 100%;
   height: 5.4rem;
   padding: 0 2rem;
@@ -165,15 +151,15 @@ exports[`<ConventionModal /> should render a popup when click on button 1`] = `
   appearance: none;
 }
 
-.c6::-webkit-outer-spin-button,
-.c6::-webkit-inner-spin-button {
+.c5::-webkit-outer-spin-button,
+.c5::-webkit-inner-spin-button {
   margin: 0;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c6::-webkit-calendar-picker-indicator {
+.c5::-webkit-calendar-picker-indicator {
   display: block;
   width: 3.2rem;
   height: 3.2rem;
@@ -186,71 +172,58 @@ exports[`<ConventionModal /> should render a popup when click on button 1`] = `
   mask-image: url("data:image/svg+xml;,%3Csvg%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.947%207.601h1.601c1.472%200%202.521%201.198%202.521%202.669v2.306l-.001%2010.392c0%201.472-1.049%202.669-2.521%202.669H8.669A2.672%202.672%200%20016%2022.967l.001-12.697a2.672%202.672%200%20012.67-2.669h1.331V6h.999v1.601H20V6h.947v1.601zm1.6%2017.036c.883%200%201.454-.786%201.454-1.67v-10.33h-17L7%2022.967c0%20.884.785%201.67%201.668%201.67h13.879zm-15.548-13h17.002l.001-1.367c0-.883-.57-1.601-1.453-1.601h-1.6v1.068H20V8.669h-9v1.068h-1V8.669H8.669C7.786%208.669%207%209.387%207%2010.27v1.367zm9.677%206.277h-2.135a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203h-2.135v2.135h2.136v-2.135zm3.203%203.203h2.135a1.07%201.07%200%20001.068-1.068v-2.135a1.07%201.07%200%2000-1.068-1.068H19.88a1.07%201.07%200%2000-1.068%201.068v2.135a1.07%201.07%200%20001.068%201.068zm0-3.203h2.135l.001%202.135H19.88v-2.135zm-8.54%208.541H9.204a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203H9.204v2.135h2.136l-.001-2.135zm3.202%203.203h2.135a1.07%201.07%200%20001.068-1.068v-2.135a1.07%201.07%200%2000-1.068-1.068h-2.135a1.07%201.07%200%2000-1.068%201.068v2.135a1.07%201.07%200%20001.068%201.068zm0-3.203h2.135l.001%202.135h-2.136v-2.135zm7.473%203.203H19.88a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203H19.88v2.135h2.136v-2.135z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
 }
 
-.c6:invalid {
+.c5:invalid {
   border-color: #eb5757;
 }
 
-.c6::-webkit-input-placeholder {
+.c5::-webkit-input-placeholder {
   color: #9298af;
 }
 
-.c6::-moz-placeholder {
+.c5::-moz-placeholder {
   color: #9298af;
 }
 
-.c6:-ms-input-placeholder {
+.c5:-ms-input-placeholder {
   color: #9298af;
 }
 
-.c6::placeholder {
+.c5::placeholder {
   color: #9298af;
 }
 
-.c6:focus {
+.c5:focus {
   border-color: #7994d4;
 }
 
-.c6:focus::-webkit-input-placeholder {
+.c5:focus::-webkit-input-placeholder {
   color: transparent;
 }
 
-.c6:focus::-moz-placeholder {
+.c5:focus::-moz-placeholder {
   color: transparent;
 }
 
-.c6:focus:-ms-input-placeholder {
+.c5:focus:-ms-input-placeholder {
   color: transparent;
 }
 
-.c6:focus::placeholder {
+.c5:focus::placeholder {
   color: transparent;
 }
 
-.c5 {
+.c4 {
   display: block;
 }
 
 @media (max-width:600px) {
   .c2 {
-    padding: 0 1rem;
-  }
-}
-
-@media print {
-  .c2 {
-    max-width: 100%;
-    padding: 0;
-  }
-}
-
-@media (max-width:600px) {
-  .c3 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c7 {
+  .c6 {
     font-size: 1.4rem;
   }
 }
@@ -276,7 +249,7 @@ exports[`<ConventionModal /> should render a popup when click on button 1`] = `
 }
 
 @media (max-width:600px) {
-  .c8 {
+  .c7 {
     position: fixed;
     top: 1rem;
     right: 1rem;
@@ -284,7 +257,7 @@ exports[`<ConventionModal /> should render a popup when click on button 1`] = `
 }
 
 @media (max-width:600px) {
-  .c6 {
+  .c5 {
     padding: 0 1rem;
     padding-right: 2rem;
   }
@@ -327,37 +300,33 @@ exports[`<ConventionModal /> should render a popup when click on button 1`] = `
             role="dialog"
             tabindex="-1"
           >
-            <div
+            <h3
               class="c2"
             >
-              <h3
-                class="c3"
-              >
-                Recherche de convention collective
-              </h3>
-              <p>
-                Renseignez le nom de votre entreprise, son SIRET ou le nom de votre convention collective.
-              </p>
-              <span
-                class="c4 c5"
-              >
-                <input
-                  class="c6"
-                  name="q"
-                  placeholder="Nom d'entreprise, SIRET, nom de convention collective"
-                  role="search"
-                  type="search"
-                  value=""
-                />
-              </span>
-              
-            </div>
+              Recherche de convention collective
+            </h3>
+            <p>
+              Renseignez le nom de votre entreprise, son SIRET ou le nom de votre convention collective.
+            </p>
+            <span
+              class="c3 c4"
+            >
+              <input
+                class="c5"
+                name="q"
+                placeholder="Nom d'entreprise, SIRET, nom de convention collective"
+                role="search"
+                type="search"
+                value=""
+              />
+            </span>
+            
             <button
-              class="c7 c8"
+              class="c6 c7"
               title="fermer la modale"
             >
               <div
-                class="c9"
+                class="c8"
               >
                 fermer la modale
               </div>
diff --git a/packages/code-du-travail-frontend/src/conventions/Search/__tests__/__snapshots__/Search.test.js.snap b/packages/code-du-travail-frontend/src/conventions/Search/__tests__/__snapshots__/Search.test.js.snap
index 48da7fced3..4a4ad871ef 100644
--- a/packages/code-du-travail-frontend/src/conventions/Search/__tests__/__snapshots__/Search.test.js.snap
+++ b/packages/code-du-travail-frontend/src/conventions/Search/__tests__/__snapshots__/Search.test.js.snap
@@ -2,20 +2,6 @@
 
 exports[`<Search /> should not use siret2idcc when no entreprise result 1`] = `
 .c0 {
-  max-width: 124rem;
-  margin: 0 auto;
-  padding: 0 2rem;
-}
-
-.c0 > *:first-child {
-  margin-top: 0;
-}
-
-.c0 > *:last-child {
-  margin-bottom: 0;
-}
-
-.c1 {
   position: relative;
   margin: 0 0 1rem 0;
   color: #2f3b6c;
@@ -25,13 +11,13 @@ exports[`<Search /> should not use siret2idcc when no entreprise result 1`] = `
   line-height: 1.25;
 }
 
-.c6 {
+.c5 {
   position: relative;
   overflow: hidden;
 }
 
-.c6:before,
-.c6:after {
+.c5:before,
+.c5:after {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -46,19 +32,19 @@ exports[`<Search /> should not use siret2idcc when no entreprise result 1`] = `
   background: radial-gradient( ellipse at center, #fff 15%, rgba(255,255,255,0) 80% );
 }
 
-.c6:before {
+.c5:before {
   left: -2rem;
 }
 
-.c6:after {
+.c5:after {
   right: -2rem;
 }
 
-.c7 {
+.c6 {
   overflow-x: auto;
 }
 
-.c8 {
+.c7 {
   text-align: left;
   empty-cells: show;
   background-color: #fff;
@@ -67,41 +53,41 @@ exports[`<Search /> should not use siret2idcc when no entreprise result 1`] = `
   border-spacing: 0;
 }
 
-.c8 caption {
+.c7 caption {
   padding: 1rem 0;
   font-style: italic;
   text-align: center;
 }
 
-.c8 td,
-.c8 th {
+.c7 td,
+.c7 th {
   padding: 1rem 1.6rem;
   border: 1px solid #bbcadf;
 }
 
-.c8 th {
+.c7 th {
   color: #2f3b6c;
   font-weight: 600;
   background: #e4e8ef;
 }
 
-.c8 thead,
-.c8 tfoot {
+.c7 thead,
+.c7 tfoot {
   padding: 1rem 1.6rem;
   vertical-align: bottom;
   background: #f2f5fa;
 }
 
-.c8 tfoot {
+.c7 tfoot {
   vertical-align: top;
 }
 
-.c2 {
+.c1 {
   position: relative;
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   width: 100%;
   height: 5.4rem;
   padding: 0 2rem;
@@ -123,15 +109,15 @@ exports[`<Search /> should not use siret2idcc when no entreprise result 1`] = `
   appearance: none;
 }
 
-.c4::-webkit-outer-spin-button,
-.c4::-webkit-inner-spin-button {
+.c3::-webkit-outer-spin-button,
+.c3::-webkit-inner-spin-button {
   margin: 0;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c4::-webkit-calendar-picker-indicator {
+.c3::-webkit-calendar-picker-indicator {
   display: block;
   width: 3.2rem;
   height: 3.2rem;
@@ -144,78 +130,88 @@ exports[`<Search /> should not use siret2idcc when no entreprise result 1`] = `
   mask-image: url("data:image/svg+xml;,%3Csvg%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.947%207.601h1.601c1.472%200%202.521%201.198%202.521%202.669v2.306l-.001%2010.392c0%201.472-1.049%202.669-2.521%202.669H8.669A2.672%202.672%200%20016%2022.967l.001-12.697a2.672%202.672%200%20012.67-2.669h1.331V6h.999v1.601H20V6h.947v1.601zm1.6%2017.036c.883%200%201.454-.786%201.454-1.67v-10.33h-17L7%2022.967c0%20.884.785%201.67%201.668%201.67h13.879zm-15.548-13h17.002l.001-1.367c0-.883-.57-1.601-1.453-1.601h-1.6v1.068H20V8.669h-9v1.068h-1V8.669H8.669C7.786%208.669%207%209.387%207%2010.27v1.367zm9.677%206.277h-2.135a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203h-2.135v2.135h2.136v-2.135zm3.203%203.203h2.135a1.07%201.07%200%20001.068-1.068v-2.135a1.07%201.07%200%2000-1.068-1.068H19.88a1.07%201.07%200%2000-1.068%201.068v2.135a1.07%201.07%200%20001.068%201.068zm0-3.203h2.135l.001%202.135H19.88v-2.135zm-8.54%208.541H9.204a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203H9.204v2.135h2.136l-.001-2.135zm3.202%203.203h2.135a1.07%201.07%200%20001.068-1.068v-2.135a1.07%201.07%200%2000-1.068-1.068h-2.135a1.07%201.07%200%2000-1.068%201.068v2.135a1.07%201.07%200%20001.068%201.068zm0-3.203h2.135l.001%202.135h-2.136v-2.135zm7.473%203.203H19.88a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203H19.88v2.135h2.136v-2.135z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
 }
 
-.c4:invalid {
+.c3:invalid {
   border-color: #eb5757;
 }
 
-.c4::-webkit-input-placeholder {
+.c3::-webkit-input-placeholder {
   color: #9298af;
 }
 
-.c4::-moz-placeholder {
+.c3::-moz-placeholder {
   color: #9298af;
 }
 
-.c4:-ms-input-placeholder {
+.c3:-ms-input-placeholder {
   color: #9298af;
 }
 
-.c4::placeholder {
+.c3::placeholder {
   color: #9298af;
 }
 
-.c4:focus {
+.c3:focus {
   border-color: #7994d4;
 }
 
-.c4:focus::-webkit-input-placeholder {
+.c3:focus::-webkit-input-placeholder {
   color: transparent;
 }
 
-.c4:focus::-moz-placeholder {
+.c3:focus::-moz-placeholder {
   color: transparent;
 }
 
-.c4:focus:-ms-input-placeholder {
+.c3:focus:-ms-input-placeholder {
   color: transparent;
 }
 
-.c4:focus::placeholder {
+.c3:focus::placeholder {
   color: transparent;
 }
 
-.c3 {
+.c2 {
   display: block;
 }
 
-.c9 {
+.c8 {
   width: 100%;
-  table-layout: fixed;
+  overflow: hidden;
+  border: none;
+  border-radius: 0.6rem;
 }
 
-.c10 {
+.c9 {
   font-weight: bold;
   background: #e4e8ef;
 }
 
-.c5 {
+.c12 + .c11 {
+  border-top: 1px solid #bbcadf;
+}
+
+.c10 {
+  border: none !important;
+}
+
+.c4 {
   margin-top: 2rem;
 }
 
-.c15 {
+.c17 {
   color: #4d73b8;
   cursor: pointer;
 }
 
-.c14 {
+.c16 {
   margin: 1rem 0;
 }
 
-.c13 {
+.c15 {
   margin-top: 1rem;
 }
 
-.c11 {
+.c13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -233,7 +229,7 @@ exports[`<Search /> should not use siret2idcc when no entreprise result 1`] = `
   justify-content: space-between;
 }
 
-.c12 {
+.c14 {
   -webkit-flex: 1 1 calc(100% - 200px);
   -ms-flex: 1 1 calc(100% - 200px);
   flex: 1 1 calc(100% - 200px);
@@ -250,51 +246,38 @@ exports[`<Search /> should not use siret2idcc when no entreprise result 1`] = `
 
 @media (max-width:600px) {
   .c0 {
-    padding: 0 1rem;
-  }
-}
-
-@media print {
-  .c0 {
-    max-width: 100%;
-    padding: 0;
-  }
-}
-
-@media (max-width:600px) {
-  .c1 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c6 {
+  .c5 {
     overflow-x: hidden;
   }
 }
 
 @media (max-width:600px) {
-  .c6:before,
-  .c6:after {
+  .c5:before,
+  .c5:after {
     display: block;
   }
 }
 
 @media (max-width:600px) {
-  .c7 {
+  .c6 {
     overflow-x: auto;
   }
 }
 
 @media (max-width:600px) {
-  .c4 {
+  .c3 {
     padding: 0 1rem;
     padding-right: 2rem;
   }
 }
 
 @media screen and (min-width:980px) {
-  .c11 {
+  .c13 {
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
@@ -306,7 +289,7 @@ exports[`<Search /> should not use siret2idcc when no entreprise result 1`] = `
 }
 
 @media screen and (min-width:980px) {
-  .c12 {
+  .c14 {
     -webkit-align-self: baseline;
     -ms-flex-item-align: baseline;
     align-self: baseline;
@@ -317,82 +300,84 @@ exports[`<Search /> should not use siret2idcc when no entreprise result 1`] = `
 }
 
 <div>
-  <div
+  <h3
     class="c0"
   >
-    <h3
-      class="c1"
-    >
-      Recherche de convention collective
-    </h3>
-    <p>
-      Renseignez le nom de votre entreprise, son SIRET ou le nom de votre convention collective.
-    </p>
-    <span
-      class="c2 c3"
-    >
-      <input
-        class="c4"
-        name="q"
-        placeholder="Nom d'entreprise, SIRET, nom de convention collective"
-        role="search"
-        type="search"
-        value="xxxx"
-      />
-    </span>
+    Recherche de convention collective
+  </h3>
+  <p>
+    Renseignez le nom de votre entreprise, son SIRET ou le nom de votre convention collective.
+  </p>
+  <span
+    class="c1 c2"
+  >
+    <input
+      class="c3"
+      name="q"
+      placeholder="Nom d'entreprise, SIRET, nom de convention collective"
+      role="search"
+      type="search"
+      value="xxxx"
+    />
+  </span>
+  <div
+    class="c4"
+  >
     <div
       class="c5"
     >
       <div
         class="c6"
       >
-        <div
-          class="c7"
+        <table
+          class="c7 c8"
         >
-          <table
-            class="c8 c9"
-          >
-            <tbody>
-              <tr
+          <tbody>
+            <tr
+              class="c9"
+            >
+              <td
                 class="c10"
               >
-                <td>
-                  Conventions collectives
-                </td>
-              </tr>
-              <tr>
-                <td>
+                Conventions collectives
+              </td>
+            </tr>
+            <tr
+              class="c11 c12"
+            >
+              <td
+                class="c10"
+              >
+                <div
+                  class="c13"
+                >
                   <div
-                    class="c11"
-                  >
-                    <div
-                      class="c12"
-                    />
-                  </div>
+                    class="c14"
+                  />
+                </div>
+                <div
+                  class="c15"
+                >
                   <div
-                    class="c13"
+                    class="c16"
                   >
-                    <div
-                      class="c14"
-                    >
-                      <span>
-                        <a
-                          class="c15"
-                        >
-                          small title 1
-                        </a>
-                         (IDCC
-                         
-                        0275
-                        )
-                      </span>
-                    </div>
+                    <span>
+                      <a
+                        class="c17"
+                      >
+                        small title 1
+                      </a>
+                       (IDCC
+                       
+                      0275
+                      )
+                    </span>
                   </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
     </div>
   </div>
@@ -401,20 +386,6 @@ exports[`<Search /> should not use siret2idcc when no entreprise result 1`] = `
 
 exports[`<Search /> should render 1`] = `
 .c0 {
-  max-width: 124rem;
-  margin: 0 auto;
-  padding: 0 2rem;
-}
-
-.c0 > *:first-child {
-  margin-top: 0;
-}
-
-.c0 > *:last-child {
-  margin-bottom: 0;
-}
-
-.c1 {
   position: relative;
   margin: 0 0 1rem 0;
   color: #2f3b6c;
@@ -424,12 +395,12 @@ exports[`<Search /> should render 1`] = `
   line-height: 1.25;
 }
 
-.c2 {
+.c1 {
   position: relative;
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   width: 100%;
   height: 5.4rem;
   padding: 0 2rem;
@@ -451,15 +422,15 @@ exports[`<Search /> should render 1`] = `
   appearance: none;
 }
 
-.c4::-webkit-outer-spin-button,
-.c4::-webkit-inner-spin-button {
+.c3::-webkit-outer-spin-button,
+.c3::-webkit-inner-spin-button {
   margin: 0;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c4::-webkit-calendar-picker-indicator {
+.c3::-webkit-calendar-picker-indicator {
   display: block;
   width: 3.2rem;
   height: 3.2rem;
@@ -472,121 +443,90 @@ exports[`<Search /> should render 1`] = `
   mask-image: url("data:image/svg+xml;,%3Csvg%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.947%207.601h1.601c1.472%200%202.521%201.198%202.521%202.669v2.306l-.001%2010.392c0%201.472-1.049%202.669-2.521%202.669H8.669A2.672%202.672%200%20016%2022.967l.001-12.697a2.672%202.672%200%20012.67-2.669h1.331V6h.999v1.601H20V6h.947v1.601zm1.6%2017.036c.883%200%201.454-.786%201.454-1.67v-10.33h-17L7%2022.967c0%20.884.785%201.67%201.668%201.67h13.879zm-15.548-13h17.002l.001-1.367c0-.883-.57-1.601-1.453-1.601h-1.6v1.068H20V8.669h-9v1.068h-1V8.669H8.669C7.786%208.669%207%209.387%207%2010.27v1.367zm9.677%206.277h-2.135a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203h-2.135v2.135h2.136v-2.135zm3.203%203.203h2.135a1.07%201.07%200%20001.068-1.068v-2.135a1.07%201.07%200%2000-1.068-1.068H19.88a1.07%201.07%200%2000-1.068%201.068v2.135a1.07%201.07%200%20001.068%201.068zm0-3.203h2.135l.001%202.135H19.88v-2.135zm-8.54%208.541H9.204a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203H9.204v2.135h2.136l-.001-2.135zm3.202%203.203h2.135a1.07%201.07%200%20001.068-1.068v-2.135a1.07%201.07%200%2000-1.068-1.068h-2.135a1.07%201.07%200%2000-1.068%201.068v2.135a1.07%201.07%200%20001.068%201.068zm0-3.203h2.135l.001%202.135h-2.136v-2.135zm7.473%203.203H19.88a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203H19.88v2.135h2.136v-2.135z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
 }
 
-.c4:invalid {
+.c3:invalid {
   border-color: #eb5757;
 }
 
-.c4::-webkit-input-placeholder {
+.c3::-webkit-input-placeholder {
   color: #9298af;
 }
 
-.c4::-moz-placeholder {
+.c3::-moz-placeholder {
   color: #9298af;
 }
 
-.c4:-ms-input-placeholder {
+.c3:-ms-input-placeholder {
   color: #9298af;
 }
 
-.c4::placeholder {
+.c3::placeholder {
   color: #9298af;
 }
 
-.c4:focus {
+.c3:focus {
   border-color: #7994d4;
 }
 
-.c4:focus::-webkit-input-placeholder {
+.c3:focus::-webkit-input-placeholder {
   color: transparent;
 }
 
-.c4:focus::-moz-placeholder {
+.c3:focus::-moz-placeholder {
   color: transparent;
 }
 
-.c4:focus:-ms-input-placeholder {
+.c3:focus:-ms-input-placeholder {
   color: transparent;
 }
 
-.c4:focus::placeholder {
+.c3:focus::placeholder {
   color: transparent;
 }
 
-.c3 {
+.c2 {
   display: block;
 }
 
 @media (max-width:600px) {
   .c0 {
-    padding: 0 1rem;
-  }
-}
-
-@media print {
-  .c0 {
-    max-width: 100%;
-    padding: 0;
-  }
-}
-
-@media (max-width:600px) {
-  .c1 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c4 {
+  .c3 {
     padding: 0 1rem;
     padding-right: 2rem;
   }
 }
 
 <div>
-  <div
+  <h3
     class="c0"
   >
-    <h3
-      class="c1"
-    >
-      Recherche de convention collective
-    </h3>
-    <p>
-      Renseignez le nom de votre entreprise, son SIRET ou le nom de votre convention collective.
-    </p>
-    <span
-      class="c2 c3"
-    >
-      <input
-        class="c4"
-        name="q"
-        placeholder="Nom d'entreprise, SIRET, nom de convention collective"
-        role="search"
-        type="search"
-        value=""
-      />
-    </span>
-    
-  </div>
+    Recherche de convention collective
+  </h3>
+  <p>
+    Renseignez le nom de votre entreprise, son SIRET ou le nom de votre convention collective.
+  </p>
+  <span
+    class="c1 c2"
+  >
+    <input
+      class="c3"
+      name="q"
+      placeholder="Nom d'entreprise, SIRET, nom de convention collective"
+      role="search"
+      type="search"
+      value=""
+    />
+  </span>
+  
 </div>
 `;
 
 exports[`<Search /> should show no results when no result 1`] = `
 .c0 {
-  max-width: 124rem;
-  margin: 0 auto;
-  padding: 0 2rem;
-}
-
-.c0 > *:first-child {
-  margin-top: 0;
-}
-
-.c0 > *:last-child {
-  margin-bottom: 0;
-}
-
-.c1 {
   position: relative;
   margin: 0 0 1rem 0;
   color: #2f3b6c;
@@ -596,12 +536,12 @@ exports[`<Search /> should show no results when no result 1`] = `
   line-height: 1.25;
 }
 
-.c2 {
+.c1 {
   position: relative;
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   width: 100%;
   height: 5.4rem;
   padding: 0 2rem;
@@ -623,15 +563,15 @@ exports[`<Search /> should show no results when no result 1`] = `
   appearance: none;
 }
 
-.c4::-webkit-outer-spin-button,
-.c4::-webkit-inner-spin-button {
+.c3::-webkit-outer-spin-button,
+.c3::-webkit-inner-spin-button {
   margin: 0;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c4::-webkit-calendar-picker-indicator {
+.c3::-webkit-calendar-picker-indicator {
   display: block;
   width: 3.2rem;
   height: 3.2rem;
@@ -644,110 +584,93 @@ exports[`<Search /> should show no results when no result 1`] = `
   mask-image: url("data:image/svg+xml;,%3Csvg%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.947%207.601h1.601c1.472%200%202.521%201.198%202.521%202.669v2.306l-.001%2010.392c0%201.472-1.049%202.669-2.521%202.669H8.669A2.672%202.672%200%20016%2022.967l.001-12.697a2.672%202.672%200%20012.67-2.669h1.331V6h.999v1.601H20V6h.947v1.601zm1.6%2017.036c.883%200%201.454-.786%201.454-1.67v-10.33h-17L7%2022.967c0%20.884.785%201.67%201.668%201.67h13.879zm-15.548-13h17.002l.001-1.367c0-.883-.57-1.601-1.453-1.601h-1.6v1.068H20V8.669h-9v1.068h-1V8.669H8.669C7.786%208.669%207%209.387%207%2010.27v1.367zm9.677%206.277h-2.135a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203h-2.135v2.135h2.136v-2.135zm3.203%203.203h2.135a1.07%201.07%200%20001.068-1.068v-2.135a1.07%201.07%200%2000-1.068-1.068H19.88a1.07%201.07%200%2000-1.068%201.068v2.135a1.07%201.07%200%20001.068%201.068zm0-3.203h2.135l.001%202.135H19.88v-2.135zm-8.54%208.541H9.204a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203H9.204v2.135h2.136l-.001-2.135zm3.202%203.203h2.135a1.07%201.07%200%20001.068-1.068v-2.135a1.07%201.07%200%2000-1.068-1.068h-2.135a1.07%201.07%200%2000-1.068%201.068v2.135a1.07%201.07%200%20001.068%201.068zm0-3.203h2.135l.001%202.135h-2.136v-2.135zm7.473%203.203H19.88a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203H19.88v2.135h2.136v-2.135z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
 }
 
-.c4:invalid {
+.c3:invalid {
   border-color: #eb5757;
 }
 
-.c4::-webkit-input-placeholder {
+.c3::-webkit-input-placeholder {
   color: #9298af;
 }
 
-.c4::-moz-placeholder {
+.c3::-moz-placeholder {
   color: #9298af;
 }
 
-.c4:-ms-input-placeholder {
+.c3:-ms-input-placeholder {
   color: #9298af;
 }
 
-.c4::placeholder {
+.c3::placeholder {
   color: #9298af;
 }
 
-.c4:focus {
+.c3:focus {
   border-color: #7994d4;
 }
 
-.c4:focus::-webkit-input-placeholder {
+.c3:focus::-webkit-input-placeholder {
   color: transparent;
 }
 
-.c4:focus::-moz-placeholder {
+.c3:focus::-moz-placeholder {
   color: transparent;
 }
 
-.c4:focus:-ms-input-placeholder {
+.c3:focus:-ms-input-placeholder {
   color: transparent;
 }
 
-.c4:focus::placeholder {
+.c3:focus::placeholder {
   color: transparent;
 }
 
-.c3 {
+.c2 {
   display: block;
 }
 
-.c5 {
+.c4 {
   margin-top: 2rem;
 }
 
 @media (max-width:600px) {
   .c0 {
-    padding: 0 1rem;
-  }
-}
-
-@media print {
-  .c0 {
-    max-width: 100%;
-    padding: 0;
-  }
-}
-
-@media (max-width:600px) {
-  .c1 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c4 {
+  .c3 {
     padding: 0 1rem;
     padding-right: 2rem;
   }
 }
 
 <div>
-  <div
+  <h3
     class="c0"
   >
-    <h3
-      class="c1"
-    >
-      Recherche de convention collective
-    </h3>
-    <p>
-      Renseignez le nom de votre entreprise, son SIRET ou le nom de votre convention collective.
-    </p>
-    <span
-      class="c2 c3"
-    >
-      <input
-        class="c4"
-        name="q"
-        placeholder="Nom d'entreprise, SIRET, nom de convention collective"
-        role="search"
-        type="search"
-        value="9999"
-      />
-    </span>
-    <div
-      class="c5"
-    >
-      <div>
-        La convention collective n‘a pas été trouvée.
-      </div>
+    Recherche de convention collective
+  </h3>
+  <p>
+    Renseignez le nom de votre entreprise, son SIRET ou le nom de votre convention collective.
+  </p>
+  <span
+    class="c1 c2"
+  >
+    <input
+      class="c3"
+      name="q"
+      placeholder="Nom d'entreprise, SIRET, nom de convention collective"
+      role="search"
+      type="search"
+      value="9999"
+    />
+  </span>
+  <div
+    class="c4"
+  >
+    <div>
+      La convention collective n‘a pas été trouvée.
     </div>
   </div>
 </div>
@@ -755,20 +678,6 @@ exports[`<Search /> should show no results when no result 1`] = `
 
 exports[`<Search /> should show spinner when loading 1`] = `
 .c0 {
-  max-width: 124rem;
-  margin: 0 auto;
-  padding: 0 2rem;
-}
-
-.c0 > *:first-child {
-  margin-top: 0;
-}
-
-.c0 > *:last-child {
-  margin-bottom: 0;
-}
-
-.c1 {
   position: relative;
   margin: 0 0 1rem 0;
   color: #2f3b6c;
@@ -778,12 +687,12 @@ exports[`<Search /> should show spinner when loading 1`] = `
   line-height: 1.25;
 }
 
-.c2 {
+.c1 {
   position: relative;
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   width: 100%;
   height: 5.4rem;
   padding: 0 2rem;
@@ -805,15 +714,15 @@ exports[`<Search /> should show spinner when loading 1`] = `
   appearance: none;
 }
 
-.c4::-webkit-outer-spin-button,
-.c4::-webkit-inner-spin-button {
+.c3::-webkit-outer-spin-button,
+.c3::-webkit-inner-spin-button {
   margin: 0;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c4::-webkit-calendar-picker-indicator {
+.c3::-webkit-calendar-picker-indicator {
   display: block;
   width: 3.2rem;
   height: 3.2rem;
@@ -826,129 +735,113 @@ exports[`<Search /> should show spinner when loading 1`] = `
   mask-image: url("data:image/svg+xml;,%3Csvg%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.947%207.601h1.601c1.472%200%202.521%201.198%202.521%202.669v2.306l-.001%2010.392c0%201.472-1.049%202.669-2.521%202.669H8.669A2.672%202.672%200%20016%2022.967l.001-12.697a2.672%202.672%200%20012.67-2.669h1.331V6h.999v1.601H20V6h.947v1.601zm1.6%2017.036c.883%200%201.454-.786%201.454-1.67v-10.33h-17L7%2022.967c0%20.884.785%201.67%201.668%201.67h13.879zm-15.548-13h17.002l.001-1.367c0-.883-.57-1.601-1.453-1.601h-1.6v1.068H20V8.669h-9v1.068h-1V8.669H8.669C7.786%208.669%207%209.387%207%2010.27v1.367zm9.677%206.277h-2.135a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203h-2.135v2.135h2.136v-2.135zm3.203%203.203h2.135a1.07%201.07%200%20001.068-1.068v-2.135a1.07%201.07%200%2000-1.068-1.068H19.88a1.07%201.07%200%2000-1.068%201.068v2.135a1.07%201.07%200%20001.068%201.068zm0-3.203h2.135l.001%202.135H19.88v-2.135zm-8.54%208.541H9.204a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203H9.204v2.135h2.136l-.001-2.135zm3.202%203.203h2.135a1.07%201.07%200%20001.068-1.068v-2.135a1.07%201.07%200%2000-1.068-1.068h-2.135a1.07%201.07%200%2000-1.068%201.068v2.135a1.07%201.07%200%20001.068%201.068zm0-3.203h2.135l.001%202.135h-2.136v-2.135zm7.473%203.203H19.88a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203H19.88v2.135h2.136v-2.135z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
 }
 
-.c4:invalid {
+.c3:invalid {
   border-color: #eb5757;
 }
 
-.c4::-webkit-input-placeholder {
+.c3::-webkit-input-placeholder {
   color: #9298af;
 }
 
-.c4::-moz-placeholder {
+.c3::-moz-placeholder {
   color: #9298af;
 }
 
-.c4:-ms-input-placeholder {
+.c3:-ms-input-placeholder {
   color: #9298af;
 }
 
-.c4::placeholder {
+.c3::placeholder {
   color: #9298af;
 }
 
-.c4:focus {
+.c3:focus {
   border-color: #7994d4;
 }
 
-.c4:focus::-webkit-input-placeholder {
+.c3:focus::-webkit-input-placeholder {
   color: transparent;
 }
 
-.c4:focus::-moz-placeholder {
+.c3:focus::-moz-placeholder {
   color: transparent;
 }
 
-.c4:focus:-ms-input-placeholder {
+.c3:focus:-ms-input-placeholder {
   color: transparent;
 }
 
-.c4:focus::placeholder {
+.c3:focus::placeholder {
   color: transparent;
 }
 
-.c3 {
+.c2 {
   display: block;
 }
 
-.c5 {
+.c4 {
   margin-top: 2rem;
 }
 
 @media (max-width:600px) {
   .c0 {
-    padding: 0 1rem;
-  }
-}
-
-@media print {
-  .c0 {
-    max-width: 100%;
-    padding: 0;
-  }
-}
-
-@media (max-width:600px) {
-  .c1 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c4 {
+  .c3 {
     padding: 0 1rem;
     padding-right: 2rem;
   }
 }
 
 <div>
-  <div
+  <h3
     class="c0"
   >
-    <h3
-      class="c1"
-    >
-      Recherche de convention collective
-    </h3>
-    <p>
-      Renseignez le nom de votre entreprise, son SIRET ou le nom de votre convention collective.
-    </p>
-    <span
-      class="c2 c3"
-    >
-      <input
-        class="c4"
-        name="q"
-        placeholder="Nom d'entreprise, SIRET, nom de convention collective"
-        role="search"
-        type="search"
-        value="8888"
-      />
-    </span>
-    <div
-      class="c5"
-    >
-      <div>
-        <svg
-          aria-labelledby="title desc"
-          class="__react-svg-spinner_circle"
-          height="1em"
-          role="img"
-          style="animation-duration: 750ms;"
-          viewBox="0 0 32 32"
-          width="1em"
+    Recherche de convention collective
+  </h3>
+  <p>
+    Renseignez le nom de votre entreprise, son SIRET ou le nom de votre convention collective.
+  </p>
+  <span
+    class="c1 c2"
+  >
+    <input
+      class="c3"
+      name="q"
+      placeholder="Nom d'entreprise, SIRET, nom de convention collective"
+      role="search"
+      type="search"
+      value="8888"
+    />
+  </span>
+  <div
+    class="c4"
+  >
+    <div>
+      <svg
+        aria-labelledby="title desc"
+        class="__react-svg-spinner_circle"
+        height="1em"
+        role="img"
+        style="animation-duration: 750ms;"
+        viewBox="0 0 32 32"
+        width="1em"
+      >
+        <title
+          id="title"
+        >
+          Circle loading spinner
+        </title>
+        <desc
+          id="desc"
         >
-          <title
-            id="title"
-          >
-            Circle loading spinner
-          </title>
-          <desc
-            id="desc"
-          >
-            Image of a partial circle indicating "loading."
-          </desc>
-          <style>
-            
+          Image of a partial circle indicating "loading."
+        </desc>
+        <style>
+          
       .__react-svg-spinner_circle{
           transition-property: transform;
           animation-name: __react-svg-spinner_infinite-spin;
@@ -960,21 +853,20 @@ exports[`<Search /> should show spinner when loading 1`] = `
           to {transform: rotate(360deg)}
       }
     
-          </style>
-          <circle
-            cx="16"
-            cy="16"
-            fill="none"
-            r="12"
-            role="presentation"
-            stroke="rgba(0,0,0,0.4)"
-            stroke-dasharray="43.982297150257104"
-            stroke-linecap="round"
-            stroke-width="4"
-          />
-        </svg>
-         Recherche des convention collectives...
-      </div>
+        </style>
+        <circle
+          cx="16"
+          cy="16"
+          fill="none"
+          r="12"
+          role="presentation"
+          stroke="rgba(0,0,0,0.4)"
+          stroke-dasharray="43.982297150257104"
+          stroke-linecap="round"
+          stroke-width="4"
+        />
+      </svg>
+       Recherche des convention collectives...
     </div>
   </div>
 </div>
@@ -982,20 +874,6 @@ exports[`<Search /> should show spinner when loading 1`] = `
 
 exports[`<Search /> when input is IDCC, should search conventions 1`] = `
 .c0 {
-  max-width: 124rem;
-  margin: 0 auto;
-  padding: 0 2rem;
-}
-
-.c0 > *:first-child {
-  margin-top: 0;
-}
-
-.c0 > *:last-child {
-  margin-bottom: 0;
-}
-
-.c1 {
   position: relative;
   margin: 0 0 1rem 0;
   color: #2f3b6c;
@@ -1005,13 +883,13 @@ exports[`<Search /> when input is IDCC, should search conventions 1`] = `
   line-height: 1.25;
 }
 
-.c6 {
+.c5 {
   position: relative;
   overflow: hidden;
 }
 
-.c6:before,
-.c6:after {
+.c5:before,
+.c5:after {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -1026,19 +904,19 @@ exports[`<Search /> when input is IDCC, should search conventions 1`] = `
   background: radial-gradient( ellipse at center, #fff 15%, rgba(255,255,255,0) 80% );
 }
 
-.c6:before {
+.c5:before {
   left: -2rem;
 }
 
-.c6:after {
+.c5:after {
   right: -2rem;
 }
 
-.c7 {
+.c6 {
   overflow-x: auto;
 }
 
-.c8 {
+.c7 {
   text-align: left;
   empty-cells: show;
   background-color: #fff;
@@ -1047,41 +925,41 @@ exports[`<Search /> when input is IDCC, should search conventions 1`] = `
   border-spacing: 0;
 }
 
-.c8 caption {
+.c7 caption {
   padding: 1rem 0;
   font-style: italic;
   text-align: center;
 }
 
-.c8 td,
-.c8 th {
+.c7 td,
+.c7 th {
   padding: 1rem 1.6rem;
   border: 1px solid #bbcadf;
 }
 
-.c8 th {
+.c7 th {
   color: #2f3b6c;
   font-weight: 600;
   background: #e4e8ef;
 }
 
-.c8 thead,
-.c8 tfoot {
+.c7 thead,
+.c7 tfoot {
   padding: 1rem 1.6rem;
   vertical-align: bottom;
   background: #f2f5fa;
 }
 
-.c8 tfoot {
+.c7 tfoot {
   vertical-align: top;
 }
 
-.c2 {
+.c1 {
   position: relative;
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   width: 100%;
   height: 5.4rem;
   padding: 0 2rem;
@@ -1103,15 +981,15 @@ exports[`<Search /> when input is IDCC, should search conventions 1`] = `
   appearance: none;
 }
 
-.c4::-webkit-outer-spin-button,
-.c4::-webkit-inner-spin-button {
+.c3::-webkit-outer-spin-button,
+.c3::-webkit-inner-spin-button {
   margin: 0;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c4::-webkit-calendar-picker-indicator {
+.c3::-webkit-calendar-picker-indicator {
   display: block;
   width: 3.2rem;
   height: 3.2rem;
@@ -1124,78 +1002,88 @@ exports[`<Search /> when input is IDCC, should search conventions 1`] = `
   mask-image: url("data:image/svg+xml;,%3Csvg%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.947%207.601h1.601c1.472%200%202.521%201.198%202.521%202.669v2.306l-.001%2010.392c0%201.472-1.049%202.669-2.521%202.669H8.669A2.672%202.672%200%20016%2022.967l.001-12.697a2.672%202.672%200%20012.67-2.669h1.331V6h.999v1.601H20V6h.947v1.601zm1.6%2017.036c.883%200%201.454-.786%201.454-1.67v-10.33h-17L7%2022.967c0%20.884.785%201.67%201.668%201.67h13.879zm-15.548-13h17.002l.001-1.367c0-.883-.57-1.601-1.453-1.601h-1.6v1.068H20V8.669h-9v1.068h-1V8.669H8.669C7.786%208.669%207%209.387%207%2010.27v1.367zm9.677%206.277h-2.135a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203h-2.135v2.135h2.136v-2.135zm3.203%203.203h2.135a1.07%201.07%200%20001.068-1.068v-2.135a1.07%201.07%200%2000-1.068-1.068H19.88a1.07%201.07%200%2000-1.068%201.068v2.135a1.07%201.07%200%20001.068%201.068zm0-3.203h2.135l.001%202.135H19.88v-2.135zm-8.54%208.541H9.204a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203H9.204v2.135h2.136l-.001-2.135zm3.202%203.203h2.135a1.07%201.07%200%20001.068-1.068v-2.135a1.07%201.07%200%2000-1.068-1.068h-2.135a1.07%201.07%200%2000-1.068%201.068v2.135a1.07%201.07%200%20001.068%201.068zm0-3.203h2.135l.001%202.135h-2.136v-2.135zm7.473%203.203H19.88a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203H19.88v2.135h2.136v-2.135z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
 }
 
-.c4:invalid {
+.c3:invalid {
   border-color: #eb5757;
 }
 
-.c4::-webkit-input-placeholder {
+.c3::-webkit-input-placeholder {
   color: #9298af;
 }
 
-.c4::-moz-placeholder {
+.c3::-moz-placeholder {
   color: #9298af;
 }
 
-.c4:-ms-input-placeholder {
+.c3:-ms-input-placeholder {
   color: #9298af;
 }
 
-.c4::placeholder {
+.c3::placeholder {
   color: #9298af;
 }
 
-.c4:focus {
+.c3:focus {
   border-color: #7994d4;
 }
 
-.c4:focus::-webkit-input-placeholder {
+.c3:focus::-webkit-input-placeholder {
   color: transparent;
 }
 
-.c4:focus::-moz-placeholder {
+.c3:focus::-moz-placeholder {
   color: transparent;
 }
 
-.c4:focus:-ms-input-placeholder {
+.c3:focus:-ms-input-placeholder {
   color: transparent;
 }
 
-.c4:focus::placeholder {
+.c3:focus::placeholder {
   color: transparent;
 }
 
-.c3 {
+.c2 {
   display: block;
 }
 
-.c9 {
+.c8 {
   width: 100%;
-  table-layout: fixed;
+  overflow: hidden;
+  border: none;
+  border-radius: 0.6rem;
 }
 
-.c10 {
+.c9 {
   font-weight: bold;
   background: #e4e8ef;
 }
 
-.c5 {
+.c12 + .c11 {
+  border-top: 1px solid #bbcadf;
+}
+
+.c10 {
+  border: none !important;
+}
+
+.c4 {
   margin-top: 2rem;
 }
 
-.c15 {
+.c17 {
   color: #4d73b8;
   cursor: pointer;
 }
 
-.c14 {
+.c16 {
   margin: 1rem 0;
 }
 
-.c13 {
+.c15 {
   margin-top: 1rem;
 }
 
-.c11 {
+.c13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1213,7 +1101,7 @@ exports[`<Search /> when input is IDCC, should search conventions 1`] = `
   justify-content: space-between;
 }
 
-.c12 {
+.c14 {
   -webkit-flex: 1 1 calc(100% - 200px);
   -ms-flex: 1 1 calc(100% - 200px);
   flex: 1 1 calc(100% - 200px);
@@ -1230,51 +1118,38 @@ exports[`<Search /> when input is IDCC, should search conventions 1`] = `
 
 @media (max-width:600px) {
   .c0 {
-    padding: 0 1rem;
-  }
-}
-
-@media print {
-  .c0 {
-    max-width: 100%;
-    padding: 0;
-  }
-}
-
-@media (max-width:600px) {
-  .c1 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c6 {
+  .c5 {
     overflow-x: hidden;
   }
 }
 
 @media (max-width:600px) {
-  .c6:before,
-  .c6:after {
+  .c5:before,
+  .c5:after {
     display: block;
   }
 }
 
 @media (max-width:600px) {
-  .c7 {
+  .c6 {
     overflow-x: auto;
   }
 }
 
 @media (max-width:600px) {
-  .c4 {
+  .c3 {
     padding: 0 1rem;
     padding-right: 2rem;
   }
 }
 
 @media screen and (min-width:980px) {
-  .c11 {
+  .c13 {
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
@@ -1286,7 +1161,7 @@ exports[`<Search /> when input is IDCC, should search conventions 1`] = `
 }
 
 @media screen and (min-width:980px) {
-  .c12 {
+  .c14 {
     -webkit-align-self: baseline;
     -ms-flex-item-align: baseline;
     align-self: baseline;
@@ -1297,112 +1172,118 @@ exports[`<Search /> when input is IDCC, should search conventions 1`] = `
 }
 
 <div>
-  <div
+  <h3
     class="c0"
   >
-    <h3
-      class="c1"
-    >
-      Recherche de convention collective
-    </h3>
-    <p>
-      Renseignez le nom de votre entreprise, son SIRET ou le nom de votre convention collective.
-    </p>
-    <span
-      class="c2 c3"
-    >
-      <input
-        class="c4"
-        name="q"
-        placeholder="Nom d'entreprise, SIRET, nom de convention collective"
-        role="search"
-        type="search"
-        value="1234"
-      />
-    </span>
+    Recherche de convention collective
+  </h3>
+  <p>
+    Renseignez le nom de votre entreprise, son SIRET ou le nom de votre convention collective.
+  </p>
+  <span
+    class="c1 c2"
+  >
+    <input
+      class="c3"
+      name="q"
+      placeholder="Nom d'entreprise, SIRET, nom de convention collective"
+      role="search"
+      type="search"
+      value="1234"
+    />
+  </span>
+  <div
+    class="c4"
+  >
     <div
       class="c5"
     >
       <div
         class="c6"
       >
-        <div
-          class="c7"
+        <table
+          class="c7 c8"
         >
-          <table
-            class="c8 c9"
-          >
-            <tbody>
-              <tr
+          <tbody>
+            <tr
+              class="c9"
+            >
+              <td
+                class="c10"
+              >
+                Conventions collectives
+              </td>
+            </tr>
+            <tr
+              class="c11 c12"
+            >
+              <td
                 class="c10"
               >
-                <td>
-                  Conventions collectives
-                </td>
-              </tr>
-              <tr>
-                <td>
+                <div
+                  class="c13"
+                >
                   <div
-                    class="c11"
-                  >
-                    <div
-                      class="c12"
-                    />
-                  </div>
+                    class="c14"
+                  />
+                </div>
+                <div
+                  class="c15"
+                >
                   <div
-                    class="c13"
+                    class="c16"
                   >
-                    <div
-                      class="c14"
+                    <a
+                      class="c17"
+                      href="/convention-collective/275-small-titre"
                     >
-                      <a
-                        class="c15"
-                        href="/convention-collective/275-small-titre"
-                      >
-                        small titre
-                      </a>
-                      <span>
-                         (IDCC 
-                        0275
-                        )
-                      </span>
-                    </div>
+                      small titre
+                    </a>
+                    <span>
+                       (IDCC 
+                      0275
+                      )
+                    </span>
                   </div>
-                </td>
-              </tr>
-              <tr>
-                <td>
+                </div>
+              </td>
+            </tr>
+            <tr
+              class="c11 c12"
+            >
+              <td
+                class="c10"
+              >
+                <div
+                  class="c13"
+                >
                   <div
-                    class="c11"
-                  >
-                    <div
-                      class="c12"
-                    />
-                  </div>
+                    class="c14"
+                  />
+                </div>
+                <div
+                  class="c15"
+                >
                   <div
-                    class="c13"
+                    class="c16"
                   >
-                    <div
-                      class="c14"
+                    <a
+                      class="c17"
+                      href="/convention-collective/276-smaller-convention-2"
                     >
-                      <a
-                        class="c15"
-                        href="/convention-collective/276-smaller-convention-2"
-                      >
-                        smaller convention 2
-                      </a>
-                      <span>
-                         (IDCC 
-                        0276
-                        )
-                      </span>
-                    </div>
+                      smaller convention 2
+                    </a>
+                    <span>
+                       (IDCC 
+                      0276
+                      )
+                    </span>
                   </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
     </div>
   </div>
@@ -1411,20 +1292,6 @@ exports[`<Search /> when input is IDCC, should search conventions 1`] = `
 
 exports[`<Search /> when input is a valid IDCC, should show only the perfect match  1`] = `
 .c0 {
-  max-width: 124rem;
-  margin: 0 auto;
-  padding: 0 2rem;
-}
-
-.c0 > *:first-child {
-  margin-top: 0;
-}
-
-.c0 > *:last-child {
-  margin-bottom: 0;
-}
-
-.c1 {
   position: relative;
   margin: 0 0 1rem 0;
   color: #2f3b6c;
@@ -1434,13 +1301,13 @@ exports[`<Search /> when input is a valid IDCC, should show only the perfect mat
   line-height: 1.25;
 }
 
-.c6 {
+.c5 {
   position: relative;
   overflow: hidden;
 }
 
-.c6:before,
-.c6:after {
+.c5:before,
+.c5:after {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -1455,19 +1322,19 @@ exports[`<Search /> when input is a valid IDCC, should show only the perfect mat
   background: radial-gradient( ellipse at center, #fff 15%, rgba(255,255,255,0) 80% );
 }
 
-.c6:before {
+.c5:before {
   left: -2rem;
 }
 
-.c6:after {
+.c5:after {
   right: -2rem;
 }
 
-.c7 {
+.c6 {
   overflow-x: auto;
 }
 
-.c8 {
+.c7 {
   text-align: left;
   empty-cells: show;
   background-color: #fff;
@@ -1476,41 +1343,41 @@ exports[`<Search /> when input is a valid IDCC, should show only the perfect mat
   border-spacing: 0;
 }
 
-.c8 caption {
+.c7 caption {
   padding: 1rem 0;
   font-style: italic;
   text-align: center;
 }
 
-.c8 td,
-.c8 th {
+.c7 td,
+.c7 th {
   padding: 1rem 1.6rem;
   border: 1px solid #bbcadf;
 }
 
-.c8 th {
+.c7 th {
   color: #2f3b6c;
   font-weight: 600;
   background: #e4e8ef;
 }
 
-.c8 thead,
-.c8 tfoot {
+.c7 thead,
+.c7 tfoot {
   padding: 1rem 1.6rem;
   vertical-align: bottom;
   background: #f2f5fa;
 }
 
-.c8 tfoot {
+.c7 tfoot {
   vertical-align: top;
 }
 
-.c2 {
+.c1 {
   position: relative;
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   width: 100%;
   height: 5.4rem;
   padding: 0 2rem;
@@ -1532,15 +1399,15 @@ exports[`<Search /> when input is a valid IDCC, should show only the perfect mat
   appearance: none;
 }
 
-.c4::-webkit-outer-spin-button,
-.c4::-webkit-inner-spin-button {
+.c3::-webkit-outer-spin-button,
+.c3::-webkit-inner-spin-button {
   margin: 0;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c4::-webkit-calendar-picker-indicator {
+.c3::-webkit-calendar-picker-indicator {
   display: block;
   width: 3.2rem;
   height: 3.2rem;
@@ -1553,78 +1420,88 @@ exports[`<Search /> when input is a valid IDCC, should show only the perfect mat
   mask-image: url("data:image/svg+xml;,%3Csvg%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.947%207.601h1.601c1.472%200%202.521%201.198%202.521%202.669v2.306l-.001%2010.392c0%201.472-1.049%202.669-2.521%202.669H8.669A2.672%202.672%200%20016%2022.967l.001-12.697a2.672%202.672%200%20012.67-2.669h1.331V6h.999v1.601H20V6h.947v1.601zm1.6%2017.036c.883%200%201.454-.786%201.454-1.67v-10.33h-17L7%2022.967c0%20.884.785%201.67%201.668%201.67h13.879zm-15.548-13h17.002l.001-1.367c0-.883-.57-1.601-1.453-1.601h-1.6v1.068H20V8.669h-9v1.068h-1V8.669H8.669C7.786%208.669%207%209.387%207%2010.27v1.367zm9.677%206.277h-2.135a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203h-2.135v2.135h2.136v-2.135zm3.203%203.203h2.135a1.07%201.07%200%20001.068-1.068v-2.135a1.07%201.07%200%2000-1.068-1.068H19.88a1.07%201.07%200%2000-1.068%201.068v2.135a1.07%201.07%200%20001.068%201.068zm0-3.203h2.135l.001%202.135H19.88v-2.135zm-8.54%208.541H9.204a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203H9.204v2.135h2.136l-.001-2.135zm3.202%203.203h2.135a1.07%201.07%200%20001.068-1.068v-2.135a1.07%201.07%200%2000-1.068-1.068h-2.135a1.07%201.07%200%2000-1.068%201.068v2.135a1.07%201.07%200%20001.068%201.068zm0-3.203h2.135l.001%202.135h-2.136v-2.135zm7.473%203.203H19.88a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203H19.88v2.135h2.136v-2.135z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
 }
 
-.c4:invalid {
+.c3:invalid {
   border-color: #eb5757;
 }
 
-.c4::-webkit-input-placeholder {
+.c3::-webkit-input-placeholder {
   color: #9298af;
 }
 
-.c4::-moz-placeholder {
+.c3::-moz-placeholder {
   color: #9298af;
 }
 
-.c4:-ms-input-placeholder {
+.c3:-ms-input-placeholder {
   color: #9298af;
 }
 
-.c4::placeholder {
+.c3::placeholder {
   color: #9298af;
 }
 
-.c4:focus {
+.c3:focus {
   border-color: #7994d4;
 }
 
-.c4:focus::-webkit-input-placeholder {
+.c3:focus::-webkit-input-placeholder {
   color: transparent;
 }
 
-.c4:focus::-moz-placeholder {
+.c3:focus::-moz-placeholder {
   color: transparent;
 }
 
-.c4:focus:-ms-input-placeholder {
+.c3:focus:-ms-input-placeholder {
   color: transparent;
 }
 
-.c4:focus::placeholder {
+.c3:focus::placeholder {
   color: transparent;
 }
 
-.c3 {
+.c2 {
   display: block;
 }
 
-.c9 {
+.c8 {
   width: 100%;
-  table-layout: fixed;
+  overflow: hidden;
+  border: none;
+  border-radius: 0.6rem;
 }
 
-.c10 {
+.c9 {
   font-weight: bold;
   background: #e4e8ef;
 }
 
-.c5 {
+.c12 + .c11 {
+  border-top: 1px solid #bbcadf;
+}
+
+.c10 {
+  border: none !important;
+}
+
+.c4 {
   margin-top: 2rem;
 }
 
-.c15 {
+.c17 {
   color: #4d73b8;
   cursor: pointer;
 }
 
-.c14 {
+.c16 {
   margin: 1rem 0;
 }
 
-.c13 {
+.c15 {
   margin-top: 1rem;
 }
 
-.c11 {
+.c13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1642,7 +1519,7 @@ exports[`<Search /> when input is a valid IDCC, should show only the perfect mat
   justify-content: space-between;
 }
 
-.c12 {
+.c14 {
   -webkit-flex: 1 1 calc(100% - 200px);
   -ms-flex: 1 1 calc(100% - 200px);
   flex: 1 1 calc(100% - 200px);
@@ -1659,51 +1536,38 @@ exports[`<Search /> when input is a valid IDCC, should show only the perfect mat
 
 @media (max-width:600px) {
   .c0 {
-    padding: 0 1rem;
-  }
-}
-
-@media print {
-  .c0 {
-    max-width: 100%;
-    padding: 0;
-  }
-}
-
-@media (max-width:600px) {
-  .c1 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c6 {
+  .c5 {
     overflow-x: hidden;
   }
 }
 
 @media (max-width:600px) {
-  .c6:before,
-  .c6:after {
+  .c5:before,
+  .c5:after {
     display: block;
   }
 }
 
 @media (max-width:600px) {
-  .c7 {
+  .c6 {
     overflow-x: auto;
   }
 }
 
 @media (max-width:600px) {
-  .c4 {
+  .c3 {
     padding: 0 1rem;
     padding-right: 2rem;
   }
 }
 
 @media screen and (min-width:980px) {
-  .c11 {
+  .c13 {
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
@@ -1715,7 +1579,7 @@ exports[`<Search /> when input is a valid IDCC, should show only the perfect mat
 }
 
 @media screen and (min-width:980px) {
-  .c12 {
+  .c14 {
     -webkit-align-self: baseline;
     -ms-flex-item-align: baseline;
     align-self: baseline;
@@ -1726,82 +1590,84 @@ exports[`<Search /> when input is a valid IDCC, should show only the perfect mat
 }
 
 <div>
-  <div
+  <h3
     class="c0"
   >
-    <h3
-      class="c1"
-    >
-      Recherche de convention collective
-    </h3>
-    <p>
-      Renseignez le nom de votre entreprise, son SIRET ou le nom de votre convention collective.
-    </p>
-    <span
-      class="c2 c3"
-    >
-      <input
-        class="c4"
-        name="q"
-        placeholder="Nom d'entreprise, SIRET, nom de convention collective"
-        role="search"
-        type="search"
-        value="4567"
-      />
-    </span>
+    Recherche de convention collective
+  </h3>
+  <p>
+    Renseignez le nom de votre entreprise, son SIRET ou le nom de votre convention collective.
+  </p>
+  <span
+    class="c1 c2"
+  >
+    <input
+      class="c3"
+      name="q"
+      placeholder="Nom d'entreprise, SIRET, nom de convention collective"
+      role="search"
+      type="search"
+      value="4567"
+    />
+  </span>
+  <div
+    class="c4"
+  >
     <div
       class="c5"
     >
       <div
         class="c6"
       >
-        <div
-          class="c7"
+        <table
+          class="c7 c8"
         >
-          <table
-            class="c8 c9"
-          >
-            <tbody>
-              <tr
+          <tbody>
+            <tr
+              class="c9"
+            >
+              <td
                 class="c10"
               >
-                <td>
-                  Conventions collectives
-                </td>
-              </tr>
-              <tr>
-                <td>
+                Conventions collectives
+              </td>
+            </tr>
+            <tr
+              class="c11 c12"
+            >
+              <td
+                class="c10"
+              >
+                <div
+                  class="c13"
+                >
                   <div
-                    class="c11"
-                  >
-                    <div
-                      class="c12"
-                    />
-                  </div>
+                    class="c14"
+                  />
+                </div>
+                <div
+                  class="c15"
+                >
                   <div
-                    class="c13"
+                    class="c16"
                   >
-                    <div
-                      class="c14"
+                    <a
+                      class="c17"
+                      href="/convention-collective/4567-smaller-convention-2"
                     >
-                      <a
-                        class="c15"
-                        href="/convention-collective/4567-smaller-convention-2"
-                      >
-                        smaller convention 2
-                      </a>
-                      <span>
-                         (IDCC 
-                        4567
-                        )
-                      </span>
-                    </div>
+                      smaller convention 2
+                    </a>
+                    <span>
+                       (IDCC 
+                      4567
+                      )
+                    </span>
                   </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
     </div>
   </div>
@@ -1810,20 +1676,6 @@ exports[`<Search /> when input is a valid IDCC, should show only the perfect mat
 
 exports[`<Search /> when searching SIRET, should use API SIREN and siret2idcc 1`] = `
 .c0 {
-  max-width: 124rem;
-  margin: 0 auto;
-  padding: 0 2rem;
-}
-
-.c0 > *:first-child {
-  margin-top: 0;
-}
-
-.c0 > *:last-child {
-  margin-bottom: 0;
-}
-
-.c1 {
   position: relative;
   margin: 0 0 1rem 0;
   color: #2f3b6c;
@@ -1833,13 +1685,13 @@ exports[`<Search /> when searching SIRET, should use API SIREN and siret2idcc 1`
   line-height: 1.25;
 }
 
-.c6 {
+.c5 {
   position: relative;
   overflow: hidden;
 }
 
-.c6:before,
-.c6:after {
+.c5:before,
+.c5:after {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -1854,19 +1706,19 @@ exports[`<Search /> when searching SIRET, should use API SIREN and siret2idcc 1`
   background: radial-gradient( ellipse at center, #fff 15%, rgba(255,255,255,0) 80% );
 }
 
-.c6:before {
+.c5:before {
   left: -2rem;
 }
 
-.c6:after {
+.c5:after {
   right: -2rem;
 }
 
-.c7 {
+.c6 {
   overflow-x: auto;
 }
 
-.c8 {
+.c7 {
   text-align: left;
   empty-cells: show;
   background-color: #fff;
@@ -1875,41 +1727,41 @@ exports[`<Search /> when searching SIRET, should use API SIREN and siret2idcc 1`
   border-spacing: 0;
 }
 
-.c8 caption {
+.c7 caption {
   padding: 1rem 0;
   font-style: italic;
   text-align: center;
 }
 
-.c8 td,
-.c8 th {
+.c7 td,
+.c7 th {
   padding: 1rem 1.6rem;
   border: 1px solid #bbcadf;
 }
 
-.c8 th {
+.c7 th {
   color: #2f3b6c;
   font-weight: 600;
   background: #e4e8ef;
 }
 
-.c8 thead,
-.c8 tfoot {
+.c7 thead,
+.c7 tfoot {
   padding: 1rem 1.6rem;
   vertical-align: bottom;
   background: #f2f5fa;
 }
 
-.c8 tfoot {
+.c7 tfoot {
   vertical-align: top;
 }
 
-.c2 {
+.c1 {
   position: relative;
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   width: 100%;
   height: 5.4rem;
   padding: 0 2rem;
@@ -1931,15 +1783,15 @@ exports[`<Search /> when searching SIRET, should use API SIREN and siret2idcc 1`
   appearance: none;
 }
 
-.c4::-webkit-outer-spin-button,
-.c4::-webkit-inner-spin-button {
+.c3::-webkit-outer-spin-button,
+.c3::-webkit-inner-spin-button {
   margin: 0;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c4::-webkit-calendar-picker-indicator {
+.c3::-webkit-calendar-picker-indicator {
   display: block;
   width: 3.2rem;
   height: 3.2rem;
@@ -1952,78 +1804,88 @@ exports[`<Search /> when searching SIRET, should use API SIREN and siret2idcc 1`
   mask-image: url("data:image/svg+xml;,%3Csvg%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.947%207.601h1.601c1.472%200%202.521%201.198%202.521%202.669v2.306l-.001%2010.392c0%201.472-1.049%202.669-2.521%202.669H8.669A2.672%202.672%200%20016%2022.967l.001-12.697a2.672%202.672%200%20012.67-2.669h1.331V6h.999v1.601H20V6h.947v1.601zm1.6%2017.036c.883%200%201.454-.786%201.454-1.67v-10.33h-17L7%2022.967c0%20.884.785%201.67%201.668%201.67h13.879zm-15.548-13h17.002l.001-1.367c0-.883-.57-1.601-1.453-1.601h-1.6v1.068H20V8.669h-9v1.068h-1V8.669H8.669C7.786%208.669%207%209.387%207%2010.27v1.367zm9.677%206.277h-2.135a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203h-2.135v2.135h2.136v-2.135zm3.203%203.203h2.135a1.07%201.07%200%20001.068-1.068v-2.135a1.07%201.07%200%2000-1.068-1.068H19.88a1.07%201.07%200%2000-1.068%201.068v2.135a1.07%201.07%200%20001.068%201.068zm0-3.203h2.135l.001%202.135H19.88v-2.135zm-8.54%208.541H9.204a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203H9.204v2.135h2.136l-.001-2.135zm3.202%203.203h2.135a1.07%201.07%200%20001.068-1.068v-2.135a1.07%201.07%200%2000-1.068-1.068h-2.135a1.07%201.07%200%2000-1.068%201.068v2.135a1.07%201.07%200%20001.068%201.068zm0-3.203h2.135l.001%202.135h-2.136v-2.135zm7.473%203.203H19.88a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203H19.88v2.135h2.136v-2.135z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
 }
 
-.c4:invalid {
+.c3:invalid {
   border-color: #eb5757;
 }
 
-.c4::-webkit-input-placeholder {
+.c3::-webkit-input-placeholder {
   color: #9298af;
 }
 
-.c4::-moz-placeholder {
+.c3::-moz-placeholder {
   color: #9298af;
 }
 
-.c4:-ms-input-placeholder {
+.c3:-ms-input-placeholder {
   color: #9298af;
 }
 
-.c4::placeholder {
+.c3::placeholder {
   color: #9298af;
 }
 
-.c4:focus {
+.c3:focus {
   border-color: #7994d4;
 }
 
-.c4:focus::-webkit-input-placeholder {
+.c3:focus::-webkit-input-placeholder {
   color: transparent;
 }
 
-.c4:focus::-moz-placeholder {
+.c3:focus::-moz-placeholder {
   color: transparent;
 }
 
-.c4:focus:-ms-input-placeholder {
+.c3:focus:-ms-input-placeholder {
   color: transparent;
 }
 
-.c4:focus::placeholder {
+.c3:focus::placeholder {
   color: transparent;
 }
 
-.c3 {
+.c2 {
   display: block;
 }
 
-.c9 {
+.c8 {
   width: 100%;
-  table-layout: fixed;
+  overflow: hidden;
+  border: none;
+  border-radius: 0.6rem;
 }
 
-.c10 {
+.c9 {
   font-weight: bold;
   background: #e4e8ef;
 }
 
-.c5 {
+.c12 + .c11 {
+  border-top: 1px solid #bbcadf;
+}
+
+.c10 {
+  border: none !important;
+}
+
+.c4 {
   margin-top: 2rem;
 }
 
-.c15 {
+.c17 {
   color: #4d73b8;
   cursor: pointer;
 }
 
-.c14 {
+.c16 {
   margin: 1rem 0;
 }
 
-.c13 {
+.c15 {
   margin-top: 1rem;
 }
 
-.c11 {
+.c13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2041,7 +1903,7 @@ exports[`<Search /> when searching SIRET, should use API SIREN and siret2idcc 1`
   justify-content: space-between;
 }
 
-.c12 {
+.c14 {
   -webkit-flex: 1 1 calc(100% - 200px);
   -ms-flex: 1 1 calc(100% - 200px);
   flex: 1 1 calc(100% - 200px);
@@ -2058,51 +1920,38 @@ exports[`<Search /> when searching SIRET, should use API SIREN and siret2idcc 1`
 
 @media (max-width:600px) {
   .c0 {
-    padding: 0 1rem;
-  }
-}
-
-@media print {
-  .c0 {
-    max-width: 100%;
-    padding: 0;
-  }
-}
-
-@media (max-width:600px) {
-  .c1 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c6 {
+  .c5 {
     overflow-x: hidden;
   }
 }
 
 @media (max-width:600px) {
-  .c6:before,
-  .c6:after {
+  .c5:before,
+  .c5:after {
     display: block;
   }
 }
 
 @media (max-width:600px) {
-  .c7 {
+  .c6 {
     overflow-x: auto;
   }
 }
 
 @media (max-width:600px) {
-  .c4 {
+  .c3 {
     padding: 0 1rem;
     padding-right: 2rem;
   }
 }
 
 @media screen and (min-width:980px) {
-  .c11 {
+  .c13 {
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
@@ -2114,7 +1963,7 @@ exports[`<Search /> when searching SIRET, should use API SIREN and siret2idcc 1`
 }
 
 @media screen and (min-width:980px) {
-  .c12 {
+  .c14 {
     -webkit-align-self: baseline;
     -ms-flex-item-align: baseline;
     align-self: baseline;
@@ -2125,91 +1974,93 @@ exports[`<Search /> when searching SIRET, should use API SIREN and siret2idcc 1`
 }
 
 <div>
-  <div
+  <h3
     class="c0"
   >
-    <h3
-      class="c1"
-    >
-      Recherche de convention collective
-    </h3>
-    <p>
-      Renseignez le nom de votre entreprise, son SIRET ou le nom de votre convention collective.
-    </p>
-    <span
-      class="c2 c3"
-    >
-      <input
-        class="c4"
-        name="q"
-        placeholder="Nom d'entreprise, SIRET, nom de convention collective"
-        role="search"
-        type="search"
-        value="01234567891011"
-      />
-    </span>
+    Recherche de convention collective
+  </h3>
+  <p>
+    Renseignez le nom de votre entreprise, son SIRET ou le nom de votre convention collective.
+  </p>
+  <span
+    class="c1 c2"
+  >
+    <input
+      class="c3"
+      name="q"
+      placeholder="Nom d'entreprise, SIRET, nom de convention collective"
+      role="search"
+      type="search"
+      value="01234567891011"
+    />
+  </span>
+  <div
+    class="c4"
+  >
     <div
       class="c5"
     >
       <div
         class="c6"
       >
-        <div
-          class="c7"
+        <table
+          class="c7 c8"
         >
-          <table
-            class="c8 c9"
-          >
-            <tbody>
-              <tr
+          <tbody>
+            <tr
+              class="c9"
+            >
+              <td
+                class="c10"
+              >
+                Entreprises
+              </td>
+            </tr>
+            <tr
+              class="c11 c12"
+            >
+              <td
                 class="c10"
               >
-                <td>
-                  Entreprises
-                </td>
-              </tr>
-              <tr>
-                <td>
+                <div
+                  class="c13"
+                >
                   <div
-                    class="c11"
+                    class="c14"
                   >
-                    <div
-                      class="c12"
-                    >
-                      Entreprise 1 93100 Commune test
-                    </div>
-                    <a
-                      href="https://entreprise.data.gouv.fr/etablissement/01234567891011"
-                      rel="noopener noreferrer"
-                      style="font-size: 0.8em;"
-                      target="_blank"
-                      title="Ouvrir la fiche entreprise"
-                    >
-                      Fiche entreprise
-                    </a>
+                    Entreprise 1 93100 Commune test
                   </div>
+                  <a
+                    href="https://entreprise.data.gouv.fr/etablissement/01234567891011"
+                    rel="noopener noreferrer"
+                    style="font-size: 0.8em;"
+                    target="_blank"
+                    title="Ouvrir la fiche entreprise"
+                  >
+                    Fiche entreprise
+                  </a>
+                </div>
+                <div
+                  class="c15"
+                >
                   <div
-                    class="c13"
+                    class="c16"
                   >
-                    <div
-                      class="c14"
-                    >
-                      <span>
-                        <a
-                          class="c15"
-                        />
-                         (IDCC
-                         
-                        0843
-                        )
-                      </span>
-                    </div>
+                    <span>
+                      <a
+                        class="c17"
+                      />
+                       (IDCC
+                       
+                      0843
+                      )
+                    </span>
                   </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
     </div>
   </div>
@@ -2218,20 +2069,6 @@ exports[`<Search /> when searching SIRET, should use API SIREN and siret2idcc 1`
 
 exports[`<Search /> when searching by text, should use ES, api SIREN and siret2idcc 1`] = `
 .c0 {
-  max-width: 124rem;
-  margin: 0 auto;
-  padding: 0 2rem;
-}
-
-.c0 > *:first-child {
-  margin-top: 0;
-}
-
-.c0 > *:last-child {
-  margin-bottom: 0;
-}
-
-.c1 {
   position: relative;
   margin: 0 0 1rem 0;
   color: #2f3b6c;
@@ -2241,13 +2078,13 @@ exports[`<Search /> when searching by text, should use ES, api SIREN and siret2i
   line-height: 1.25;
 }
 
-.c6 {
+.c5 {
   position: relative;
   overflow: hidden;
 }
 
-.c6:before,
-.c6:after {
+.c5:before,
+.c5:after {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -2262,19 +2099,19 @@ exports[`<Search /> when searching by text, should use ES, api SIREN and siret2i
   background: radial-gradient( ellipse at center, #fff 15%, rgba(255,255,255,0) 80% );
 }
 
-.c6:before {
+.c5:before {
   left: -2rem;
 }
 
-.c6:after {
+.c5:after {
   right: -2rem;
 }
 
-.c7 {
+.c6 {
   overflow-x: auto;
 }
 
-.c8 {
+.c7 {
   text-align: left;
   empty-cells: show;
   background-color: #fff;
@@ -2283,41 +2120,41 @@ exports[`<Search /> when searching by text, should use ES, api SIREN and siret2i
   border-spacing: 0;
 }
 
-.c8 caption {
+.c7 caption {
   padding: 1rem 0;
   font-style: italic;
   text-align: center;
 }
 
-.c8 td,
-.c8 th {
+.c7 td,
+.c7 th {
   padding: 1rem 1.6rem;
   border: 1px solid #bbcadf;
 }
 
-.c8 th {
+.c7 th {
   color: #2f3b6c;
   font-weight: 600;
   background: #e4e8ef;
 }
 
-.c8 thead,
-.c8 tfoot {
+.c7 thead,
+.c7 tfoot {
   padding: 1rem 1.6rem;
   vertical-align: bottom;
   background: #f2f5fa;
 }
 
-.c8 tfoot {
+.c7 tfoot {
   vertical-align: top;
 }
 
-.c2 {
+.c1 {
   position: relative;
   display: inline-block;
 }
 
-.c4 {
+.c3 {
   width: 100%;
   height: 5.4rem;
   padding: 0 2rem;
@@ -2339,15 +2176,15 @@ exports[`<Search /> when searching by text, should use ES, api SIREN and siret2i
   appearance: none;
 }
 
-.c4::-webkit-outer-spin-button,
-.c4::-webkit-inner-spin-button {
+.c3::-webkit-outer-spin-button,
+.c3::-webkit-inner-spin-button {
   margin: 0;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c4::-webkit-calendar-picker-indicator {
+.c3::-webkit-calendar-picker-indicator {
   display: block;
   width: 3.2rem;
   height: 3.2rem;
@@ -2360,78 +2197,88 @@ exports[`<Search /> when searching by text, should use ES, api SIREN and siret2i
   mask-image: url("data:image/svg+xml;,%3Csvg%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.947%207.601h1.601c1.472%200%202.521%201.198%202.521%202.669v2.306l-.001%2010.392c0%201.472-1.049%202.669-2.521%202.669H8.669A2.672%202.672%200%20016%2022.967l.001-12.697a2.672%202.672%200%20012.67-2.669h1.331V6h.999v1.601H20V6h.947v1.601zm1.6%2017.036c.883%200%201.454-.786%201.454-1.67v-10.33h-17L7%2022.967c0%20.884.785%201.67%201.668%201.67h13.879zm-15.548-13h17.002l.001-1.367c0-.883-.57-1.601-1.453-1.601h-1.6v1.068H20V8.669h-9v1.068h-1V8.669H8.669C7.786%208.669%207%209.387%207%2010.27v1.367zm9.677%206.277h-2.135a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203h-2.135v2.135h2.136v-2.135zm3.203%203.203h2.135a1.07%201.07%200%20001.068-1.068v-2.135a1.07%201.07%200%2000-1.068-1.068H19.88a1.07%201.07%200%2000-1.068%201.068v2.135a1.07%201.07%200%20001.068%201.068zm0-3.203h2.135l.001%202.135H19.88v-2.135zm-8.54%208.541H9.204a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203H9.204v2.135h2.136l-.001-2.135zm3.202%203.203h2.135a1.07%201.07%200%20001.068-1.068v-2.135a1.07%201.07%200%2000-1.068-1.068h-2.135a1.07%201.07%200%2000-1.068%201.068v2.135a1.07%201.07%200%20001.068%201.068zm0-3.203h2.135l.001%202.135h-2.136v-2.135zm7.473%203.203H19.88a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203H19.88v2.135h2.136v-2.135z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
 }
 
-.c4:invalid {
+.c3:invalid {
   border-color: #eb5757;
 }
 
-.c4::-webkit-input-placeholder {
+.c3::-webkit-input-placeholder {
   color: #9298af;
 }
 
-.c4::-moz-placeholder {
+.c3::-moz-placeholder {
   color: #9298af;
 }
 
-.c4:-ms-input-placeholder {
+.c3:-ms-input-placeholder {
   color: #9298af;
 }
 
-.c4::placeholder {
+.c3::placeholder {
   color: #9298af;
 }
 
-.c4:focus {
+.c3:focus {
   border-color: #7994d4;
 }
 
-.c4:focus::-webkit-input-placeholder {
+.c3:focus::-webkit-input-placeholder {
   color: transparent;
 }
 
-.c4:focus::-moz-placeholder {
+.c3:focus::-moz-placeholder {
   color: transparent;
 }
 
-.c4:focus:-ms-input-placeholder {
+.c3:focus:-ms-input-placeholder {
   color: transparent;
 }
 
-.c4:focus::placeholder {
+.c3:focus::placeholder {
   color: transparent;
 }
 
-.c3 {
+.c2 {
   display: block;
 }
 
-.c9 {
+.c8 {
   width: 100%;
-  table-layout: fixed;
+  overflow: hidden;
+  border: none;
+  border-radius: 0.6rem;
 }
 
-.c10 {
+.c9 {
   font-weight: bold;
   background: #e4e8ef;
 }
 
-.c5 {
+.c12 + .c11 {
+  border-top: 1px solid #bbcadf;
+}
+
+.c10 {
+  border: none !important;
+}
+
+.c4 {
   margin-top: 2rem;
 }
 
-.c15 {
+.c17 {
   color: #4d73b8;
   cursor: pointer;
 }
 
-.c14 {
+.c16 {
   margin: 1rem 0;
 }
 
-.c13 {
+.c15 {
   margin-top: 1rem;
 }
 
-.c11 {
+.c13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -2449,7 +2296,7 @@ exports[`<Search /> when searching by text, should use ES, api SIREN and siret2i
   justify-content: space-between;
 }
 
-.c12 {
+.c14 {
   -webkit-flex: 1 1 calc(100% - 200px);
   -ms-flex: 1 1 calc(100% - 200px);
   flex: 1 1 calc(100% - 200px);
@@ -2466,51 +2313,38 @@ exports[`<Search /> when searching by text, should use ES, api SIREN and siret2i
 
 @media (max-width:600px) {
   .c0 {
-    padding: 0 1rem;
-  }
-}
-
-@media print {
-  .c0 {
-    max-width: 100%;
-    padding: 0;
-  }
-}
-
-@media (max-width:600px) {
-  .c1 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c6 {
+  .c5 {
     overflow-x: hidden;
   }
 }
 
 @media (max-width:600px) {
-  .c6:before,
-  .c6:after {
+  .c5:before,
+  .c5:after {
     display: block;
   }
 }
 
 @media (max-width:600px) {
-  .c7 {
+  .c6 {
     overflow-x: auto;
   }
 }
 
 @media (max-width:600px) {
-  .c4 {
+  .c3 {
     padding: 0 1rem;
     padding-right: 2rem;
   }
 }
 
 @media screen and (min-width:980px) {
-  .c11 {
+  .c13 {
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
@@ -2522,7 +2356,7 @@ exports[`<Search /> when searching by text, should use ES, api SIREN and siret2i
 }
 
 @media screen and (min-width:980px) {
-  .c12 {
+  .c14 {
     -webkit-align-self: baseline;
     -ms-flex-item-align: baseline;
     align-self: baseline;
@@ -2533,130 +2367,138 @@ exports[`<Search /> when searching by text, should use ES, api SIREN and siret2i
 }
 
 <div>
-  <div
+  <h3
     class="c0"
   >
-    <h3
-      class="c1"
-    >
-      Recherche de convention collective
-    </h3>
-    <p>
-      Renseignez le nom de votre entreprise, son SIRET ou le nom de votre convention collective.
-    </p>
-    <span
-      class="c2 c3"
-    >
-      <input
-        class="c4"
-        name="q"
-        placeholder="Nom d'entreprise, SIRET, nom de convention collective"
-        role="search"
-        type="search"
-        value="hello"
-      />
-    </span>
+    Recherche de convention collective
+  </h3>
+  <p>
+    Renseignez le nom de votre entreprise, son SIRET ou le nom de votre convention collective.
+  </p>
+  <span
+    class="c1 c2"
+  >
+    <input
+      class="c3"
+      name="q"
+      placeholder="Nom d'entreprise, SIRET, nom de convention collective"
+      role="search"
+      type="search"
+      value="hello"
+    />
+  </span>
+  <div
+    class="c4"
+  >
     <div
       class="c5"
     >
       <div
         class="c6"
       >
-        <div
-          class="c7"
+        <table
+          class="c7 c8"
         >
-          <table
-            class="c8 c9"
-          >
-            <tbody>
-              <tr
+          <tbody>
+            <tr
+              class="c9"
+            >
+              <td
+                class="c10"
+              >
+                Conventions collectives
+              </td>
+            </tr>
+            <tr
+              class="c11 c12"
+            >
+              <td
                 class="c10"
               >
-                <td>
-                  Conventions collectives
-                </td>
-              </tr>
-              <tr>
-                <td>
+                <div
+                  class="c13"
+                >
                   <div
-                    class="c11"
-                  >
-                    <div
-                      class="c12"
-                    />
-                  </div>
+                    class="c14"
+                  />
+                </div>
+                <div
+                  class="c15"
+                >
                   <div
-                    class="c13"
+                    class="c16"
                   >
-                    <div
-                      class="c14"
-                    >
-                      <span>
-                        <a
-                          class="c15"
-                        >
-                          titre convention 1
-                        </a>
-                         (IDCC
-                         
-                        0275
-                        )
-                      </span>
-                    </div>
+                    <span>
+                      <a
+                        class="c17"
+                      >
+                        titre convention 1
+                      </a>
+                       (IDCC
+                       
+                      0275
+                      )
+                    </span>
                   </div>
-                </td>
-              </tr>
-              <tr
+                </div>
+              </td>
+            </tr>
+            <tr
+              class="c9"
+            >
+              <td
+                class="c10"
+              >
+                Entreprises
+              </td>
+            </tr>
+            <tr
+              class="c11 c12"
+            >
+              <td
                 class="c10"
               >
-                <td>
-                  Entreprises
-                </td>
-              </tr>
-              <tr>
-                <td>
+                <div
+                  class="c13"
+                >
                   <div
-                    class="c11"
+                    class="c14"
                   >
-                    <div
-                      class="c12"
-                    >
-                      Entreprise 1 93100 Commune test
-                    </div>
-                    <a
-                      href="https://entreprise.data.gouv.fr/etablissement/44144914700020"
-                      rel="noopener noreferrer"
-                      style="font-size: 0.8em;"
-                      target="_blank"
-                      title="Ouvrir la fiche entreprise"
-                    >
-                      Fiche entreprise
-                    </a>
+                    Entreprise 1 93100 Commune test
                   </div>
+                  <a
+                    href="https://entreprise.data.gouv.fr/etablissement/44144914700020"
+                    rel="noopener noreferrer"
+                    style="font-size: 0.8em;"
+                    target="_blank"
+                    title="Ouvrir la fiche entreprise"
+                  >
+                    Fiche entreprise
+                  </a>
+                </div>
+                <div
+                  class="c15"
+                >
                   <div
-                    class="c13"
+                    class="c16"
                   >
-                    <div
-                      class="c14"
-                    >
-                      <span>
-                        <a
-                          class="c15"
-                        >
-                          Short Convention 1
-                        </a>
-                         (IDCC
-                         
-                        0843
-                        )
-                      </span>
-                    </div>
+                    <span>
+                      <a
+                        class="c17"
+                      >
+                        Short Convention 1
+                      </a>
+                       (IDCC
+                       
+                      0843
+                      )
+                    </span>
                   </div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
     </div>
   </div>
diff --git a/packages/code-du-travail-frontend/src/layout/__tests__/__snapshots__/Footer.test.js.snap b/packages/code-du-travail-frontend/src/layout/__tests__/__snapshots__/Footer.test.js.snap
index 333adc8e31..9d06daaeac 100644
--- a/packages/code-du-travail-frontend/src/layout/__tests__/__snapshots__/Footer.test.js.snap
+++ b/packages/code-du-travail-frontend/src/layout/__tests__/__snapshots__/Footer.test.js.snap
@@ -106,8 +106,8 @@ exports[`<Footer /> should render 1`] = `
 }
 
 .c5 {
-  margin: 0 auto 1rem;
   margin-bottom: 1.6rem;
+  margin-left: auto;
   text-align: center;
 }
 
@@ -295,6 +295,7 @@ exports[`<Footer /> should render 1`] = `
 @media (max-width:600px) {
   .c5 {
     margin-bottom: 1rem;
+    margin-left: auto;
   }
 }
 
diff --git a/packages/code-du-travail-frontend/src/layout/__tests__/__snapshots__/Layout.test.js.snap b/packages/code-du-travail-frontend/src/layout/__tests__/__snapshots__/Layout.test.js.snap
index cb9aece249..9cf715e589 100644
--- a/packages/code-du-travail-frontend/src/layout/__tests__/__snapshots__/Layout.test.js.snap
+++ b/packages/code-du-travail-frontend/src/layout/__tests__/__snapshots__/Layout.test.js.snap
@@ -167,8 +167,8 @@ exports[`<Layout /> should render 1`] = `
 }
 
 .c23 {
-  margin: 0 auto 1rem;
   margin-bottom: 1.6rem;
+  margin-left: auto;
   text-align: center;
 }
 
@@ -612,6 +612,7 @@ exports[`<Layout /> should render 1`] = `
 @media (max-width:600px) {
   .c23 {
     margin-bottom: 1rem;
+    margin-left: auto;
   }
 }
 
diff --git a/packages/code-du-travail-frontend/src/outils/DureePreavisDemission/__tests__/__snapshots__/index.test.js.snap b/packages/code-du-travail-frontend/src/outils/DureePreavisDemission/__tests__/__snapshots__/index.test.js.snap
index b6aac94c3a..5ed88b09d9 100644
--- a/packages/code-du-travail-frontend/src/outils/DureePreavisDemission/__tests__/__snapshots__/index.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/DureePreavisDemission/__tests__/__snapshots__/index.test.js.snap
@@ -73,6 +73,7 @@ exports[`<DureePreavisDemission /> should render 1`] = `
   color: #3e486e;
   border-radius: 0.6rem;
   background-color: #f2f5fa;
+  border: 1px solid #f2f5fa;
   position: absolute;
   top: 0;
   bottom: 0;
diff --git a/packages/code-du-travail-frontend/src/outils/DureePreavisDemission/steps/__tests__/__snapshots__/Informations.test.js.snap b/packages/code-du-travail-frontend/src/outils/DureePreavisDemission/steps/__tests__/__snapshots__/Informations.test.js.snap
index 03ef201c06..b06141a699 100644
--- a/packages/code-du-travail-frontend/src/outils/DureePreavisDemission/steps/__tests__/__snapshots__/Informations.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/DureePreavisDemission/steps/__tests__/__snapshots__/Informations.test.js.snap
@@ -1,84 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<StepInformations /> should render 1`] = `
-.c3 {
-  position: absolute;
-  background-color: #7994d4;
-  border-radius: 0.6rem;
-  top: 50%;
-  left: 0;
-  width: 0.4rem;
-  height: 100%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
 .c0 {
-  margin: 0 auto 1rem;
-  text-align: left;
-}
-
-.c2 {
-  position: relative;
-  margin: 0;
-  color: #2f3b6c;
-  font-weight: normal;
-  font-size: 2.8rem;
-  font-family: "Merriweather",serif;
-  line-height: 1.25;
-  padding-left: 3.2rem;
-  text-align: left;
-}
-
-.c1 {
   margin-top: 3.2rem;
   margin-bottom: 2rem;
-}
-
-@media (max-width:600px) {
-  .c2 {
-    padding-left: 1.6rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c2 {
-    font-size: 2.2rem;
-  }
+  color: #4d73b8;
+  font-weight: 600;
+  font-size: 1.8rem;
+  font-family: "Open Sans",sans-serif;
 }
 
 <div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Informations sur le statut du salarié
-    </h2>
-  </header>
+    Informations sur le statut du salarié
+  </h2>
 </div>
 `;
 
 exports[`<StepInformations /> should render catégorie 1`] = `
 .c3 {
-  position: absolute;
-  background-color: #7994d4;
-  border-radius: 0.6rem;
-  top: 50%;
-  left: 0;
-  width: 0.4rem;
-  height: 100%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -98,7 +40,7 @@ exports[`<StepInformations /> should render catégorie 1`] = `
   text-align: center;
 }
 
-.c9 {
+.c6 {
   position: absolute;
   top: 1.6rem;
   right: 1.6rem;
@@ -108,7 +50,7 @@ exports[`<StepInformations /> should render catégorie 1`] = `
   pointer-events: none;
 }
 
-.c8 {
+.c5 {
   width: 100%;
   height: 5.4rem;
   padding: 0 2rem 0;
@@ -129,42 +71,25 @@ exports[`<StepInformations /> should render catégorie 1`] = `
   appearance: none;
 }
 
-.c8::-ms-expand {
+.c5::-ms-expand {
   background-color: transparent;
   border: 0 transparent;
 }
 
-.c8 *::-ms-backdrop,
-.c8 {
+.c5 *::-ms-backdrop,
+.c5 {
   padding-right: 1.6rem;
 }
 
-.c8:invalid {
+.c5:invalid {
   border-color: #eb5757;
 }
 
-.c8:disabled {
+.c5:disabled {
   background-color: #e4e8ef;
 }
 
-.c0 {
-  margin: 0 auto 1rem;
-  text-align: left;
-}
-
 .c2 {
-  position: relative;
-  margin: 0;
-  color: #2f3b6c;
-  font-weight: normal;
-  font-size: 2.8rem;
-  font-family: "Merriweather",serif;
-  line-height: 1.25;
-  padding-left: 3.2rem;
-  text-align: left;
-}
-
-.c5 {
   display: block;
   margin-top: 2rem;
   margin-bottom: 1rem;
@@ -172,70 +97,55 @@ exports[`<StepInformations /> should render catégorie 1`] = `
   cursor: pointer;
 }
 
-.c7 {
+.c4 {
   width: 40rem;
 }
 
-.c4 {
+.c1 {
   margin: 2rem 0;
 }
 
-.c1 {
+.c0 {
   margin-top: 3.2rem;
   margin-bottom: 2rem;
+  color: #4d73b8;
+  font-weight: 600;
+  font-size: 1.8rem;
+  font-family: "Open Sans",sans-serif;
 }
 
 @media (max-width:600px) {
   .c2 {
-    padding-left: 1.6rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c2 {
-    font-size: 2.2rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c5 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c7 {
+  .c4 {
     width: 100%;
   }
 }
 
 <div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Informations sur le statut du salarié
-    </h2>
-  </header>
+    Informations sur le statut du salarié
+  </h2>
   <div
-    class="c4"
+    class="c1"
   >
     <label
-      class="c5"
+      class="c2"
       for="input-criteria.catégorie socio-professionnelle"
     >
       Quelle est la catégorie professionnelle du salarié ?
     </label>
     <div
-      class="c6 c7"
+      class="c3 c4"
     >
       <select
-        class="c8"
+        class="c5"
         id="input-criteria.catégorie socio-professionnelle"
         name="criteria.catégorie socio-professionnelle"
       >
@@ -258,7 +168,7 @@ exports[`<StepInformations /> should render catégorie 1`] = `
       </select>
       <div
         aria-hidden="true"
-        class="c9"
+        class="c6"
       >
         <svg
           fill="none"
@@ -291,19 +201,6 @@ exports[`<StepInformations /> should render catégorie 1`] = `
 
 exports[`<StepInformations /> should render coefficient 1`] = `
 .c3 {
-  position: absolute;
-  background-color: #7994d4;
-  border-radius: 0.6rem;
-  top: 50%;
-  left: 0;
-  width: 0.4rem;
-  height: 100%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -323,7 +220,7 @@ exports[`<StepInformations /> should render coefficient 1`] = `
   text-align: center;
 }
 
-.c9 {
+.c6 {
   position: absolute;
   top: 1.6rem;
   right: 1.6rem;
@@ -333,7 +230,7 @@ exports[`<StepInformations /> should render coefficient 1`] = `
   pointer-events: none;
 }
 
-.c8 {
+.c5 {
   width: 100%;
   height: 5.4rem;
   padding: 0 2rem 0;
@@ -354,42 +251,25 @@ exports[`<StepInformations /> should render coefficient 1`] = `
   appearance: none;
 }
 
-.c8::-ms-expand {
+.c5::-ms-expand {
   background-color: transparent;
   border: 0 transparent;
 }
 
-.c8 *::-ms-backdrop,
-.c8 {
+.c5 *::-ms-backdrop,
+.c5 {
   padding-right: 1.6rem;
 }
 
-.c8:invalid {
+.c5:invalid {
   border-color: #eb5757;
 }
 
-.c8:disabled {
+.c5:disabled {
   background-color: #e4e8ef;
 }
 
-.c0 {
-  margin: 0 auto 1rem;
-  text-align: left;
-}
-
 .c2 {
-  position: relative;
-  margin: 0;
-  color: #2f3b6c;
-  font-weight: normal;
-  font-size: 2.8rem;
-  font-family: "Merriweather",serif;
-  line-height: 1.25;
-  padding-left: 3.2rem;
-  text-align: left;
-}
-
-.c5 {
   display: block;
   margin-top: 2rem;
   margin-bottom: 1rem;
@@ -397,70 +277,55 @@ exports[`<StepInformations /> should render coefficient 1`] = `
   cursor: pointer;
 }
 
-.c7 {
+.c4 {
   width: 40rem;
 }
 
-.c4 {
+.c1 {
   margin: 2rem 0;
 }
 
-.c1 {
+.c0 {
   margin-top: 3.2rem;
   margin-bottom: 2rem;
+  color: #4d73b8;
+  font-weight: 600;
+  font-size: 1.8rem;
+  font-family: "Open Sans",sans-serif;
 }
 
 @media (max-width:600px) {
   .c2 {
-    padding-left: 1.6rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c2 {
-    font-size: 2.2rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c5 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c7 {
+  .c4 {
     width: 100%;
   }
 }
 
 <div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Informations sur le statut du salarié
-    </h2>
-  </header>
+    Informations sur le statut du salarié
+  </h2>
   <div
-    class="c4"
+    class="c1"
   >
     <label
-      class="c5"
+      class="c2"
       for="input-criteria.catégorie socio-professionnelle"
     >
       Quelle est la catégorie professionnelle du salarié ?
     </label>
     <div
-      class="c6 c7"
+      class="c3 c4"
     >
       <select
-        class="c8"
+        class="c5"
         id="input-criteria.catégorie socio-professionnelle"
         name="criteria.catégorie socio-professionnelle"
       >
@@ -483,7 +348,7 @@ exports[`<StepInformations /> should render coefficient 1`] = `
       </select>
       <div
         aria-hidden="true"
-        class="c9"
+        class="c6"
       >
         <svg
           fill="none"
@@ -512,19 +377,19 @@ exports[`<StepInformations /> should render coefficient 1`] = `
     </div>
   </div>
   <div
-    class="c4"
+    class="c1"
   >
     <label
-      class="c5"
+      class="c2"
       for="input-criteria.coefficient"
     >
       Quel est le coefficient hiérarchique du salarié ?
     </label>
     <div
-      class="c6 c7"
+      class="c3 c4"
     >
       <select
-        class="c8"
+        class="c5"
         id="input-criteria.coefficient"
         name="criteria.coefficient"
       >
@@ -547,7 +412,7 @@ exports[`<StepInformations /> should render coefficient 1`] = `
       </select>
       <div
         aria-hidden="true"
-        class="c9"
+        class="c6"
       >
         <svg
           fill="none"
diff --git a/packages/code-du-travail-frontend/src/outils/DureePreavisDemission/steps/__tests__/__snapshots__/Result.test.js.snap b/packages/code-du-travail-frontend/src/outils/DureePreavisDemission/steps/__tests__/__snapshots__/Result.test.js.snap
index 94c68543a5..9866f5dc68 100644
--- a/packages/code-du-travail-frontend/src/outils/DureePreavisDemission/steps/__tests__/__snapshots__/Result.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/DureePreavisDemission/steps/__tests__/__snapshots__/Result.test.js.snap
@@ -1,20 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<StepResult /> should render CC answer 1`] = `
-.c3 {
-  position: absolute;
-  background-color: #7994d4;
-  border-radius: 0.6rem;
-  top: 50%;
-  left: 0;
-  width: 0.4rem;
-  height: 100%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
+.c2 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -36,7 +23,7 @@ exports[`<StepResult /> should render CC answer 1`] = `
   animation: none;
 }
 
-.c6 {
+.c3 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -49,28 +36,15 @@ exports[`<StepResult /> should render CC answer 1`] = `
 }
 
 .c0 {
-  margin: 0 auto 1rem;
-  text-align: left;
-}
-
-.c2 {
-  position: relative;
-  margin: 0;
-  color: #2f3b6c;
-  font-weight: normal;
-  font-size: 2.8rem;
-  font-family: "Merriweather",serif;
-  line-height: 1.25;
-  padding-left: 3.2rem;
-  text-align: left;
-}
-
-.c1 {
   margin-top: 3.2rem;
   margin-bottom: 2rem;
+  color: #4d73b8;
+  font-weight: 600;
+  font-size: 1.8rem;
+  font-family: "Open Sans",sans-serif;
 }
 
-.c4 {
+.c1 {
   color: #3e486e;
   font-weight: 700;
   font-size: 1.8rem;
@@ -78,69 +52,43 @@ exports[`<StepResult /> should render CC answer 1`] = `
 }
 
 @media (max-width:600px) {
-  .c2 {
-    padding-left: 1.6rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c2 {
-    font-size: 2.2rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c4 {
+  .c1 {
     font-size: 1.6rem;
   }
 }
 
 <div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Durée du préavis
-    </h2>
-  </header>
+    Durée du préavis
+  </h2>
   <p>
     À partir des éléments que vous avez saisis, la durée du préavis de démission est estimée à :
   </p>
   <p>
     <strong
-      class="c4"
+      class="c1"
     >
       2 mois
     </strong>
     .
   </p>
   <div
-    class="c5"
+    class="c2"
   >
     <div
-      class="c6"
+      class="c3"
       role="alert"
     >
       Une durée de préavis de démission plus favorable au salarié peut aussi être prévue dans une convention ou un accord au niveau de l’entreprise
     </div>
   </div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Détails
-    </h2>
-  </header>
+    Détails
+  </h2>
   <p>
     Éléments saisis :
   </p>
@@ -167,18 +115,11 @@ exports[`<StepResult /> should render CC answer 1`] = `
       </strong>
     </li>
   </ul>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Source
-    </h2>
-  </header>
+    Source
+  </h2>
   <p>
     <a
       href="https://www.legifrance.gouv.fr/affichCodeArticle.do?cidTexte=LEGITEXT000006072050&idArticle=LEGIARTI000006901174"
diff --git a/packages/code-du-travail-frontend/src/outils/DureePreavisLicenciement/__tests__/__snapshots__/index.test.js.snap b/packages/code-du-travail-frontend/src/outils/DureePreavisLicenciement/__tests__/__snapshots__/index.test.js.snap
index 96f8f627a1..9d7873e7d7 100644
--- a/packages/code-du-travail-frontend/src/outils/DureePreavisLicenciement/__tests__/__snapshots__/index.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/DureePreavisLicenciement/__tests__/__snapshots__/index.test.js.snap
@@ -73,6 +73,7 @@ exports[`<DureePreavisLicenciement /> should render 1`] = `
   color: #3e486e;
   border-radius: 0.6rem;
   background-color: #f2f5fa;
+  border: 1px solid #f2f5fa;
   position: absolute;
   top: 0;
   bottom: 0;
diff --git a/packages/code-du-travail-frontend/src/outils/DureePreavisLicenciement/steps/__tests__/__snapshots__/Informations.test.js.snap b/packages/code-du-travail-frontend/src/outils/DureePreavisLicenciement/steps/__tests__/__snapshots__/Informations.test.js.snap
index 2887356de5..2f9bf28b1c 100644
--- a/packages/code-du-travail-frontend/src/outils/DureePreavisLicenciement/steps/__tests__/__snapshots__/Informations.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/DureePreavisLicenciement/steps/__tests__/__snapshots__/Informations.test.js.snap
@@ -1,20 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<StepInformations /> should render 1`] = `
-.c3 {
-  position: absolute;
-  background-color: #7994d4;
-  border-radius: 0.6rem;
-  top: 50%;
-  left: 0;
-  width: 0.4rem;
-  height: 100%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c7 {
+.c4 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -34,7 +21,7 @@ exports[`<StepInformations /> should render 1`] = `
   text-align: center;
 }
 
-.c10 {
+.c7 {
   position: absolute;
   top: 1.6rem;
   right: 1.6rem;
@@ -44,7 +31,7 @@ exports[`<StepInformations /> should render 1`] = `
   pointer-events: none;
 }
 
-.c9 {
+.c6 {
   width: 100%;
   height: 5.4rem;
   padding: 0 2rem 0;
@@ -65,42 +52,25 @@ exports[`<StepInformations /> should render 1`] = `
   appearance: none;
 }
 
-.c9::-ms-expand {
+.c6::-ms-expand {
   background-color: transparent;
   border: 0 transparent;
 }
 
-.c9 *::-ms-backdrop,
-.c9 {
+.c6 *::-ms-backdrop,
+.c6 {
   padding-right: 1.6rem;
 }
 
-.c9:invalid {
+.c6:invalid {
   border-color: #eb5757;
 }
 
-.c9:disabled {
+.c6:disabled {
   background-color: #e4e8ef;
 }
 
-.c0 {
-  margin: 0 auto 1rem;
-  text-align: left;
-}
-
 .c2 {
-  position: relative;
-  margin: 0;
-  color: #2f3b6c;
-  font-weight: normal;
-  font-size: 2.8rem;
-  font-family: "Merriweather",serif;
-  line-height: 1.25;
-  padding-left: 3.2rem;
-  text-align: left;
-}
-
-.c5 {
   display: block;
   margin-top: 2rem;
   margin-bottom: 1rem;
@@ -108,88 +78,73 @@ exports[`<StepInformations /> should render 1`] = `
   cursor: pointer;
 }
 
-.c6 {
+.c3 {
   display: block;
   margin-bottom: 0.4rem;
   font-size: 1.6rem;
   cursor: pointer;
 }
 
-.c8 {
+.c5 {
   width: 40rem;
 }
 
-.c4 {
+.c1 {
   margin: 2rem 0;
 }
 
-.c1 {
+.c0 {
   margin-top: 3.2rem;
   margin-bottom: 2rem;
+  color: #4d73b8;
+  font-weight: 600;
+  font-size: 1.8rem;
+  font-family: "Open Sans",sans-serif;
 }
 
 @media (max-width:600px) {
   .c2 {
-    padding-left: 1.6rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c2 {
-    font-size: 2.2rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c5 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c6 {
+  .c3 {
     font-size: 1.4rem;
   }
 }
 
 @media (max-width:600px) {
-  .c8 {
+  .c5 {
     width: 100%;
   }
 }
 
 <div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Statut du salarié
-    </h2>
-  </header>
+    Statut du salarié
+  </h2>
   <div
-    class="c4"
+    class="c1"
   >
     <label
-      class="c5"
+      class="c2"
       for="input-criteria.ancienneté"
     >
       Quelle est l'ancienneté du salarié ?
     </label>
     <label
-      class="c6"
+      class="c3"
     >
       Choissisez parmi les catégories d'ancienneté telles que définies par la convention collective
     </label>
     <div
-      class="c7 c8"
+      class="c4 c5"
     >
       <select
-        class="c9"
+        class="c6"
         id="input-criteria.ancienneté"
         name="criteria.ancienneté"
       >
@@ -217,7 +172,7 @@ exports[`<StepInformations /> should render 1`] = `
       </select>
       <div
         aria-hidden="true"
-        class="c10"
+        class="c7"
       >
         <svg
           fill="none"
@@ -250,19 +205,6 @@ exports[`<StepInformations /> should render 1`] = `
 
 exports[`<StepInformations /> should render catégorie 1`] = `
 .c3 {
-  position: absolute;
-  background-color: #7994d4;
-  border-radius: 0.6rem;
-  top: 50%;
-  left: 0;
-  width: 0.4rem;
-  height: 100%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -282,7 +224,7 @@ exports[`<StepInformations /> should render catégorie 1`] = `
   text-align: center;
 }
 
-.c9 {
+.c6 {
   position: absolute;
   top: 1.6rem;
   right: 1.6rem;
@@ -292,7 +234,7 @@ exports[`<StepInformations /> should render catégorie 1`] = `
   pointer-events: none;
 }
 
-.c8 {
+.c5 {
   width: 100%;
   height: 5.4rem;
   padding: 0 2rem 0;
@@ -313,42 +255,25 @@ exports[`<StepInformations /> should render catégorie 1`] = `
   appearance: none;
 }
 
-.c8::-ms-expand {
+.c5::-ms-expand {
   background-color: transparent;
   border: 0 transparent;
 }
 
-.c8 *::-ms-backdrop,
-.c8 {
+.c5 *::-ms-backdrop,
+.c5 {
   padding-right: 1.6rem;
 }
 
-.c8:invalid {
+.c5:invalid {
   border-color: #eb5757;
 }
 
-.c8:disabled {
+.c5:disabled {
   background-color: #e4e8ef;
 }
 
-.c0 {
-  margin: 0 auto 1rem;
-  text-align: left;
-}
-
 .c2 {
-  position: relative;
-  margin: 0;
-  color: #2f3b6c;
-  font-weight: normal;
-  font-size: 2.8rem;
-  font-family: "Merriweather",serif;
-  line-height: 1.25;
-  padding-left: 3.2rem;
-  text-align: left;
-}
-
-.c5 {
   display: block;
   margin-top: 2rem;
   margin-bottom: 1rem;
@@ -356,70 +281,55 @@ exports[`<StepInformations /> should render catégorie 1`] = `
   cursor: pointer;
 }
 
-.c7 {
+.c4 {
   width: 40rem;
 }
 
-.c4 {
+.c1 {
   margin: 2rem 0;
 }
 
-.c1 {
+.c0 {
   margin-top: 3.2rem;
   margin-bottom: 2rem;
+  color: #4d73b8;
+  font-weight: 600;
+  font-size: 1.8rem;
+  font-family: "Open Sans",sans-serif;
 }
 
 @media (max-width:600px) {
   .c2 {
-    padding-left: 1.6rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c2 {
-    font-size: 2.2rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c5 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c7 {
+  .c4 {
     width: 100%;
   }
 }
 
 <div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Statut du salarié
-    </h2>
-  </header>
+    Statut du salarié
+  </h2>
   <div
-    class="c4"
+    class="c1"
   >
     <label
-      class="c5"
+      class="c2"
       for="input-criteria.catégorie socio-professionnelle"
     >
       Quelle est la catégorie professionnelle du salarié ?
     </label>
     <div
-      class="c6 c7"
+      class="c3 c4"
     >
       <select
-        class="c8"
+        class="c5"
         id="input-criteria.catégorie socio-professionnelle"
         name="criteria.catégorie socio-professionnelle"
       >
@@ -457,7 +367,7 @@ exports[`<StepInformations /> should render catégorie 1`] = `
       </select>
       <div
         aria-hidden="true"
-        class="c9"
+        class="c6"
       >
         <svg
           fill="none"
@@ -490,19 +400,6 @@ exports[`<StepInformations /> should render catégorie 1`] = `
 
 exports[`<StepInformations /> should render groupe 1`] = `
 .c3 {
-  position: absolute;
-  background-color: #7994d4;
-  border-radius: 0.6rem;
-  top: 50%;
-  left: 0;
-  width: 0.4rem;
-  height: 100%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -522,7 +419,7 @@ exports[`<StepInformations /> should render groupe 1`] = `
   text-align: center;
 }
 
-.c9 {
+.c6 {
   position: absolute;
   top: 1.6rem;
   right: 1.6rem;
@@ -532,7 +429,7 @@ exports[`<StepInformations /> should render groupe 1`] = `
   pointer-events: none;
 }
 
-.c8 {
+.c5 {
   width: 100%;
   height: 5.4rem;
   padding: 0 2rem 0;
@@ -553,42 +450,25 @@ exports[`<StepInformations /> should render groupe 1`] = `
   appearance: none;
 }
 
-.c8::-ms-expand {
+.c5::-ms-expand {
   background-color: transparent;
   border: 0 transparent;
 }
 
-.c8 *::-ms-backdrop,
-.c8 {
+.c5 *::-ms-backdrop,
+.c5 {
   padding-right: 1.6rem;
 }
 
-.c8:invalid {
+.c5:invalid {
   border-color: #eb5757;
 }
 
-.c8:disabled {
+.c5:disabled {
   background-color: #e4e8ef;
 }
 
-.c0 {
-  margin: 0 auto 1rem;
-  text-align: left;
-}
-
 .c2 {
-  position: relative;
-  margin: 0;
-  color: #2f3b6c;
-  font-weight: normal;
-  font-size: 2.8rem;
-  font-family: "Merriweather",serif;
-  line-height: 1.25;
-  padding-left: 3.2rem;
-  text-align: left;
-}
-
-.c5 {
   display: block;
   margin-top: 2rem;
   margin-bottom: 1rem;
@@ -596,70 +476,55 @@ exports[`<StepInformations /> should render groupe 1`] = `
   cursor: pointer;
 }
 
-.c7 {
+.c4 {
   width: 40rem;
 }
 
-.c4 {
+.c1 {
   margin: 2rem 0;
 }
 
-.c1 {
+.c0 {
   margin-top: 3.2rem;
   margin-bottom: 2rem;
+  color: #4d73b8;
+  font-weight: 600;
+  font-size: 1.8rem;
+  font-family: "Open Sans",sans-serif;
 }
 
 @media (max-width:600px) {
   .c2 {
-    padding-left: 1.6rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c2 {
-    font-size: 2.2rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c5 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c7 {
+  .c4 {
     width: 100%;
   }
 }
 
 <div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Statut du salarié
-    </h2>
-  </header>
+    Statut du salarié
+  </h2>
   <div
-    class="c4"
+    class="c1"
   >
     <label
-      class="c5"
+      class="c2"
       for="input-criteria.catégorie socio-professionnelle"
     >
       Quelle est la catégorie professionnelle du salarié ?
     </label>
     <div
-      class="c6 c7"
+      class="c3 c4"
     >
       <select
-        class="c8"
+        class="c5"
         id="input-criteria.catégorie socio-professionnelle"
         name="criteria.catégorie socio-professionnelle"
       >
@@ -697,7 +562,7 @@ exports[`<StepInformations /> should render groupe 1`] = `
       </select>
       <div
         aria-hidden="true"
-        class="c9"
+        class="c6"
       >
         <svg
           fill="none"
@@ -726,19 +591,19 @@ exports[`<StepInformations /> should render groupe 1`] = `
     </div>
   </div>
   <div
-    class="c4"
+    class="c1"
   >
     <label
-      class="c5"
+      class="c2"
       for="input-criteria.groupe"
     >
       Dans quel groupe professionnel le salarié se situe-t-il ?
     </label>
     <div
-      class="c6 c7"
+      class="c3 c4"
     >
       <select
-        class="c8"
+        class="c5"
         id="input-criteria.groupe"
         name="criteria.groupe"
       >
@@ -756,7 +621,7 @@ exports[`<StepInformations /> should render groupe 1`] = `
       </select>
       <div
         aria-hidden="true"
-        class="c9"
+        class="c6"
       >
         <svg
           fill="none"
diff --git a/packages/code-du-travail-frontend/src/outils/DureePreavisLicenciement/steps/__tests__/__snapshots__/InfosCCn.test.js.snap b/packages/code-du-travail-frontend/src/outils/DureePreavisLicenciement/steps/__tests__/__snapshots__/InfosCCn.test.js.snap
index b79db15ca3..32daea7a01 100644
--- a/packages/code-du-travail-frontend/src/outils/DureePreavisLicenciement/steps/__tests__/__snapshots__/InfosCCn.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/DureePreavisLicenciement/steps/__tests__/__snapshots__/InfosCCn.test.js.snap
@@ -34,6 +34,7 @@ exports[`<StepInfoCCn /> should render cdd infos step 1`] = `
   font-weight: 600;
   font-size: 1.6rem;
   line-height: 1.625;
+  vertical-align: baseline;
   text-align: left;
   background: none;
   border: none;
diff --git a/packages/code-du-travail-frontend/src/outils/DureePreavisLicenciement/steps/__tests__/__snapshots__/Result.test.js.snap b/packages/code-du-travail-frontend/src/outils/DureePreavisLicenciement/steps/__tests__/__snapshots__/Result.test.js.snap
index 29ff67ee87..a18a851ee2 100644
--- a/packages/code-du-travail-frontend/src/outils/DureePreavisLicenciement/steps/__tests__/__snapshots__/Result.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/DureePreavisLicenciement/steps/__tests__/__snapshots__/Result.test.js.snap
@@ -1,20 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<StepResult /> should render show result with collective or compagny agreement disclaimer 1`] = `
-.c3 {
-  position: absolute;
-  background-color: #7994d4;
-  border-radius: 0.6rem;
-  top: 50%;
-  left: 0;
-  width: 0.4rem;
-  height: 100%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
+.c2 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -36,7 +23,7 @@ exports[`<StepResult /> should render show result with collective or compagny ag
   animation: none;
 }
 
-.c6 {
+.c3 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -49,28 +36,15 @@ exports[`<StepResult /> should render show result with collective or compagny ag
 }
 
 .c0 {
-  margin: 0 auto 1rem;
-  text-align: left;
-}
-
-.c2 {
-  position: relative;
-  margin: 0;
-  color: #2f3b6c;
-  font-weight: normal;
-  font-size: 2.8rem;
-  font-family: "Merriweather",serif;
-  line-height: 1.25;
-  padding-left: 3.2rem;
-  text-align: left;
-}
-
-.c1 {
   margin-top: 3.2rem;
   margin-bottom: 2rem;
+  color: #4d73b8;
+  font-weight: 600;
+  font-size: 1.8rem;
+  font-family: "Open Sans",sans-serif;
 }
 
-.c4 {
+.c1 {
   color: #3e486e;
   font-weight: 700;
   font-size: 1.8rem;
@@ -78,68 +52,42 @@ exports[`<StepResult /> should render show result with collective or compagny ag
 }
 
 @media (max-width:600px) {
-  .c2 {
-    padding-left: 1.6rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c2 {
-    font-size: 2.2rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c4 {
+  .c1 {
     font-size: 1.6rem;
   }
 }
 
 <div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Durée du préavis
-    </h2>
-  </header>
+    Durée du préavis
+  </h2>
   <p>
     À partir des éléments que vous avez saisis, la durée du préavis de licenciement est estimée à :
   </p>
   <p>
     <strong
-      class="c4"
+      class="c1"
     >
       1 mois
     </strong>
   </p>
   <div
-    class="c5"
+    class="c2"
   >
     <div
-      class="c6"
+      class="c3"
       role="alert"
     >
       Une durée de préavis de licenciement ou une condition d'ancienneté plus favorable au salarié peut être prévue dans un accord d'entreprise, le contrat de travail ou les usages.
     </div>
   </div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Détails
-    </h2>
-  </header>
+    Détails
+  </h2>
   <p>
     Il s’agit de la durée la plus longue entre la durée légale prévue par le Code du travail et la durée conventionnelle prévue par la convention collective:
   </p>
@@ -206,18 +154,11 @@ exports[`<StepResult /> should render show result with collective or compagny ag
       </strong>
     </li>
   </ul>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Source
-    </h2>
-  </header>
+    Source
+  </h2>
   <p>
     <a
       href="https://www.legifrance.gouv.fr/affichCodeArticle.do?idArticle=LEGIARTI000006901112&cidTexte=LEGITEXT000006072050&dateTexte=20080501"
@@ -241,20 +182,7 @@ exports[`<StepResult /> should render show result with collective or compagny ag
 `;
 
 exports[`<StepResult /> should render show result with company agreement disclaimer 1`] = `
-.c3 {
-  position: absolute;
-  background-color: #7994d4;
-  border-radius: 0.6rem;
-  top: 50%;
-  left: 0;
-  width: 0.4rem;
-  height: 100%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
+.c2 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -276,7 +204,7 @@ exports[`<StepResult /> should render show result with company agreement disclai
   animation: none;
 }
 
-.c6 {
+.c3 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -289,28 +217,15 @@ exports[`<StepResult /> should render show result with company agreement disclai
 }
 
 .c0 {
-  margin: 0 auto 1rem;
-  text-align: left;
-}
-
-.c2 {
-  position: relative;
-  margin: 0;
-  color: #2f3b6c;
-  font-weight: normal;
-  font-size: 2.8rem;
-  font-family: "Merriweather",serif;
-  line-height: 1.25;
-  padding-left: 3.2rem;
-  text-align: left;
-}
-
-.c1 {
   margin-top: 3.2rem;
   margin-bottom: 2rem;
+  color: #4d73b8;
+  font-weight: 600;
+  font-size: 1.8rem;
+  font-family: "Open Sans",sans-serif;
 }
 
-.c4 {
+.c1 {
   color: #3e486e;
   font-weight: 700;
   font-size: 1.8rem;
@@ -318,68 +233,42 @@ exports[`<StepResult /> should render show result with company agreement disclai
 }
 
 @media (max-width:600px) {
-  .c2 {
-    padding-left: 1.6rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c2 {
-    font-size: 2.2rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c4 {
+  .c1 {
     font-size: 1.6rem;
   }
 }
 
 <div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Durée du préavis
-    </h2>
-  </header>
+    Durée du préavis
+  </h2>
   <p>
     À partir des éléments que vous avez saisis, la durée du préavis de licenciement est estimée à :
   </p>
   <p>
     <strong
-      class="c4"
+      class="c1"
     >
       2 mois
     </strong>
   </p>
   <div
-    class="c5"
+    class="c2"
   >
     <div
-      class="c6"
+      class="c3"
       role="alert"
     >
       Une durée de préavis de licenciement ou une condition d'ancienneté plus favorable au salarié peut être prévue dans un accord d'entreprise, le contrat de travail ou les usages.
     </div>
   </div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Détails
-    </h2>
-  </header>
+    Détails
+  </h2>
   <p>
     Il s’agit de la durée la plus longue entre la durée légale prévue par le Code du travail et la durée conventionnelle prévue par la convention collective:
   </p>
@@ -446,18 +335,11 @@ exports[`<StepResult /> should render show result with company agreement disclai
       </strong>
     </li>
   </ul>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Source
-    </h2>
-  </header>
+    Source
+  </h2>
   <p>
     <a
       href="https://www.legifrance.gouv.fr/affichCodeArticle.do?idArticle=LEGIARTI000006901112&cidTexte=LEGITEXT000006072050&dateTexte=20080501"
@@ -481,20 +363,7 @@ exports[`<StepResult /> should render show result with company agreement disclai
 `;
 
 exports[`<StepResult /> should render with CDT no CC 1`] = `
-.c3 {
-  position: absolute;
-  background-color: #7994d4;
-  border-radius: 0.6rem;
-  top: 50%;
-  left: 0;
-  width: 0.4rem;
-  height: 100%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
+.c2 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -516,7 +385,7 @@ exports[`<StepResult /> should render with CDT no CC 1`] = `
   animation: none;
 }
 
-.c6 {
+.c3 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -529,28 +398,15 @@ exports[`<StepResult /> should render with CDT no CC 1`] = `
 }
 
 .c0 {
-  margin: 0 auto 1rem;
-  text-align: left;
-}
-
-.c2 {
-  position: relative;
-  margin: 0;
-  color: #2f3b6c;
-  font-weight: normal;
-  font-size: 2.8rem;
-  font-family: "Merriweather",serif;
-  line-height: 1.25;
-  padding-left: 3.2rem;
-  text-align: left;
-}
-
-.c1 {
   margin-top: 3.2rem;
   margin-bottom: 2rem;
+  color: #4d73b8;
+  font-weight: 600;
+  font-size: 1.8rem;
+  font-family: "Open Sans",sans-serif;
 }
 
-.c4 {
+.c1 {
   color: #3e486e;
   font-weight: 700;
   font-size: 1.8rem;
@@ -558,68 +414,42 @@ exports[`<StepResult /> should render with CDT no CC 1`] = `
 }
 
 @media (max-width:600px) {
-  .c2 {
-    padding-left: 1.6rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c2 {
-    font-size: 2.2rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c4 {
+  .c1 {
     font-size: 1.6rem;
   }
 }
 
 <div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Durée du préavis
-    </h2>
-  </header>
+    Durée du préavis
+  </h2>
   <p>
     À partir des éléments que vous avez saisis, la durée du préavis de licenciement est estimée à :
   </p>
   <p>
     <strong
-      class="c4"
+      class="c1"
     >
       2 mois
     </strong>
   </p>
   <div
-    class="c5"
+    class="c2"
   >
     <div
-      class="c6"
+      class="c3"
       role="alert"
     >
       Une durée de préavis de licenciement ou une condition d'ancienneté plus favorable au salarié peut être prévue dans un accord d'entreprise, le contrat de travail ou les usages.
     </div>
   </div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Détails
-    </h2>
-  </header>
+    Détails
+  </h2>
   <p>
     Il s’agit de la durée la plus longue entre la durée légale prévue par le Code du travail et la durée conventionnelle prévue par la convention collective:
   </p>
@@ -686,18 +516,11 @@ exports[`<StepResult /> should render with CDT no CC 1`] = `
       </strong>
     </li>
   </ul>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Source
-    </h2>
-  </header>
+    Source
+  </h2>
   <p>
     <a
       href="https://www.legifrance.gouv.fr/affichCodeArticle.do?idArticle=LEGIARTI000006901112&cidTexte=LEGITEXT000006072050&dateTexte=20080501"
diff --git a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/__tests__/__snapshots__/SansIndemniteLicenciement.test.js.snap b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/__tests__/__snapshots__/SansIndemniteLicenciement.test.js.snap
index c97125d6e2..1e36255736 100644
--- a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/__tests__/__snapshots__/SansIndemniteLicenciement.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/__tests__/__snapshots__/SansIndemniteLicenciement.test.js.snap
@@ -29,7 +29,8 @@ exports[`<SansIndemniteLicenciement /> should render 1`] = `
 }
 
 .c1 {
-  margin: 0 auto 1rem;
+  margin-bottom: 1.6rem;
+  margin-left: auto;
   text-align: left;
 }
 
@@ -48,6 +49,10 @@ exports[`<SansIndemniteLicenciement /> should render 1`] = `
 .c4 {
   margin-top: 3.2rem;
   margin-bottom: 2rem;
+  color: #4d73b8;
+  font-weight: 600;
+  font-size: 1.8rem;
+  font-family: "Open Sans",sans-serif;
 }
 
 .c5 {
@@ -95,6 +100,13 @@ exports[`<SansIndemniteLicenciement /> should render 1`] = `
   }
 }
 
+@media (max-width:600px) {
+  .c1 {
+    margin-bottom: 1rem;
+    margin-left: auto;
+  }
+}
+
 @media (max-width:600px) {
   .c2 {
     padding-left: 1.6rem;
@@ -132,18 +144,11 @@ exports[`<SansIndemniteLicenciement /> should render 1`] = `
     <p>
       Pour cette branche, le calcul de l’indemnité de licenciement se base sur l’indemnité légale de licenciement.
     </p>
-    <header
-      class="c1 c4"
+    <h2
+      class="c4"
     >
-      <h2
-        class="c2"
-      >
-        <div
-          class="c3"
-        />
-        Indemnité légale
-      </h2>
-    </header>
+      Indemnité légale
+    </h2>
     <p>
       Le code du travail prévoit un montant minimum de
        
diff --git a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/__tests__/__snapshots__/index.test.js.snap b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/__tests__/__snapshots__/index.test.js.snap
index c21e803cce..951dd0aaec 100644
--- a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/__tests__/__snapshots__/index.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/__tests__/__snapshots__/index.test.js.snap
@@ -73,6 +73,7 @@ exports[`<CalculateurIndemnite /> should render 1`] = `
   color: #3e486e;
   border-radius: 0.6rem;
   background-color: #f2f5fa;
+  border: 1px solid #f2f5fa;
   position: absolute;
   top: 0;
   bottom: 0;
diff --git a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/0016/__tests__/__snapshots__/Categorie.test.js.snap b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/0016/__tests__/__snapshots__/Categorie.test.js.snap
index 5422d61d1b..4a4b1a3160 100644
--- a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/0016/__tests__/__snapshots__/Categorie.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/0016/__tests__/__snapshots__/Categorie.test.js.snap
@@ -1,20 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Categorie /> should render 1`] = `
-.c3 {
-  position: absolute;
-  background-color: #7994d4;
-  border-radius: 0.6rem;
-  top: 50%;
-  left: 0;
-  width: 0.4rem;
-  height: 100%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
+.c2 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -34,7 +21,7 @@ exports[`<Categorie /> should render 1`] = `
   text-align: center;
 }
 
-.c7 {
+.c4 {
   position: absolute;
   top: 1.6rem;
   right: 1.6rem;
@@ -44,7 +31,7 @@ exports[`<Categorie /> should render 1`] = `
   pointer-events: none;
 }
 
-.c6 {
+.c3 {
   width: 100%;
   height: 5.4rem;
   padding: 0 2rem 0;
@@ -65,42 +52,25 @@ exports[`<Categorie /> should render 1`] = `
   appearance: none;
 }
 
-.c6::-ms-expand {
+.c3::-ms-expand {
   background-color: transparent;
   border: 0 transparent;
 }
 
-.c6 *::-ms-backdrop,
-.c6 {
+.c3 *::-ms-backdrop,
+.c3 {
   padding-right: 1.6rem;
 }
 
-.c6:invalid {
+.c3:invalid {
   border-color: #eb5757;
 }
 
-.c6:disabled {
+.c3:disabled {
   background-color: #e4e8ef;
 }
 
-.c0 {
-  margin: 0 auto 1rem;
-  text-align: left;
-}
-
-.c2 {
-  position: relative;
-  margin: 0;
-  color: #2f3b6c;
-  font-weight: normal;
-  font-size: 2.8rem;
-  font-family: "Merriweather",serif;
-  line-height: 1.25;
-  padding-left: 3.2rem;
-  text-align: left;
-}
-
-.c4 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -113,50 +83,35 @@ exports[`<Categorie /> should render 1`] = `
   padding: 0;
 }
 
-.c1 {
+.c0 {
   margin-top: 3.2rem;
   margin-bottom: 2rem;
-}
-
-@media (max-width:600px) {
-  .c2 {
-    padding-left: 1.6rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c2 {
-    font-size: 2.2rem;
-  }
+  color: #4d73b8;
+  font-weight: 600;
+  font-size: 1.8rem;
+  font-family: "Open Sans",sans-serif;
 }
 
 <div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Quelle est la catégorie du salarié ?
-    </h2>
-  </header>
+    Quelle est la catégorie du salarié ?
+  </h2>
   <p>
     Cette information se trouve sur le bulletin de salaire.
   </p>
   <label
-    class="c4"
+    class="c1"
     for="input-cat"
   >
     Sélectionnez une catégorie
   </label>
   <div
-    class="c5"
+    class="c2"
   >
     <select
-      class="c6"
+      class="c3"
       id="input-cat"
       name="cat"
     >
@@ -182,7 +137,7 @@ exports[`<Categorie /> should render 1`] = `
     </select>
     <div
       aria-hidden="true"
-      class="c7"
+      class="c4"
     >
       <svg
         fill="none"
diff --git a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/0016/__tests__/__snapshots__/CategoriePeriod.test.js.snap b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/0016/__tests__/__snapshots__/CategoriePeriod.test.js.snap
index aa54ff3914..f8af0e8471 100644
--- a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/0016/__tests__/__snapshots__/CategoriePeriod.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/0016/__tests__/__snapshots__/CategoriePeriod.test.js.snap
@@ -1,56 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<CategoryPeriod /> should render 1`] = `
-.c3 {
-  position: absolute;
-  background-color: #7994d4;
-  border-radius: 0.6rem;
-  top: 50%;
-  left: 0;
-  width: 0.4rem;
-  height: 100%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c0 {
-  margin: 0 auto 1rem;
-  text-align: left;
-}
-
 .c2 {
-  position: relative;
-  margin: 0;
-  color: #2f3b6c;
-  font-weight: normal;
-  font-size: 2.8rem;
-  font-family: "Merriweather",serif;
-  line-height: 1.25;
-  padding-left: 3.2rem;
-  text-align: left;
-}
-
-.c5 {
   width: 10em;
   text-align: right;
   border-color: #bbcadf;
 }
 
-.c5::-webkit-outer-spin-button,
-.c5::-webkit-inner-spin-button {
+.c2::-webkit-outer-spin-button,
+.c2::-webkit-inner-spin-button {
   margin: 0;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c1 {
+.c0 {
   margin-top: 3.2rem;
   margin-bottom: 2rem;
+  color: #4d73b8;
+  font-weight: 600;
+  font-size: 1.8rem;
+  font-family: "Open Sans",sans-serif;
 }
 
-.c4 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -60,40 +34,21 @@ exports[`<CategoryPeriod /> should render 1`] = `
   flex-direction: column;
 }
 
-@media (max-width:600px) {
-  .c2 {
-    padding-left: 1.6rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c2 {
-    font-size: 2.2rem;
-  }
-}
-
 <div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Quelles sont les périodes éventuelles passées au statut de Technicien, Agent de maîtrise (TAM) ou Employé ?
-    </h2>
-  </header>
+    Quelles sont les périodes éventuelles passées au statut de Technicien, Agent de maîtrise (TAM) ou Employé ?
+  </h2>
   <label
-    class="c4"
+    class="c1"
   >
     <p>
       Période passée en tant que TAM ou employé
     </p>
     <div>
       <input
-        class="c5"
+        class="c2"
         min="0"
         name="tamDuration"
         type="number"
@@ -104,14 +59,14 @@ exports[`<CategoryPeriod /> should render 1`] = `
     </div>
   </label>
   <label
-    class="c4"
+    class="c1"
   >
     <p>
       Période passée en tant que cadre
     </p>
     <div>
       <input
-        class="c5"
+        class="c2"
         min="0"
         name="cadreDuration"
         type="number"
diff --git a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/0016/__tests__/__snapshots__/Result.test.js.snap b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/0016/__tests__/__snapshots__/Result.test.js.snap
index 7cfc257606..bbff1bde14 100644
--- a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/0016/__tests__/__snapshots__/Result.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/0016/__tests__/__snapshots__/Result.test.js.snap
@@ -1,53 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Result /> should render 1`] = `
-.c3 {
-  position: absolute;
-  background-color: #7994d4;
-  border-radius: 0.6rem;
-  top: 50%;
-  left: 0;
-  width: 0.4rem;
-  height: 100%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
 .c0 {
-  margin: 0 auto 1rem;
-  text-align: left;
-}
-
-.c2 {
-  position: relative;
-  margin: 0;
-  color: #2f3b6c;
-  font-weight: normal;
-  font-size: 2.8rem;
-  font-family: "Merriweather",serif;
-  line-height: 1.25;
-  padding-left: 3.2rem;
-  text-align: left;
-}
-
-.c1 {
   margin-top: 3.2rem;
   margin-bottom: 2rem;
+  color: #4d73b8;
+  font-weight: 600;
+  font-size: 1.8rem;
+  font-family: "Open Sans",sans-serif;
 }
 
-.c4 {
+.c1 {
   color: #3e486e;
   font-weight: 700;
   font-size: 1.8rem;
   white-space: nowrap;
 }
 
-.c11 {
+.c8 {
   margin-bottom: 1.6rem;
 }
 
-.c7 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -58,46 +32,46 @@ exports[`<Result /> should render 1`] = `
   align-items: stretch;
 }
 
-.c8 {
+.c5 {
   width: calc(50% * 0.9533911504424778);
   background-color: #7994d4;
   border-radius: 0.6rem;
 }
 
-.c16 {
+.c13 {
   width: calc(50% * 1);
   background-color: #7994d4;
   border-radius: 0.6rem;
 }
 
-.c9 {
+.c6 {
   margin-left: 1.6rem;
   color: #4d73b8;
   font-size: 1.8rem;
 }
 
-.c10 {
+.c7 {
   margin-top: 2rem;
 }
 
-.c12 {
+.c9 {
   font-weight: bold;
   font-size: 1.4rem;
 }
 
-.c13 {
+.c10 {
   list-style-type: disc;
 }
 
-.c14 {
+.c11 {
   font-size: 1.4rem;
 }
 
-.c15 {
+.c12 {
   margin: 1.6rem 0;
 }
 
-.c5 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -107,32 +81,20 @@ exports[`<Result /> should render 1`] = `
   flex-direction: column;
 }
 
-.c6 {
+.c3 {
   margin: 0.4rem;
   font-weight: 700;
   font-size: 1.6rem;
 }
 
 @media (max-width:600px) {
-  .c2 {
-    padding-left: 1.6rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c2 {
-    font-size: 2.2rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c4 {
+  .c1 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:980px) {
-  .c7 {
+  .c4 {
     -webkit-flex-flow: wrap;
     -ms-flex-flow: wrap;
     flex-flow: wrap;
@@ -140,129 +102,115 @@ exports[`<Result /> should render 1`] = `
 }
 
 @media (max-width:980px) {
-  .c8 {
+  .c5 {
     width: calc(100% * 0.9533911504424778);
   }
 }
 
 @media (max-width:980px) {
-  .c16 {
+  .c13 {
     width: calc(100% * 1);
   }
 }
 
 @media (max-width:980px) {
-  .c9 {
+  .c6 {
     width: 100%;
     margin-left: 0;
   }
 }
 
 @media (max-width:600px) {
-  .c9 {
+  .c6 {
     font-size: 1.6rem;
   }
 }
 
 <div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Indemnité de licenciement
-    </h2>
-  </header>
+    Indemnité de licenciement
+  </h2>
   <p>
     À partir des éléments que vous avez saisis, l’indemnité de licenciement est estimée à
      
     <strong
-      class="c4"
+      class="c1"
     >
       5,650.00
        € brut
     </strong>
   </p>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Détails
-    </h2>
-  </header>
+    Détails
+  </h2>
   <p>
     Il s’agit du montant le plus important entre l’indemnité légale et l’indemnité conventionnelle.
   </p>
   <div
-    class="c5"
+    class="c2"
   >
     <div>
       <div
-        class="c6"
+        class="c3"
       >
         Votre indemnite légale
       </div>
       <div
-        class="c7"
+        class="c4"
       >
         <div
-          class="c8"
+          class="c5"
         />
         <span
-          class="c9"
+          class="c6"
         >
           5,386.66
            € brut
         </span>
       </div>
       <details
-        class="c10"
+        class="c7"
       >
         <summary
-          class="c11"
+          class="c8"
         >
           Voir le détail du calcul
         </summary>
         <strong
-          class="c12"
+          class="c9"
         >
           Éléments saisis :
         </strong>
         <ul
-          class="c13"
+          class="c10"
         >
           <li
-            class="c14"
+            class="c11"
           >
             Salaire de réference (Sref)
              : 
             2000
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             Licenciement pour inaptitude
              : 
             non
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             Ancienneté totale (A)
              : 
             10.58
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             Ancienneté au delà de 10ans (A2)
              : 
@@ -270,12 +218,12 @@ exports[`<Result /> should render 1`] = `
           </li>
         </ul>
         <strong
-          class="c12"
+          class="c9"
         >
           Formule :
         </strong>
         <div
-          class="c15"
+          class="c12"
         >
           <div
             id="react-mathjax-preview"
@@ -310,83 +258,83 @@ exports[`<Result /> should render 1`] = `
     </div>
     <div>
       <div
-        class="c6"
+        class="c3"
       >
         Votre indemnite conventionnelle
       </div>
       <div
-        class="c7"
+        class="c4"
       >
         <div
-          class="c16"
+          class="c13"
         />
         <span
-          class="c9"
+          class="c6"
         >
           5,650.00
            € brut
         </span>
       </div>
       <details
-        class="c10"
+        class="c7"
       >
         <summary
-          class="c11"
+          class="c8"
         >
           Voir le détail du calcul
         </summary>
         <strong
-          class="c12"
+          class="c9"
         >
           Éléments saisis :
         </strong>
         <ul
-          class="c13"
+          class="c10"
         >
           <li
-            class="c14"
+            class="c11"
           >
             Salaire de référence (Sref)
              : 
             2000
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             Catégorie
              : 
             cadre
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             Durée comme cadre, en mois, (Dc)
              : 
             120
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             durée comme TAM, en mois, (Dt)
              : 
             5
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             En âge de partir à la retraite
              : 
             oui
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             majoration
              : 
             4000
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             minoration
              : 
@@ -394,12 +342,12 @@ exports[`<Result /> should render 1`] = `
           </li>
         </ul>
         <strong
-          class="c12"
+          class="c9"
         >
           Formule :
         </strong>
         <div
-          class="c15"
+          class="c12"
         >
           <div
             id="react-mathjax-preview"
diff --git a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/0016/__tests__/__snapshots__/Step.test.js.snap b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/0016/__tests__/__snapshots__/Step.test.js.snap
index 5f4452cbef..9a4d7db516 100644
--- a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/0016/__tests__/__snapshots__/Step.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/0016/__tests__/__snapshots__/Step.test.js.snap
@@ -1,25 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Step /> should ask detail about categories 1`] = `
-.c3 {
-  position: absolute;
-  background-color: #7994d4;
-  border-radius: 0.6rem;
-  top: 50%;
-  left: 0;
-  width: 0.4rem;
-  height: 100%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c13 {
+.c10 {
   position: relative;
   display: inline-block;
 }
 
-.c14 {
+.c11 {
   width: 100%;
   height: 5.4rem;
   padding: 0 2rem;
@@ -41,15 +28,15 @@ exports[`<Step /> should ask detail about categories 1`] = `
   appearance: none;
 }
 
-.c14::-webkit-outer-spin-button,
-.c14::-webkit-inner-spin-button {
+.c11::-webkit-outer-spin-button,
+.c11::-webkit-inner-spin-button {
   margin: 0;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c14::-webkit-calendar-picker-indicator {
+.c11::-webkit-calendar-picker-indicator {
   display: block;
   width: 3.2rem;
   height: 3.2rem;
@@ -62,47 +49,47 @@ exports[`<Step /> should ask detail about categories 1`] = `
   mask-image: url("data:image/svg+xml;,%3Csvg%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.947%207.601h1.601c1.472%200%202.521%201.198%202.521%202.669v2.306l-.001%2010.392c0%201.472-1.049%202.669-2.521%202.669H8.669A2.672%202.672%200%20016%2022.967l.001-12.697a2.672%202.672%200%20012.67-2.669h1.331V6h.999v1.601H20V6h.947v1.601zm1.6%2017.036c.883%200%201.454-.786%201.454-1.67v-10.33h-17L7%2022.967c0%20.884.785%201.67%201.668%201.67h13.879zm-15.548-13h17.002l.001-1.367c0-.883-.57-1.601-1.453-1.601h-1.6v1.068H20V8.669h-9v1.068h-1V8.669H8.669C7.786%208.669%207%209.387%207%2010.27v1.367zm9.677%206.277h-2.135a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203h-2.135v2.135h2.136v-2.135zm3.203%203.203h2.135a1.07%201.07%200%20001.068-1.068v-2.135a1.07%201.07%200%2000-1.068-1.068H19.88a1.07%201.07%200%2000-1.068%201.068v2.135a1.07%201.07%200%20001.068%201.068zm0-3.203h2.135l.001%202.135H19.88v-2.135zm-8.54%208.541H9.204a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203H9.204v2.135h2.136l-.001-2.135zm3.202%203.203h2.135a1.07%201.07%200%20001.068-1.068v-2.135a1.07%201.07%200%2000-1.068-1.068h-2.135a1.07%201.07%200%2000-1.068%201.068v2.135a1.07%201.07%200%20001.068%201.068zm0-3.203h2.135l.001%202.135h-2.136v-2.135zm7.473%203.203H19.88a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203H19.88v2.135h2.136v-2.135z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
 }
 
-.c14:invalid {
+.c11:invalid {
   border-color: #eb5757;
 }
 
-.c14::-webkit-input-placeholder {
+.c11::-webkit-input-placeholder {
   color: #9298af;
 }
 
-.c14::-moz-placeholder {
+.c11::-moz-placeholder {
   color: #9298af;
 }
 
-.c14:-ms-input-placeholder {
+.c11:-ms-input-placeholder {
   color: #9298af;
 }
 
-.c14::placeholder {
+.c11::placeholder {
   color: #9298af;
 }
 
-.c14:focus {
+.c11:focus {
   border-color: #7994d4;
 }
 
-.c14:focus::-webkit-input-placeholder {
+.c11:focus::-webkit-input-placeholder {
   color: transparent;
 }
 
-.c14:focus::-moz-placeholder {
+.c11:focus::-moz-placeholder {
   color: transparent;
 }
 
-.c14:focus:-ms-input-placeholder {
+.c11:focus:-ms-input-placeholder {
   color: transparent;
 }
 
-.c14:focus::placeholder {
+.c11:focus::placeholder {
   color: transparent;
 }
 
-.c5 {
+.c2 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -122,7 +109,7 @@ exports[`<Step /> should ask detail about categories 1`] = `
   text-align: center;
 }
 
-.c7 {
+.c4 {
   position: absolute;
   top: 1.6rem;
   right: 1.6rem;
@@ -132,7 +119,7 @@ exports[`<Step /> should ask detail about categories 1`] = `
   pointer-events: none;
 }
 
-.c6 {
+.c3 {
   width: 100%;
   height: 5.4rem;
   padding: 0 2rem 0;
@@ -153,56 +140,39 @@ exports[`<Step /> should ask detail about categories 1`] = `
   appearance: none;
 }
 
-.c6::-ms-expand {
+.c3::-ms-expand {
   background-color: transparent;
   border: 0 transparent;
 }
 
-.c6 *::-ms-backdrop,
-.c6 {
+.c3 *::-ms-backdrop,
+.c3 {
   padding-right: 1.6rem;
 }
 
-.c6:invalid {
+.c3:invalid {
   border-color: #eb5757;
 }
 
-.c6:disabled {
+.c3:disabled {
   background-color: #e4e8ef;
 }
 
-.c0 {
-  margin: 0 auto 1rem;
-  text-align: left;
-}
-
-.c2 {
-  position: relative;
-  margin: 0;
-  color: #2f3b6c;
-  font-weight: normal;
-  font-size: 2.8rem;
-  font-family: "Merriweather",serif;
-  line-height: 1.25;
-  padding-left: 3.2rem;
-  text-align: left;
-}
-
-.c9 {
+.c6 {
   width: 10em;
   text-align: right;
   border-color: #bbcadf;
 }
 
-.c9::-webkit-outer-spin-button,
-.c9::-webkit-inner-spin-button {
+.c6::-webkit-outer-spin-button,
+.c6::-webkit-inner-spin-button {
   margin: 0;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c4 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -215,12 +185,16 @@ exports[`<Step /> should ask detail about categories 1`] = `
   padding: 0;
 }
 
-.c1 {
+.c0 {
   margin-top: 3.2rem;
   margin-bottom: 2rem;
+  color: #4d73b8;
+  font-weight: 600;
+  font-size: 1.8rem;
+  font-family: "Open Sans",sans-serif;
 }
 
-.c8 {
+.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -230,7 +204,7 @@ exports[`<Step /> should ask detail about categories 1`] = `
   flex-direction: column;
 }
 
-.c10 {
+.c7 {
   display: block;
   margin-top: 2rem;
   margin-bottom: 1rem;
@@ -238,13 +212,13 @@ exports[`<Step /> should ask detail about categories 1`] = `
   cursor: pointer;
 }
 
-.c11 {
+.c8 {
   display: inline-block;
   margin-left: 1rem;
   color: #eb5757;
 }
 
-.c12 {
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -257,57 +231,38 @@ exports[`<Step /> should ask detail about categories 1`] = `
 }
 
 @media (max-width:600px) {
-  .c14 {
+  .c11 {
     padding: 0 1rem;
     padding-right: 2rem;
   }
 }
 
 @media (max-width:600px) {
-  .c2 {
-    padding-left: 1.6rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c2 {
-    font-size: 2.2rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c10 {
+  .c7 {
     font-size: 1.6rem;
   }
 }
 
 <div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Quelle est la catégorie du salarié ?
-    </h2>
-  </header>
+    Quelle est la catégorie du salarié ?
+  </h2>
   <p>
     Cette information se trouve sur le bulletin de salaire.
   </p>
   <label
-    class="c4"
+    class="c1"
     for="input-categorie"
   >
     Sélectionnez une catégorie
   </label>
   <div
-    class="c5"
+    class="c2"
   >
     <select
-      class="c6"
+      class="c3"
       id="input-categorie"
       name="categorie"
     >
@@ -333,7 +288,7 @@ exports[`<Step /> should ask detail about categories 1`] = `
     </select>
     <div
       aria-hidden="true"
-      class="c7"
+      class="c4"
     >
       <svg
         fill="none"
@@ -360,27 +315,20 @@ exports[`<Step /> should ask detail about categories 1`] = `
       </svg>
     </div>
   </div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Quelles sont les périodes éventuelles passées au statut de Technicien, Agent de maîtrise (TAM) ou Employé ?
-    </h2>
-  </header>
+    Quelles sont les périodes éventuelles passées au statut de Technicien, Agent de maîtrise (TAM) ou Employé ?
+  </h2>
   <label
-    class="c8"
+    class="c5"
   >
     <p>
       Période passée en tant que TAM ou employé
     </p>
     <div>
       <input
-        class="c9"
+        class="c6"
         min="0"
         name="tamDuration"
         type="number"
@@ -391,14 +339,14 @@ exports[`<Step /> should ask detail about categories 1`] = `
     </div>
   </label>
   <label
-    class="c8"
+    class="c5"
   >
     <p>
       Période passée en tant que cadre
     </p>
     <div>
       <input
-        class="c9"
+        class="c6"
         min="0"
         name="cadreDuration"
         type="number"
@@ -409,25 +357,25 @@ exports[`<Step /> should ask detail about categories 1`] = `
     </div>
   </label>
   <label
-    class="c10"
+    class="c7"
     for="2"
   >
     Quel est l'âge du salarié à la date du licenciement ?
     <span
       aria-label="champs obligatoire"
-      class="c11"
+      class="c8"
     >
       *
     </span>
   </label>
   <div
-    class="c12"
+    class="c9"
   >
     <span
-      class="c13"
+      class="c10"
     >
       <input
-        class="c14"
+        class="c11"
         id="2"
         name="age"
         value=""
@@ -438,25 +386,12 @@ exports[`<Step /> should ask detail about categories 1`] = `
 `;
 
 exports[`<Step /> should ask detail about retirement  1`] = `
-.c3 {
-  position: absolute;
-  background-color: #7994d4;
-  border-radius: 0.6rem;
-  top: 50%;
-  left: 0;
-  width: 0.4rem;
-  height: 100%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c11 {
+.c8 {
   position: relative;
   display: inline-block;
 }
 
-.c12 {
+.c9 {
   width: 100%;
   height: 5.4rem;
   padding: 0 2rem;
@@ -478,15 +413,15 @@ exports[`<Step /> should ask detail about retirement  1`] = `
   appearance: none;
 }
 
-.c12::-webkit-outer-spin-button,
-.c12::-webkit-inner-spin-button {
+.c9::-webkit-outer-spin-button,
+.c9::-webkit-inner-spin-button {
   margin: 0;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c12::-webkit-calendar-picker-indicator {
+.c9::-webkit-calendar-picker-indicator {
   display: block;
   width: 3.2rem;
   height: 3.2rem;
@@ -499,47 +434,47 @@ exports[`<Step /> should ask detail about retirement  1`] = `
   mask-image: url("data:image/svg+xml;,%3Csvg%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.947%207.601h1.601c1.472%200%202.521%201.198%202.521%202.669v2.306l-.001%2010.392c0%201.472-1.049%202.669-2.521%202.669H8.669A2.672%202.672%200%20016%2022.967l.001-12.697a2.672%202.672%200%20012.67-2.669h1.331V6h.999v1.601H20V6h.947v1.601zm1.6%2017.036c.883%200%201.454-.786%201.454-1.67v-10.33h-17L7%2022.967c0%20.884.785%201.67%201.668%201.67h13.879zm-15.548-13h17.002l.001-1.367c0-.883-.57-1.601-1.453-1.601h-1.6v1.068H20V8.669h-9v1.068h-1V8.669H8.669C7.786%208.669%207%209.387%207%2010.27v1.367zm9.677%206.277h-2.135a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203h-2.135v2.135h2.136v-2.135zm3.203%203.203h2.135a1.07%201.07%200%20001.068-1.068v-2.135a1.07%201.07%200%2000-1.068-1.068H19.88a1.07%201.07%200%2000-1.068%201.068v2.135a1.07%201.07%200%20001.068%201.068zm0-3.203h2.135l.001%202.135H19.88v-2.135zm-8.54%208.541H9.204a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203H9.204v2.135h2.136l-.001-2.135zm3.202%203.203h2.135a1.07%201.07%200%20001.068-1.068v-2.135a1.07%201.07%200%2000-1.068-1.068h-2.135a1.07%201.07%200%2000-1.068%201.068v2.135a1.07%201.07%200%20001.068%201.068zm0-3.203h2.135l.001%202.135h-2.136v-2.135zm7.473%203.203H19.88a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203H19.88v2.135h2.136v-2.135z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
 }
 
-.c12:invalid {
+.c9:invalid {
   border-color: #eb5757;
 }
 
-.c12::-webkit-input-placeholder {
+.c9::-webkit-input-placeholder {
   color: #9298af;
 }
 
-.c12::-moz-placeholder {
+.c9::-moz-placeholder {
   color: #9298af;
 }
 
-.c12:-ms-input-placeholder {
+.c9:-ms-input-placeholder {
   color: #9298af;
 }
 
-.c12::placeholder {
+.c9::placeholder {
   color: #9298af;
 }
 
-.c12:focus {
+.c9:focus {
   border-color: #7994d4;
 }
 
-.c12:focus::-webkit-input-placeholder {
+.c9:focus::-webkit-input-placeholder {
   color: transparent;
 }
 
-.c12:focus::-moz-placeholder {
+.c9:focus::-moz-placeholder {
   color: transparent;
 }
 
-.c12:focus:-ms-input-placeholder {
+.c9:focus:-ms-input-placeholder {
   color: transparent;
 }
 
-.c12:focus::placeholder {
+.c9:focus::placeholder {
   color: transparent;
 }
 
-.c15 {
+.c12 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -548,7 +483,7 @@ exports[`<Step /> should ask detail about retirement  1`] = `
   cursor: pointer;
 }
 
-.c16 {
+.c13 {
   position: relative;
   display: inline-block;
   -webkit-flex-shrink: 0;
@@ -569,7 +504,7 @@ exports[`<Step /> should ask detail about retirement  1`] = `
   appearance: none;
 }
 
-.c16:before {
+.c13:before {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -584,16 +519,16 @@ exports[`<Step /> should ask detail about retirement  1`] = `
   content: "";
 }
 
-.c16:checked {
+.c13:checked {
   background-color: #fff;
   border-color: #f66663;
 }
 
-.c16:checked:before {
+.c13:checked:before {
   display: block;
 }
 
-.c5 {
+.c2 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -613,7 +548,7 @@ exports[`<Step /> should ask detail about retirement  1`] = `
   text-align: center;
 }
 
-.c7 {
+.c4 {
   position: absolute;
   top: 1.6rem;
   right: 1.6rem;
@@ -623,7 +558,7 @@ exports[`<Step /> should ask detail about retirement  1`] = `
   pointer-events: none;
 }
 
-.c6 {
+.c3 {
   width: 100%;
   height: 5.4rem;
   padding: 0 2rem 0;
@@ -644,42 +579,25 @@ exports[`<Step /> should ask detail about retirement  1`] = `
   appearance: none;
 }
 
-.c6::-ms-expand {
+.c3::-ms-expand {
   background-color: transparent;
   border: 0 transparent;
 }
 
-.c6 *::-ms-backdrop,
-.c6 {
+.c3 *::-ms-backdrop,
+.c3 {
   padding-right: 1.6rem;
 }
 
-.c6:invalid {
+.c3:invalid {
   border-color: #eb5757;
 }
 
-.c6:disabled {
+.c3:disabled {
   background-color: #e4e8ef;
 }
 
-.c0 {
-  margin: 0 auto 1rem;
-  text-align: left;
-}
-
-.c2 {
-  position: relative;
-  margin: 0;
-  color: #2f3b6c;
-  font-weight: normal;
-  font-size: 2.8rem;
-  font-family: "Merriweather",serif;
-  line-height: 1.25;
-  padding-left: 3.2rem;
-  text-align: left;
-}
-
-.c4 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -692,7 +610,7 @@ exports[`<Step /> should ask detail about retirement  1`] = `
   padding: 0;
 }
 
-.c14 {
+.c11 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -711,12 +629,16 @@ exports[`<Step /> should ask detail about retirement  1`] = `
   margin-bottom: 2rem;
 }
 
-.c1 {
+.c0 {
   margin-top: 3.2rem;
   margin-bottom: 2rem;
+  color: #4d73b8;
+  font-weight: 600;
+  font-size: 1.8rem;
+  font-family: "Open Sans",sans-serif;
 }
 
-.c8 {
+.c5 {
   display: block;
   margin-top: 2rem;
   margin-bottom: 1rem;
@@ -724,7 +646,7 @@ exports[`<Step /> should ask detail about retirement  1`] = `
   cursor: pointer;
 }
 
-.c13 {
+.c10 {
   display: block;
   margin-top: 2rem;
   margin-bottom: 1rem;
@@ -732,13 +654,13 @@ exports[`<Step /> should ask detail about retirement  1`] = `
   cursor: default;
 }
 
-.c9 {
+.c6 {
   display: inline-block;
   margin-left: 1rem;
   color: #eb5757;
 }
 
-.c10 {
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -751,63 +673,44 @@ exports[`<Step /> should ask detail about retirement  1`] = `
 }
 
 @media (max-width:600px) {
-  .c12 {
+  .c9 {
     padding: 0 1rem;
     padding-right: 2rem;
   }
 }
 
 @media (max-width:600px) {
-  .c2 {
-    padding-left: 1.6rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c2 {
-    font-size: 2.2rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c8 {
+  .c5 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c13 {
+  .c10 {
     font-size: 1.6rem;
   }
 }
 
 <div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Quelle est la catégorie du salarié ?
-    </h2>
-  </header>
+    Quelle est la catégorie du salarié ?
+  </h2>
   <p>
     Cette information se trouve sur le bulletin de salaire.
   </p>
   <label
-    class="c4"
+    class="c1"
     for="input-categorie"
   >
     Sélectionnez une catégorie
   </label>
   <div
-    class="c5"
+    class="c2"
   >
     <select
-      class="c6"
+      class="c3"
       id="input-categorie"
       name="categorie"
     >
@@ -833,7 +736,7 @@ exports[`<Step /> should ask detail about retirement  1`] = `
     </select>
     <div
       aria-hidden="true"
-      class="c7"
+      class="c4"
     >
       <svg
         fill="none"
@@ -861,25 +764,25 @@ exports[`<Step /> should ask detail about retirement  1`] = `
     </div>
   </div>
   <label
-    class="c8"
+    class="c5"
     for="3"
   >
     Quel est l'âge du salarié à la date du licenciement ?
     <span
       aria-label="champs obligatoire"
-      class="c9"
+      class="c6"
     >
       *
     </span>
   </label>
   <div
-    class="c10"
+    class="c7"
   >
     <span
-      class="c11"
+      class="c8"
     >
       <input
-        class="c12"
+        class="c9"
         id="3"
         name="age"
         value="62"
@@ -887,25 +790,25 @@ exports[`<Step /> should ask detail about retirement  1`] = `
     </span>
   </div>
   <p
-    class="c13"
+    class="c10"
   >
     Le salarié pourrait-il bénéficier de la retraite ?
     <span
       aria-label="champs obligatoire"
-      class="c9"
+      class="c6"
     >
       *
     </span>
   </p>
   <div
-    class="c14"
+    class="c11"
   >
     <label
-      class="c15"
+      class="c12"
       for="hasRetirementAge-yes"
     >
       <input
-        class="c16"
+        class="c13"
         id="hasRetirementAge-yes"
         name="hasRetirementAge"
         type="radio"
@@ -914,11 +817,11 @@ exports[`<Step /> should ask detail about retirement  1`] = `
       Oui
     </label>
     <label
-      class="c15"
+      class="c12"
       for="hasRetirementAge-no"
     >
       <input
-        class="c16"
+        class="c13"
         id="hasRetirementAge-no"
         name="hasRetirementAge"
         type="radio"
@@ -931,25 +834,12 @@ exports[`<Step /> should ask detail about retirement  1`] = `
 `;
 
 exports[`<Step /> should render 1`] = `
-.c3 {
-  position: absolute;
-  background-color: #7994d4;
-  border-radius: 0.6rem;
-  top: 50%;
-  left: 0;
-  width: 0.4rem;
-  height: 100%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c11 {
+.c8 {
   position: relative;
   display: inline-block;
 }
 
-.c12 {
+.c9 {
   width: 100%;
   height: 5.4rem;
   padding: 0 2rem;
@@ -971,15 +861,15 @@ exports[`<Step /> should render 1`] = `
   appearance: none;
 }
 
-.c12::-webkit-outer-spin-button,
-.c12::-webkit-inner-spin-button {
+.c9::-webkit-outer-spin-button,
+.c9::-webkit-inner-spin-button {
   margin: 0;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c12::-webkit-calendar-picker-indicator {
+.c9::-webkit-calendar-picker-indicator {
   display: block;
   width: 3.2rem;
   height: 3.2rem;
@@ -992,47 +882,47 @@ exports[`<Step /> should render 1`] = `
   mask-image: url("data:image/svg+xml;,%3Csvg%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.947%207.601h1.601c1.472%200%202.521%201.198%202.521%202.669v2.306l-.001%2010.392c0%201.472-1.049%202.669-2.521%202.669H8.669A2.672%202.672%200%20016%2022.967l.001-12.697a2.672%202.672%200%20012.67-2.669h1.331V6h.999v1.601H20V6h.947v1.601zm1.6%2017.036c.883%200%201.454-.786%201.454-1.67v-10.33h-17L7%2022.967c0%20.884.785%201.67%201.668%201.67h13.879zm-15.548-13h17.002l.001-1.367c0-.883-.57-1.601-1.453-1.601h-1.6v1.068H20V8.669h-9v1.068h-1V8.669H8.669C7.786%208.669%207%209.387%207%2010.27v1.367zm9.677%206.277h-2.135a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203h-2.135v2.135h2.136v-2.135zm3.203%203.203h2.135a1.07%201.07%200%20001.068-1.068v-2.135a1.07%201.07%200%2000-1.068-1.068H19.88a1.07%201.07%200%2000-1.068%201.068v2.135a1.07%201.07%200%20001.068%201.068zm0-3.203h2.135l.001%202.135H19.88v-2.135zm-8.54%208.541H9.204a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203H9.204v2.135h2.136l-.001-2.135zm3.202%203.203h2.135a1.07%201.07%200%20001.068-1.068v-2.135a1.07%201.07%200%2000-1.068-1.068h-2.135a1.07%201.07%200%2000-1.068%201.068v2.135a1.07%201.07%200%20001.068%201.068zm0-3.203h2.135l.001%202.135h-2.136v-2.135zm7.473%203.203H19.88a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203H19.88v2.135h2.136v-2.135z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
 }
 
-.c12:invalid {
+.c9:invalid {
   border-color: #eb5757;
 }
 
-.c12::-webkit-input-placeholder {
+.c9::-webkit-input-placeholder {
   color: #9298af;
 }
 
-.c12::-moz-placeholder {
+.c9::-moz-placeholder {
   color: #9298af;
 }
 
-.c12:-ms-input-placeholder {
+.c9:-ms-input-placeholder {
   color: #9298af;
 }
 
-.c12::placeholder {
+.c9::placeholder {
   color: #9298af;
 }
 
-.c12:focus {
+.c9:focus {
   border-color: #7994d4;
 }
 
-.c12:focus::-webkit-input-placeholder {
+.c9:focus::-webkit-input-placeholder {
   color: transparent;
 }
 
-.c12:focus::-moz-placeholder {
+.c9:focus::-moz-placeholder {
   color: transparent;
 }
 
-.c12:focus:-ms-input-placeholder {
+.c9:focus:-ms-input-placeholder {
   color: transparent;
 }
 
-.c12:focus::placeholder {
+.c9:focus::placeholder {
   color: transparent;
 }
 
-.c5 {
+.c2 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -1052,7 +942,7 @@ exports[`<Step /> should render 1`] = `
   text-align: center;
 }
 
-.c7 {
+.c4 {
   position: absolute;
   top: 1.6rem;
   right: 1.6rem;
@@ -1062,7 +952,7 @@ exports[`<Step /> should render 1`] = `
   pointer-events: none;
 }
 
-.c6 {
+.c3 {
   width: 100%;
   height: 5.4rem;
   padding: 0 2rem 0;
@@ -1083,42 +973,25 @@ exports[`<Step /> should render 1`] = `
   appearance: none;
 }
 
-.c6::-ms-expand {
+.c3::-ms-expand {
   background-color: transparent;
   border: 0 transparent;
 }
 
-.c6 *::-ms-backdrop,
-.c6 {
+.c3 *::-ms-backdrop,
+.c3 {
   padding-right: 1.6rem;
 }
 
-.c6:invalid {
+.c3:invalid {
   border-color: #eb5757;
 }
 
-.c6:disabled {
+.c3:disabled {
   background-color: #e4e8ef;
 }
 
-.c0 {
-  margin: 0 auto 1rem;
-  text-align: left;
-}
-
-.c2 {
-  position: relative;
-  margin: 0;
-  color: #2f3b6c;
-  font-weight: normal;
-  font-size: 2.8rem;
-  font-family: "Merriweather",serif;
-  line-height: 1.25;
-  padding-left: 3.2rem;
-  text-align: left;
-}
-
-.c4 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1131,12 +1004,16 @@ exports[`<Step /> should render 1`] = `
   padding: 0;
 }
 
-.c1 {
+.c0 {
   margin-top: 3.2rem;
   margin-bottom: 2rem;
+  color: #4d73b8;
+  font-weight: 600;
+  font-size: 1.8rem;
+  font-family: "Open Sans",sans-serif;
 }
 
-.c8 {
+.c5 {
   display: block;
   margin-top: 2rem;
   margin-bottom: 1rem;
@@ -1144,13 +1021,13 @@ exports[`<Step /> should render 1`] = `
   cursor: pointer;
 }
 
-.c9 {
+.c6 {
   display: inline-block;
   margin-left: 1rem;
   color: #eb5757;
 }
 
-.c10 {
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -1163,57 +1040,38 @@ exports[`<Step /> should render 1`] = `
 }
 
 @media (max-width:600px) {
-  .c12 {
+  .c9 {
     padding: 0 1rem;
     padding-right: 2rem;
   }
 }
 
 @media (max-width:600px) {
-  .c2 {
-    padding-left: 1.6rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c2 {
-    font-size: 2.2rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c8 {
+  .c5 {
     font-size: 1.6rem;
   }
 }
 
 <div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Quelle est la catégorie du salarié ?
-    </h2>
-  </header>
+    Quelle est la catégorie du salarié ?
+  </h2>
   <p>
     Cette information se trouve sur le bulletin de salaire.
   </p>
   <label
-    class="c4"
+    class="c1"
     for="input-categorie"
   >
     Sélectionnez une catégorie
   </label>
   <div
-    class="c5"
+    class="c2"
   >
     <select
-      class="c6"
+      class="c3"
       id="input-categorie"
       name="categorie"
     >
@@ -1239,7 +1097,7 @@ exports[`<Step /> should render 1`] = `
     </select>
     <div
       aria-hidden="true"
-      class="c7"
+      class="c4"
     >
       <svg
         fill="none"
@@ -1267,25 +1125,25 @@ exports[`<Step /> should render 1`] = `
     </div>
   </div>
   <label
-    class="c8"
+    class="c5"
     for="1"
   >
     Quel est l'âge du salarié à la date du licenciement ?
     <span
       aria-label="champs obligatoire"
-      class="c9"
+      class="c6"
     >
       *
     </span>
   </label>
   <div
-    class="c10"
+    class="c7"
   >
     <span
-      class="c11"
+      class="c8"
     >
       <input
-        class="c12"
+        class="c9"
         id="1"
         name="age"
         value=""
diff --git a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/0044/__tests__/__snapshots__/Result.test.js.snap b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/0044/__tests__/__snapshots__/Result.test.js.snap
index 32ee7dc9a5..dd8af81fe6 100644
--- a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/0044/__tests__/__snapshots__/Result.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/0044/__tests__/__snapshots__/Result.test.js.snap
@@ -1,53 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Result /> should render 1`] = `
-.c3 {
-  position: absolute;
-  background-color: #7994d4;
-  border-radius: 0.6rem;
-  top: 50%;
-  left: 0;
-  width: 0.4rem;
-  height: 100%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
 .c0 {
-  margin: 0 auto 1rem;
-  text-align: left;
-}
-
-.c2 {
-  position: relative;
-  margin: 0;
-  color: #2f3b6c;
-  font-weight: normal;
-  font-size: 2.8rem;
-  font-family: "Merriweather",serif;
-  line-height: 1.25;
-  padding-left: 3.2rem;
-  text-align: left;
-}
-
-.c1 {
   margin-top: 3.2rem;
   margin-bottom: 2rem;
+  color: #4d73b8;
+  font-weight: 600;
+  font-size: 1.8rem;
+  font-family: "Open Sans",sans-serif;
 }
 
-.c4 {
+.c1 {
   color: #3e486e;
   font-weight: 700;
   font-size: 1.8rem;
   white-space: nowrap;
 }
 
-.c11 {
+.c8 {
   margin-bottom: 1.6rem;
 }
 
-.c7 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -58,46 +32,46 @@ exports[`<Result /> should render 1`] = `
   align-items: stretch;
 }
 
-.c8 {
+.c5 {
   width: calc(50% * 0.8333333333333334);
   background-color: #7994d4;
   border-radius: 0.6rem;
 }
 
-.c16 {
+.c13 {
   width: calc(50% * 1);
   background-color: #7994d4;
   border-radius: 0.6rem;
 }
 
-.c9 {
+.c6 {
   margin-left: 1.6rem;
   color: #4d73b8;
   font-size: 1.8rem;
 }
 
-.c10 {
+.c7 {
   margin-top: 2rem;
 }
 
-.c12 {
+.c9 {
   font-weight: bold;
   font-size: 1.4rem;
 }
 
-.c13 {
+.c10 {
   list-style-type: disc;
 }
 
-.c14 {
+.c11 {
   font-size: 1.4rem;
 }
 
-.c15 {
+.c12 {
   margin: 1.6rem 0;
 }
 
-.c5 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -107,32 +81,20 @@ exports[`<Result /> should render 1`] = `
   flex-direction: column;
 }
 
-.c6 {
+.c3 {
   margin: 0.4rem;
   font-weight: 700;
   font-size: 1.6rem;
 }
 
 @media (max-width:600px) {
-  .c2 {
-    padding-left: 1.6rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c2 {
-    font-size: 2.2rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c4 {
+  .c1 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:980px) {
-  .c7 {
+  .c4 {
     -webkit-flex-flow: wrap;
     -ms-flex-flow: wrap;
     flex-flow: wrap;
@@ -140,122 +102,108 @@ exports[`<Result /> should render 1`] = `
 }
 
 @media (max-width:980px) {
-  .c8 {
+  .c5 {
     width: calc(100% * 0.8333333333333334);
   }
 }
 
 @media (max-width:980px) {
-  .c16 {
+  .c13 {
     width: calc(100% * 1);
   }
 }
 
 @media (max-width:980px) {
-  .c9 {
+  .c6 {
     width: 100%;
     margin-left: 0;
   }
 }
 
 @media (max-width:600px) {
-  .c9 {
+  .c6 {
     font-size: 1.6rem;
   }
 }
 
 <div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Indemnité de licenciement
-    </h2>
-  </header>
+    Indemnité de licenciement
+  </h2>
   <p>
     À partir des éléments que vous avez saisis, l’indemnité de licenciement est estimée à
      
     <strong
-      class="c4"
+      class="c1"
     >
       1,500.00
        € brut
     </strong>
   </p>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Détails
-    </h2>
-  </header>
+    Détails
+  </h2>
   <p>
     Il s’agit du montant le plus important entre l’indemnité légale et l’indemnité conventionnelle.
   </p>
   <div
-    class="c5"
+    class="c2"
   >
     <div>
       <div
-        class="c6"
+        class="c3"
       >
         Votre indemnite légale
       </div>
       <div
-        class="c7"
+        class="c4"
       >
         <div
-          class="c8"
+          class="c5"
         />
         <span
-          class="c9"
+          class="c6"
         >
           1,250.00
            € brut
         </span>
       </div>
       <details
-        class="c10"
+        class="c7"
       >
         <summary
-          class="c11"
+          class="c8"
         >
           Voir le détail du calcul
         </summary>
         <strong
-          class="c12"
+          class="c9"
         >
           Éléments saisis :
         </strong>
         <ul
-          class="c13"
+          class="c10"
         >
           <li
-            class="c14"
+            class="c11"
           >
             Salaire de réference (Sref)
              : 
             2000
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             Licenciement pour inaptitude
              : 
             non
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             Ancienneté totale (A)
              : 
@@ -263,12 +211,12 @@ exports[`<Result /> should render 1`] = `
           </li>
         </ul>
         <strong
-          class="c12"
+          class="c9"
         >
           Formule :
         </strong>
         <div
-          class="c15"
+          class="c12"
         >
           <div
             id="react-mathjax-preview"
@@ -303,62 +251,62 @@ exports[`<Result /> should render 1`] = `
     </div>
     <div>
       <div
-        class="c6"
+        class="c3"
       >
         Votre indemnite conventionnelle
       </div>
       <div
-        class="c7"
+        class="c4"
       >
         <div
-          class="c16"
+          class="c13"
         />
         <span
-          class="c9"
+          class="c6"
         >
           1,500.00
            € brut
         </span>
       </div>
       <details
-        class="c10"
+        class="c7"
       >
         <summary
-          class="c11"
+          class="c8"
         >
           Voir le détail du calcul
         </summary>
         <strong
-          class="c12"
+          class="c9"
         >
           Éléments saisis :
         </strong>
         <ul
-          class="c13"
+          class="c10"
         >
           <li
-            class="c14"
+            class="c11"
           >
             Salaire de référence (Sref)
              : 
             2000
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             Ancienneté totale
              : 
             2.5
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             Ancienneté (en année entière)
              : 
             2
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             Groupe
              : 
@@ -366,12 +314,12 @@ exports[`<Result /> should render 1`] = `
           </li>
         </ul>
         <strong
-          class="c12"
+          class="c9"
         >
           Formule :
         </strong>
         <div
-          class="c15"
+          class="c12"
         >
           <div
             id="react-mathjax-preview"
diff --git a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/0044/__tests__/__snapshots__/Step.test.js.snap b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/0044/__tests__/__snapshots__/Step.test.js.snap
index 6fc2891d86..74414fa7f2 100644
--- a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/0044/__tests__/__snapshots__/Step.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/0044/__tests__/__snapshots__/Step.test.js.snap
@@ -138,7 +138,8 @@ exports[`<Step /> should ask for ope and licenciement eco 1`] = `
 }
 
 .c0 {
-  margin: 0 auto 1rem;
+  margin-bottom: 1.6rem;
+  margin-left: auto;
   text-align: left;
 }
 
@@ -204,6 +205,13 @@ exports[`<Step /> should ask for ope and licenciement eco 1`] = `
   width: 100%;
 }
 
+@media (max-width:600px) {
+  .c0 {
+    margin-bottom: 1rem;
+    margin-left: auto;
+  }
+}
+
 @media (max-width:600px) {
   .c1 {
     padding-left: 1.6rem;
@@ -716,7 +724,8 @@ exports[`<Step /> should ask for ope and licenciement eco and age 1`] = `
 }
 
 .c0 {
-  margin: 0 auto 1rem;
+  margin-bottom: 1.6rem;
+  margin-left: auto;
   text-align: left;
 }
 
@@ -809,6 +818,13 @@ exports[`<Step /> should ask for ope and licenciement eco and age 1`] = `
   }
 }
 
+@media (max-width:600px) {
+  .c0 {
+    margin-bottom: 1rem;
+    margin-left: auto;
+  }
+}
+
 @media (max-width:600px) {
   .c1 {
     padding-left: 1.6rem;
@@ -1211,7 +1227,8 @@ exports[`<Step /> should render 1`] = `
 }
 
 .c0 {
-  margin: 0 auto 1rem;
+  margin-bottom: 1.6rem;
+  margin-left: auto;
   text-align: left;
 }
 
@@ -1252,6 +1269,13 @@ exports[`<Step /> should render 1`] = `
   width: 100%;
 }
 
+@media (max-width:600px) {
+  .c0 {
+    margin-bottom: 1rem;
+    margin-left: auto;
+  }
+}
+
 @media (max-width:600px) {
   .c1 {
     padding-left: 1.6rem;
diff --git a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/1486/steps/__tests__/__snapshots__/Anciennete.test.js.snap b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/1486/steps/__tests__/__snapshots__/Anciennete.test.js.snap
index 020e7c9671..7f136c098c 100644
--- a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/1486/steps/__tests__/__snapshots__/Anciennete.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/1486/steps/__tests__/__snapshots__/Anciennete.test.js.snap
@@ -17,20 +17,7 @@ exports[`<Anciennete /> renders AncienneteCE component with initialValues CATEGO
 `;
 
 exports[`<Anciennete /> renders AncienneteETAMIC component 1`] = `
-.c3 {
-  position: absolute;
-  background-color: #7994d4;
-  border-radius: 0.6rem;
-  top: 50%;
-  left: 0;
-  width: 0.4rem;
-  height: 100%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
+.c1 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -52,7 +39,7 @@ exports[`<Anciennete /> renders AncienneteETAMIC component 1`] = `
   animation: none;
 }
 
-.c6 {
+.c3 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -64,7 +51,7 @@ exports[`<Anciennete /> renders AncienneteETAMIC component 1`] = `
   text-align: left;
 }
 
-.c10 {
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -73,7 +60,7 @@ exports[`<Anciennete /> renders AncienneteETAMIC component 1`] = `
   cursor: pointer;
 }
 
-.c11 {
+.c8 {
   position: relative;
   display: inline-block;
   -webkit-flex-shrink: 0;
@@ -94,7 +81,7 @@ exports[`<Anciennete /> renders AncienneteETAMIC component 1`] = `
   appearance: none;
 }
 
-.c11:before {
+.c8:before {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -109,33 +96,16 @@ exports[`<Anciennete /> renders AncienneteETAMIC component 1`] = `
   content: "";
 }
 
-.c11:checked {
+.c8:checked {
   background-color: #fff;
   border-color: #f66663;
 }
 
-.c11:checked:before {
+.c8:checked:before {
   display: block;
 }
 
-.c0 {
-  margin: 0 auto 1rem;
-  text-align: left;
-}
-
-.c2 {
-  position: relative;
-  margin: 0;
-  color: #2f3b6c;
-  font-weight: normal;
-  font-size: 2.8rem;
-  font-family: "Merriweather",serif;
-  line-height: 1.25;
-  padding-left: 3.2rem;
-  text-align: left;
-}
-
-.c9 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -154,12 +124,16 @@ exports[`<Anciennete /> renders AncienneteETAMIC component 1`] = `
   margin-bottom: 2rem;
 }
 
-.c1 {
+.c0 {
   margin-top: 3.2rem;
   margin-bottom: 2rem;
+  color: #4d73b8;
+  font-weight: 600;
+  font-size: 1.8rem;
+  font-family: "Open Sans",sans-serif;
 }
 
-.c7 {
+.c4 {
   display: block;
   margin-top: 2rem;
   margin-bottom: 1rem;
@@ -167,47 +141,28 @@ exports[`<Anciennete /> renders AncienneteETAMIC component 1`] = `
   cursor: default;
 }
 
-.c8 {
+.c5 {
   display: inline-block;
   margin-left: 1rem;
   color: #eb5757;
 }
 
-.c5 {
+.c2 {
   margin-top: 2rem;
 }
 
 @media (max-width:600px) {
-  .c2 {
-    padding-left: 1.6rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c2 {
-    font-size: 2.2rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c7 {
+  .c4 {
     font-size: 1.6rem;
   }
 }
 
 <div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Contrats antérieurs
-    </h2>
-  </header>
+    Contrats antérieurs
+  </h2>
   <p>
     Si le salarié a été auparavant employé par la même société et que la fin du / des contrat(s) n’est pas imputable à l’une des raisons suivantes :
   </p>
@@ -228,35 +183,35 @@ exports[`<Anciennete /> renders AncienneteETAMIC component 1`] = `
     .
   </p>
   <div
-    class="c4 c5"
+    class="c1 c2"
   >
     <div
-      class="c6"
+      class="c3"
       role="alert"
     >
       Dans le cas de la démission, l’employeur peut accepter de prendre en compte la durée du contrat de travail correspondant pour l’appréciation de l’ancienneté.
     </div>
   </div>
   <p
-    class="c7"
+    class="c4"
   >
     Avez-vous un/des contrat(s) antérieur(s) à déclarer ?
     <span
       aria-label="champs obligatoire"
-      class="c8"
+      class="c5"
     >
       *
     </span>
   </p>
   <div
-    class="c9"
+    class="c6"
   >
     <label
-      class="c10"
+      class="c7"
       for="hasBrancheContrat-yes"
     >
       <input
-        class="c11"
+        class="c8"
         id="hasBrancheContrat-yes"
         name="hasBrancheContrat"
         type="radio"
@@ -265,11 +220,11 @@ exports[`<Anciennete /> renders AncienneteETAMIC component 1`] = `
       Oui
     </label>
     <label
-      class="c10"
+      class="c7"
       for="hasBrancheContrat-no"
     >
       <input
-        class="c11"
+        class="c8"
         id="hasBrancheContrat-no"
         name="hasBrancheContrat"
         type="radio"
diff --git a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/1486/steps/__tests__/__snapshots__/AncienneteETAMIC.test.js.snap b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/1486/steps/__tests__/__snapshots__/AncienneteETAMIC.test.js.snap
index c8a14200b0..7b2e71feaf 100644
--- a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/1486/steps/__tests__/__snapshots__/AncienneteETAMIC.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/1486/steps/__tests__/__snapshots__/AncienneteETAMIC.test.js.snap
@@ -1,20 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<AncienneteETAMIC /> asks to fill duration, indemnité and consideration 1`] = `
-.c3 {
-  position: absolute;
-  background-color: #7994d4;
-  border-radius: 0.6rem;
-  top: 50%;
-  left: 0;
-  width: 0.4rem;
-  height: 100%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
+.c1 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -36,7 +23,7 @@ exports[`<AncienneteETAMIC /> asks to fill duration, indemnité and consideratio
   animation: none;
 }
 
-.c6 {
+.c3 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -48,12 +35,12 @@ exports[`<AncienneteETAMIC /> asks to fill duration, indemnité and consideratio
   text-align: left;
 }
 
-.c16 {
+.c13 {
   position: relative;
   display: inline-block;
 }
 
-.c17 {
+.c14 {
   width: 100%;
   height: 5.4rem;
   padding: 0 2rem;
@@ -75,15 +62,15 @@ exports[`<AncienneteETAMIC /> asks to fill duration, indemnité and consideratio
   appearance: none;
 }
 
-.c17::-webkit-outer-spin-button,
-.c17::-webkit-inner-spin-button {
+.c14::-webkit-outer-spin-button,
+.c14::-webkit-inner-spin-button {
   margin: 0;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c17::-webkit-calendar-picker-indicator {
+.c14::-webkit-calendar-picker-indicator {
   display: block;
   width: 3.2rem;
   height: 3.2rem;
@@ -96,47 +83,47 @@ exports[`<AncienneteETAMIC /> asks to fill duration, indemnité and consideratio
   mask-image: url("data:image/svg+xml;,%3Csvg%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.947%207.601h1.601c1.472%200%202.521%201.198%202.521%202.669v2.306l-.001%2010.392c0%201.472-1.049%202.669-2.521%202.669H8.669A2.672%202.672%200%20016%2022.967l.001-12.697a2.672%202.672%200%20012.67-2.669h1.331V6h.999v1.601H20V6h.947v1.601zm1.6%2017.036c.883%200%201.454-.786%201.454-1.67v-10.33h-17L7%2022.967c0%20.884.785%201.67%201.668%201.67h13.879zm-15.548-13h17.002l.001-1.367c0-.883-.57-1.601-1.453-1.601h-1.6v1.068H20V8.669h-9v1.068h-1V8.669H8.669C7.786%208.669%207%209.387%207%2010.27v1.367zm9.677%206.277h-2.135a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203h-2.135v2.135h2.136v-2.135zm3.203%203.203h2.135a1.07%201.07%200%20001.068-1.068v-2.135a1.07%201.07%200%2000-1.068-1.068H19.88a1.07%201.07%200%2000-1.068%201.068v2.135a1.07%201.07%200%20001.068%201.068zm0-3.203h2.135l.001%202.135H19.88v-2.135zm-8.54%208.541H9.204a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203H9.204v2.135h2.136l-.001-2.135zm3.202%203.203h2.135a1.07%201.07%200%20001.068-1.068v-2.135a1.07%201.07%200%2000-1.068-1.068h-2.135a1.07%201.07%200%2000-1.068%201.068v2.135a1.07%201.07%200%20001.068%201.068zm0-3.203h2.135l.001%202.135h-2.136v-2.135zm7.473%203.203H19.88a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203H19.88v2.135h2.136v-2.135z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
 }
 
-.c17:invalid {
+.c14:invalid {
   border-color: #eb5757;
 }
 
-.c17::-webkit-input-placeholder {
+.c14::-webkit-input-placeholder {
   color: #9298af;
 }
 
-.c17::-moz-placeholder {
+.c14::-moz-placeholder {
   color: #9298af;
 }
 
-.c17:-ms-input-placeholder {
+.c14:-ms-input-placeholder {
   color: #9298af;
 }
 
-.c17::placeholder {
+.c14::placeholder {
   color: #9298af;
 }
 
-.c17:focus {
+.c14:focus {
   border-color: #7994d4;
 }
 
-.c17:focus::-webkit-input-placeholder {
+.c14:focus::-webkit-input-placeholder {
   color: transparent;
 }
 
-.c17:focus::-moz-placeholder {
+.c14:focus::-moz-placeholder {
   color: transparent;
 }
 
-.c17:focus:-ms-input-placeholder {
+.c14:focus:-ms-input-placeholder {
   color: transparent;
 }
 
-.c17:focus::placeholder {
+.c14:focus::placeholder {
   color: transparent;
 }
 
-.c18 {
+.c15 {
   position: absolute;
   top: 1rem;
   right: 1rem;
@@ -147,7 +134,7 @@ exports[`<AncienneteETAMIC /> asks to fill duration, indemnité and consideratio
   color: #9298af;
 }
 
-.c10 {
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -156,7 +143,7 @@ exports[`<AncienneteETAMIC /> asks to fill duration, indemnité and consideratio
   cursor: pointer;
 }
 
-.c11 {
+.c8 {
   position: relative;
   display: inline-block;
   -webkit-flex-shrink: 0;
@@ -177,7 +164,7 @@ exports[`<AncienneteETAMIC /> asks to fill duration, indemnité and consideratio
   appearance: none;
 }
 
-.c11:before {
+.c8:before {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -192,47 +179,30 @@ exports[`<AncienneteETAMIC /> asks to fill duration, indemnité and consideratio
   content: "";
 }
 
-.c11:checked {
+.c8:checked {
   background-color: #fff;
   border-color: #f66663;
 }
 
-.c11:checked:before {
+.c8:checked:before {
   display: block;
 }
 
-.c0 {
-  margin: 0 auto 1rem;
-  text-align: left;
-}
-
-.c2 {
-  position: relative;
-  margin: 0;
-  color: #2f3b6c;
-  font-weight: normal;
-  font-size: 2.8rem;
-  font-family: "Merriweather",serif;
-  line-height: 1.25;
-  padding-left: 3.2rem;
-  text-align: left;
-}
-
-.c13 {
+.c10 {
   width: 10em;
   text-align: right;
   border-color: #bbcadf;
 }
 
-.c13::-webkit-outer-spin-button,
-.c13::-webkit-inner-spin-button {
+.c10::-webkit-outer-spin-button,
+.c10::-webkit-inner-spin-button {
   margin: 0;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c12 {
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -245,7 +215,7 @@ exports[`<AncienneteETAMIC /> asks to fill duration, indemnité and consideratio
   padding: 0;
 }
 
-.c9 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -264,12 +234,16 @@ exports[`<AncienneteETAMIC /> asks to fill duration, indemnité and consideratio
   margin-bottom: 2rem;
 }
 
-.c1 {
+.c0 {
   margin-top: 3.2rem;
   margin-bottom: 2rem;
+  color: #4d73b8;
+  font-weight: 600;
+  font-size: 1.8rem;
+  font-family: "Open Sans",sans-serif;
 }
 
-.c7 {
+.c4 {
   display: block;
   margin-top: 2rem;
   margin-bottom: 1rem;
@@ -277,7 +251,7 @@ exports[`<AncienneteETAMIC /> asks to fill duration, indemnité and consideratio
   cursor: default;
 }
 
-.c14 {
+.c11 {
   display: block;
   margin-top: 2rem;
   margin-bottom: 1rem;
@@ -285,13 +259,13 @@ exports[`<AncienneteETAMIC /> asks to fill duration, indemnité and consideratio
   cursor: pointer;
 }
 
-.c8 {
+.c5 {
   display: inline-block;
   margin-left: 1rem;
   color: #eb5757;
 }
 
-.c15 {
+.c12 {
   -webkit-flex: 1 1 auto;
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
@@ -299,54 +273,35 @@ exports[`<AncienneteETAMIC /> asks to fill duration, indemnité and consideratio
   max-width: 40rem;
 }
 
-.c5 {
+.c2 {
   margin-top: 2rem;
 }
 
 @media (max-width:600px) {
-  .c17 {
+  .c14 {
     padding: 0 1rem;
     padding-right: 5rem;
   }
 }
 
 @media (max-width:600px) {
-  .c2 {
-    padding-left: 1.6rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c2 {
-    font-size: 2.2rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c7 {
+  .c4 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c14 {
+  .c11 {
     font-size: 1.6rem;
   }
 }
 
 <div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Contrats antérieurs
-    </h2>
-  </header>
+    Contrats antérieurs
+  </h2>
   <p>
     Si le salarié a été auparavant employé par la même société et que la fin du / des contrat(s) n’est pas imputable à l’une des raisons suivantes :
   </p>
@@ -367,36 +322,36 @@ exports[`<AncienneteETAMIC /> asks to fill duration, indemnité and consideratio
     .
   </p>
   <div
-    class="c4 c5"
+    class="c1 c2"
   >
     <div
-      class="c6"
+      class="c3"
       role="alert"
     >
       Dans le cas de la démission, l’employeur peut accepter de prendre en compte la durée du contrat de travail correspondant pour l’appréciation de l’ancienneté.
     </div>
   </div>
   <p
-    class="c7"
+    class="c4"
   >
     Avez-vous un/des contrat(s) antérieur(s) à déclarer ?
     <span
       aria-label="champs obligatoire"
-      class="c8"
+      class="c5"
     >
       *
     </span>
   </p>
   <div
-    class="c9"
+    class="c6"
   >
     <label
-      class="c10"
+      class="c7"
       for="hasBrancheContrat-yes"
     >
       <input
         checked=""
-        class="c11"
+        class="c8"
         id="hasBrancheContrat-yes"
         name="hasBrancheContrat"
         type="radio"
@@ -405,11 +360,11 @@ exports[`<AncienneteETAMIC /> asks to fill duration, indemnité and consideratio
       Oui
     </label>
     <label
-      class="c10"
+      class="c7"
       for="hasBrancheContrat-no"
     >
       <input
-        class="c11"
+        class="c8"
         id="hasBrancheContrat-no"
         name="hasBrancheContrat"
         type="radio"
@@ -419,49 +374,49 @@ exports[`<AncienneteETAMIC /> asks to fill duration, indemnité and consideratio
     </label>
   </div>
   <label
-    class="c12"
+    class="c9"
     for="duration"
   >
     Durée des contrats de travail précédents (en mois)
   </label>
   <input
-    class="c13"
+    class="c10"
     id="duration"
     name="brancheContrat.duration"
     type="number"
     value="3"
   />
   <div
-    class="c4 c5"
+    class="c1 c2"
   >
     <div
-      class="c6"
+      class="c3"
       role="alert"
     >
       Il est important de préciser l’indemnité de licenciement éventuellement perçue lors d’un précédent licenciement dans la même entreprise. L’employeur actuel peut la déduire de l’indemnité de licenciement en train d’être calculée.
     </div>
   </div>
   <label
-    class="c14"
+    class="c11"
     for="currency-1"
   >
     Indemnité de licenciement précédemment perçue
   </label>
   <div
-    class="c15"
+    class="c12"
   >
     <span
-      class="c16"
+      class="c13"
     >
       <input
-        class="c17"
+        class="c14"
         id="currency-1"
         name="brancheContrat.indemnite"
         type="number"
         value="0"
       />
       <div
-        class="c18"
+        class="c15"
       >
         <svg
           fill="none"
@@ -476,19 +431,19 @@ exports[`<AncienneteETAMIC /> asks to fill duration, indemnité and consideratio
     </span>
   </div>
   <p
-    class="c7"
+    class="c4"
   >
     Souhaitez vous déduire cette indemnité ?
   </p>
   <div
-    class="c9"
+    class="c6"
   >
     <label
-      class="c10"
+      class="c7"
       for="brancheContrat.considered-yes"
     >
       <input
-        class="c11"
+        class="c8"
         id="brancheContrat.considered-yes"
         name="brancheContrat.considered"
         type="radio"
@@ -497,12 +452,12 @@ exports[`<AncienneteETAMIC /> asks to fill duration, indemnité and consideratio
       Oui
     </label>
     <label
-      class="c10"
+      class="c7"
       for="brancheContrat.considered-no"
     >
       <input
         checked=""
-        class="c11"
+        class="c8"
         id="brancheContrat.considered-no"
         name="brancheContrat.considered"
         type="radio"
@@ -515,20 +470,7 @@ exports[`<AncienneteETAMIC /> asks to fill duration, indemnité and consideratio
 `;
 
 exports[`<AncienneteETAMIC /> renders 1`] = `
-.c3 {
-  position: absolute;
-  background-color: #7994d4;
-  border-radius: 0.6rem;
-  top: 50%;
-  left: 0;
-  width: 0.4rem;
-  height: 100%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
+.c1 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -550,7 +492,7 @@ exports[`<AncienneteETAMIC /> renders 1`] = `
   animation: none;
 }
 
-.c6 {
+.c3 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -562,7 +504,7 @@ exports[`<AncienneteETAMIC /> renders 1`] = `
   text-align: left;
 }
 
-.c10 {
+.c7 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -571,7 +513,7 @@ exports[`<AncienneteETAMIC /> renders 1`] = `
   cursor: pointer;
 }
 
-.c11 {
+.c8 {
   position: relative;
   display: inline-block;
   -webkit-flex-shrink: 0;
@@ -592,7 +534,7 @@ exports[`<AncienneteETAMIC /> renders 1`] = `
   appearance: none;
 }
 
-.c11:before {
+.c8:before {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -607,33 +549,16 @@ exports[`<AncienneteETAMIC /> renders 1`] = `
   content: "";
 }
 
-.c11:checked {
+.c8:checked {
   background-color: #fff;
   border-color: #f66663;
 }
 
-.c11:checked:before {
+.c8:checked:before {
   display: block;
 }
 
-.c0 {
-  margin: 0 auto 1rem;
-  text-align: left;
-}
-
-.c2 {
-  position: relative;
-  margin: 0;
-  color: #2f3b6c;
-  font-weight: normal;
-  font-size: 2.8rem;
-  font-family: "Merriweather",serif;
-  line-height: 1.25;
-  padding-left: 3.2rem;
-  text-align: left;
-}
-
-.c9 {
+.c6 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -652,12 +577,16 @@ exports[`<AncienneteETAMIC /> renders 1`] = `
   margin-bottom: 2rem;
 }
 
-.c1 {
+.c0 {
   margin-top: 3.2rem;
   margin-bottom: 2rem;
+  color: #4d73b8;
+  font-weight: 600;
+  font-size: 1.8rem;
+  font-family: "Open Sans",sans-serif;
 }
 
-.c7 {
+.c4 {
   display: block;
   margin-top: 2rem;
   margin-bottom: 1rem;
@@ -665,47 +594,28 @@ exports[`<AncienneteETAMIC /> renders 1`] = `
   cursor: default;
 }
 
-.c8 {
+.c5 {
   display: inline-block;
   margin-left: 1rem;
   color: #eb5757;
 }
 
-.c5 {
+.c2 {
   margin-top: 2rem;
 }
 
 @media (max-width:600px) {
-  .c2 {
-    padding-left: 1.6rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c2 {
-    font-size: 2.2rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c7 {
+  .c4 {
     font-size: 1.6rem;
   }
 }
 
 <div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Contrats antérieurs
-    </h2>
-  </header>
+    Contrats antérieurs
+  </h2>
   <p>
     Si le salarié a été auparavant employé par la même société et que la fin du / des contrat(s) n’est pas imputable à l’une des raisons suivantes :
   </p>
@@ -726,35 +636,35 @@ exports[`<AncienneteETAMIC /> renders 1`] = `
     .
   </p>
   <div
-    class="c4 c5"
+    class="c1 c2"
   >
     <div
-      class="c6"
+      class="c3"
       role="alert"
     >
       Dans le cas de la démission, l’employeur peut accepter de prendre en compte la durée du contrat de travail correspondant pour l’appréciation de l’ancienneté.
     </div>
   </div>
   <p
-    class="c7"
+    class="c4"
   >
     Avez-vous un/des contrat(s) antérieur(s) à déclarer ?
     <span
       aria-label="champs obligatoire"
-      class="c8"
+      class="c5"
     >
       *
     </span>
   </p>
   <div
-    class="c9"
+    class="c6"
   >
     <label
-      class="c10"
+      class="c7"
       for="hasBrancheContrat-yes"
     >
       <input
-        class="c11"
+        class="c8"
         id="hasBrancheContrat-yes"
         name="hasBrancheContrat"
         type="radio"
@@ -763,11 +673,11 @@ exports[`<AncienneteETAMIC /> renders 1`] = `
       Oui
     </label>
     <label
-      class="c10"
+      class="c7"
       for="hasBrancheContrat-no"
     >
       <input
-        class="c11"
+        class="c8"
         id="hasBrancheContrat-no"
         name="hasBrancheContrat"
         type="radio"
diff --git a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/1486/steps/__tests__/__snapshots__/Categorie.test.js.snap b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/1486/steps/__tests__/__snapshots__/Categorie.test.js.snap
index 2151781f2a..4a6aab0e2b 100644
--- a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/1486/steps/__tests__/__snapshots__/Categorie.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/1486/steps/__tests__/__snapshots__/Categorie.test.js.snap
@@ -1,20 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Categorie /> renders 1`] = `
-.c3 {
-  position: absolute;
-  background-color: #7994d4;
-  border-radius: 0.6rem;
-  top: 50%;
-  left: 0;
-  width: 0.4rem;
-  height: 100%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c5 {
+.c2 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -34,7 +21,7 @@ exports[`<Categorie /> renders 1`] = `
   text-align: center;
 }
 
-.c7 {
+.c4 {
   position: absolute;
   top: 1.6rem;
   right: 1.6rem;
@@ -44,7 +31,7 @@ exports[`<Categorie /> renders 1`] = `
   pointer-events: none;
 }
 
-.c6 {
+.c3 {
   width: 100%;
   height: 5.4rem;
   padding: 0 2rem 0;
@@ -65,42 +52,25 @@ exports[`<Categorie /> renders 1`] = `
   appearance: none;
 }
 
-.c6::-ms-expand {
+.c3::-ms-expand {
   background-color: transparent;
   border: 0 transparent;
 }
 
-.c6 *::-ms-backdrop,
-.c6 {
+.c3 *::-ms-backdrop,
+.c3 {
   padding-right: 1.6rem;
 }
 
-.c6:invalid {
+.c3:invalid {
   border-color: #eb5757;
 }
 
-.c6:disabled {
+.c3:disabled {
   background-color: #e4e8ef;
 }
 
-.c0 {
-  margin: 0 auto 1rem;
-  text-align: left;
-}
-
-.c2 {
-  position: relative;
-  margin: 0;
-  color: #2f3b6c;
-  font-weight: normal;
-  font-size: 2.8rem;
-  font-family: "Merriweather",serif;
-  line-height: 1.25;
-  padding-left: 3.2rem;
-  text-align: left;
-}
-
-.c4 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -113,52 +83,37 @@ exports[`<Categorie /> renders 1`] = `
   padding: 0;
 }
 
-.c1 {
+.c0 {
   margin-top: 3.2rem;
   margin-bottom: 2rem;
-}
-
-@media (max-width:600px) {
-  .c2 {
-    padding-left: 1.6rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c2 {
-    font-size: 2.2rem;
-  }
+  color: #4d73b8;
+  font-weight: 600;
+  font-size: 1.8rem;
+  font-family: "Open Sans",sans-serif;
 }
 
 <div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Catégorie professionnelle
-    </h2>
-  </header>
+    Catégorie professionnelle
+  </h2>
   <p>
     Quelle est la catégorie du salarié ?
     <br />
     Cette information se trouve sur le bulletin de salaire.
   </p>
   <label
-    class="c4"
+    class="c1"
     for="categorie"
   >
     Sélectionnez une catégorie professionnelle
   </label>
   <div
-    class="c5"
+    class="c2"
   >
     <select
-      class="c6"
+      class="c3"
       id="categorie"
       name="brancheCategorie"
     >
@@ -191,7 +146,7 @@ exports[`<Categorie /> renders 1`] = `
     </select>
     <div
       aria-hidden="true"
-      class="c7"
+      class="c4"
     >
       <svg
         fill="none"
diff --git a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/1486/steps/__tests__/__snapshots__/Result.test.js.snap b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/1486/steps/__tests__/__snapshots__/Result.test.js.snap
index ff69fd888d..bd25adf263 100644
--- a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/1486/steps/__tests__/__snapshots__/Result.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/1486/steps/__tests__/__snapshots__/Result.test.js.snap
@@ -1,20 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Result /> renders conventionnal indemnite with warning toast 1`] = `
-.c3 {
-  position: absolute;
-  background-color: #7994d4;
-  border-radius: 0.6rem;
-  top: 50%;
-  left: 0;
-  width: 0.4rem;
-  height: 100%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c17 {
+.c14 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -36,7 +23,7 @@ exports[`<Result /> renders conventionnal indemnite with warning toast 1`] = `
   animation: none;
 }
 
-.c19 {
+.c16 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -49,39 +36,26 @@ exports[`<Result /> renders conventionnal indemnite with warning toast 1`] = `
 }
 
 .c0 {
-  margin: 0 auto 1rem;
-  text-align: left;
-}
-
-.c2 {
-  position: relative;
-  margin: 0;
-  color: #2f3b6c;
-  font-weight: normal;
-  font-size: 2.8rem;
-  font-family: "Merriweather",serif;
-  line-height: 1.25;
-  padding-left: 3.2rem;
-  text-align: left;
-}
-
-.c1 {
   margin-top: 3.2rem;
   margin-bottom: 2rem;
+  color: #4d73b8;
+  font-weight: 600;
+  font-size: 1.8rem;
+  font-family: "Open Sans",sans-serif;
 }
 
-.c4 {
+.c1 {
   color: #3e486e;
   font-weight: 700;
   font-size: 1.8rem;
   white-space: nowrap;
 }
 
-.c11 {
+.c8 {
   margin-bottom: 1.6rem;
 }
 
-.c7 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -92,46 +66,46 @@ exports[`<Result /> renders conventionnal indemnite with warning toast 1`] = `
   align-items: stretch;
 }
 
-.c16 {
+.c13 {
   width: calc(50% * 1);
   background-color: #7994d4;
   border-radius: 0.6rem;
 }
 
-.c8 {
+.c5 {
   width: calc(50% * 0.9100320789890648);
   background-color: #7994d4;
   border-radius: 0.6rem;
 }
 
-.c9 {
+.c6 {
   margin-left: 1.6rem;
   color: #4d73b8;
   font-size: 1.8rem;
 }
 
-.c10 {
+.c7 {
   margin-top: 2rem;
 }
 
-.c12 {
+.c9 {
   font-weight: bold;
   font-size: 1.4rem;
 }
 
-.c13 {
+.c10 {
   list-style-type: disc;
 }
 
-.c14 {
+.c11 {
   font-size: 1.4rem;
 }
 
-.c15 {
+.c12 {
   margin: 1.6rem 0;
 }
 
-.c5 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -141,36 +115,24 @@ exports[`<Result /> renders conventionnal indemnite with warning toast 1`] = `
   flex-direction: column;
 }
 
-.c6 {
+.c3 {
   margin: 0.4rem;
   font-weight: 700;
   font-size: 1.6rem;
 }
 
-.c18 {
+.c15 {
   margin: 2rem 0;
 }
 
 @media (max-width:600px) {
-  .c2 {
-    padding-left: 1.6rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c2 {
-    font-size: 2.2rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c4 {
+  .c1 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:980px) {
-  .c7 {
+  .c4 {
     -webkit-flex-flow: wrap;
     -ms-flex-flow: wrap;
     flex-flow: wrap;
@@ -178,129 +140,115 @@ exports[`<Result /> renders conventionnal indemnite with warning toast 1`] = `
 }
 
 @media (max-width:980px) {
-  .c16 {
+  .c13 {
     width: calc(100% * 1);
   }
 }
 
 @media (max-width:980px) {
-  .c8 {
+  .c5 {
     width: calc(100% * 0.9100320789890648);
   }
 }
 
 @media (max-width:980px) {
-  .c9 {
+  .c6 {
     width: 100%;
     margin-left: 0;
   }
 }
 
 @media (max-width:600px) {
-  .c9 {
+  .c6 {
     font-size: 1.6rem;
   }
 }
 
 <div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Indemnité de licenciement
-    </h2>
-  </header>
+    Indemnité de licenciement
+  </h2>
   <p>
     À partir des éléments que vous avez saisis, l’indemnité de licenciement est estimée à
      
     <strong
-      class="c4"
+      class="c1"
     >
       17,444.44
        € brut
     </strong>
   </p>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Détails
-    </h2>
-  </header>
+    Détails
+  </h2>
   <p>
     Il s’agit du montant le plus important entre l’indemnité légale et l’indemnité conventionnelle.
   </p>
   <div
-    class="c5"
+    class="c2"
   >
     <div>
       <div
-        class="c6"
+        class="c3"
       >
         Votre indemnite légale
       </div>
       <div
-        class="c7"
+        class="c4"
       >
         <div
-          class="c8"
+          class="c5"
         />
         <span
-          class="c9"
+          class="c6"
         >
           15,875.00
            € brut
         </span>
       </div>
       <details
-        class="c10"
+        class="c7"
       >
         <summary
-          class="c11"
+          class="c8"
         >
           Voir le détail du calcul
         </summary>
         <strong
-          class="c12"
+          class="c9"
         >
           Éléments saisis :
         </strong>
         <ul
-          class="c13"
+          class="c10"
         >
           <li
-            class="c14"
+            class="c11"
           >
             Salaire de réference (Sref)
              : 
             4500
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             Licenciement pour inaptitude
              : 
             non
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             Ancienneté totale (A)
              : 
             13.08
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             Ancienneté au delà de 10ans (A2)
              : 
@@ -308,12 +256,12 @@ exports[`<Result /> renders conventionnal indemnite with warning toast 1`] = `
           </li>
         </ul>
         <strong
-          class="c12"
+          class="c9"
         >
           Formule :
         </strong>
         <div
-          class="c15"
+          class="c12"
         >
           <div
             id="react-mathjax-preview"
@@ -348,55 +296,55 @@ exports[`<Result /> renders conventionnal indemnite with warning toast 1`] = `
     </div>
     <div>
       <div
-        class="c6"
+        class="c3"
       >
         Votre indemnite conventionnelle
       </div>
       <div
-        class="c7"
+        class="c4"
       >
         <div
-          class="c16"
+          class="c13"
         />
         <span
-          class="c9"
+          class="c6"
         >
           17,444.44
            € brut
         </span>
       </div>
       <details
-        class="c10"
+        class="c7"
       >
         <summary
-          class="c11"
+          class="c8"
         >
           Voir le détail du calcul
         </summary>
         <strong
-          class="c12"
+          class="c9"
         >
           Éléments saisis :
         </strong>
         <ul
-          class="c13"
+          class="c10"
         >
           <li
-            class="c14"
+            class="c11"
           >
             Salaire de référence (Sref)
              : 
             4000
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             Coefficient d'indemnité conventionnel (C)
              : 
             0.33
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             Ancienneté conventionnelle (A)
              : 
@@ -404,12 +352,12 @@ exports[`<Result /> renders conventionnal indemnite with warning toast 1`] = `
           </li>
         </ul>
         <strong
-          class="c12"
+          class="c9"
         >
           Formule :
         </strong>
         <div
-          class="c15"
+          class="c12"
         >
           <div
             id="react-mathjax-preview"
@@ -425,10 +373,10 @@ exports[`<Result /> renders conventionnal indemnite with warning toast 1`] = `
     </div>
   </div>
   <div
-    class="c17 c18"
+    class="c14 c15"
   >
     <div
-      class="c19"
+      class="c16"
       role="alert"
     >
       Si un emploi équivalent a été trouvé
@@ -449,7 +397,7 @@ exports[`<Result /> renders conventionnal indemnite with warning toast 1`] = `
       Alors l’indemnité de licenciement conventionnelle est réduite d’un tiers et passe donc à
        
       <strong
-        class="c4"
+        class="c1"
       >
         11629.62
          €
@@ -467,53 +415,27 @@ exports[`<Result /> renders conventionnal indemnite with warning toast 1`] = `
 `;
 
 exports[`<Result /> renders legal indemnite 1`] = `
-.c3 {
-  position: absolute;
-  background-color: #7994d4;
-  border-radius: 0.6rem;
-  top: 50%;
-  left: 0;
-  width: 0.4rem;
-  height: 100%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
 .c0 {
-  margin: 0 auto 1rem;
-  text-align: left;
-}
-
-.c2 {
-  position: relative;
-  margin: 0;
-  color: #2f3b6c;
-  font-weight: normal;
-  font-size: 2.8rem;
-  font-family: "Merriweather",serif;
-  line-height: 1.25;
-  padding-left: 3.2rem;
-  text-align: left;
-}
-
-.c1 {
   margin-top: 3.2rem;
   margin-bottom: 2rem;
+  color: #4d73b8;
+  font-weight: 600;
+  font-size: 1.8rem;
+  font-family: "Open Sans",sans-serif;
 }
 
-.c4 {
+.c1 {
   color: #3e486e;
   font-weight: 700;
   font-size: 1.8rem;
   white-space: nowrap;
 }
 
-.c11 {
+.c8 {
   margin-bottom: 1.6rem;
 }
 
-.c7 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -524,46 +446,46 @@ exports[`<Result /> renders legal indemnite 1`] = `
   align-items: stretch;
 }
 
-.c8 {
+.c5 {
   width: calc(50% * 1);
   background-color: #7994d4;
   border-radius: 0.6rem;
 }
 
-.c16 {
+.c13 {
   width: calc(50% * 0.5494311811023621);
   background-color: #7994d4;
   border-radius: 0.6rem;
 }
 
-.c9 {
+.c6 {
   margin-left: 1.6rem;
   color: #4d73b8;
   font-size: 1.8rem;
 }
 
-.c10 {
+.c7 {
   margin-top: 2rem;
 }
 
-.c12 {
+.c9 {
   font-weight: bold;
   font-size: 1.4rem;
 }
 
-.c13 {
+.c10 {
   list-style-type: disc;
 }
 
-.c14 {
+.c11 {
   font-size: 1.4rem;
 }
 
-.c15 {
+.c12 {
   margin: 1.6rem 0;
 }
 
-.c5 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -573,32 +495,20 @@ exports[`<Result /> renders legal indemnite 1`] = `
   flex-direction: column;
 }
 
-.c6 {
+.c3 {
   margin: 0.4rem;
   font-weight: 700;
   font-size: 1.6rem;
 }
 
 @media (max-width:600px) {
-  .c2 {
-    padding-left: 1.6rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c2 {
-    font-size: 2.2rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c4 {
+  .c1 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:980px) {
-  .c7 {
+  .c4 {
     -webkit-flex-flow: wrap;
     -ms-flex-flow: wrap;
     flex-flow: wrap;
@@ -606,129 +516,115 @@ exports[`<Result /> renders legal indemnite 1`] = `
 }
 
 @media (max-width:980px) {
-  .c8 {
+  .c5 {
     width: calc(100% * 1);
   }
 }
 
 @media (max-width:980px) {
-  .c16 {
+  .c13 {
     width: calc(100% * 0.5494311811023621);
   }
 }
 
 @media (max-width:980px) {
-  .c9 {
+  .c6 {
     width: 100%;
     margin-left: 0;
   }
 }
 
 @media (max-width:600px) {
-  .c9 {
+  .c6 {
     font-size: 1.6rem;
   }
 }
 
 <div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Indemnité de licenciement
-    </h2>
-  </header>
+    Indemnité de licenciement
+  </h2>
   <p>
     À partir des éléments que vous avez saisis, l’indemnité de licenciement est estimée à
      
     <strong
-      class="c4"
+      class="c1"
     >
       15,875.00
        € brut
     </strong>
   </p>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Détails
-    </h2>
-  </header>
+    Détails
+  </h2>
   <p>
     Il s’agit du montant le plus important entre l’indemnité légale et l’indemnité conventionnelle.
   </p>
   <div
-    class="c5"
+    class="c2"
   >
     <div>
       <div
-        class="c6"
+        class="c3"
       >
         Votre indemnite légale
       </div>
       <div
-        class="c7"
+        class="c4"
       >
         <div
-          class="c8"
+          class="c5"
         />
         <span
-          class="c9"
+          class="c6"
         >
           15,875.00
            € brut
         </span>
       </div>
       <details
-        class="c10"
+        class="c7"
       >
         <summary
-          class="c11"
+          class="c8"
         >
           Voir le détail du calcul
         </summary>
         <strong
-          class="c12"
+          class="c9"
         >
           Éléments saisis :
         </strong>
         <ul
-          class="c13"
+          class="c10"
         >
           <li
-            class="c14"
+            class="c11"
           >
             Salaire de réference (Sref)
              : 
             4500
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             Licenciement pour inaptitude
              : 
             non
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             Ancienneté totale (A)
              : 
             13.08
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             Ancienneté au delà de 10ans (A2)
              : 
@@ -736,12 +632,12 @@ exports[`<Result /> renders legal indemnite 1`] = `
           </li>
         </ul>
         <strong
-          class="c12"
+          class="c9"
         >
           Formule :
         </strong>
         <div
-          class="c15"
+          class="c12"
         >
           <div
             id="react-mathjax-preview"
@@ -776,55 +672,55 @@ exports[`<Result /> renders legal indemnite 1`] = `
     </div>
     <div>
       <div
-        class="c6"
+        class="c3"
       >
         Votre indemnite conventionnelle
       </div>
       <div
-        class="c7"
+        class="c4"
       >
         <div
-          class="c16"
+          class="c13"
         />
         <span
-          class="c9"
+          class="c6"
         >
           8,722.22
            € brut
         </span>
       </div>
       <details
-        class="c10"
+        class="c7"
       >
         <summary
-          class="c11"
+          class="c8"
         >
           Voir le détail du calcul
         </summary>
         <strong
-          class="c12"
+          class="c9"
         >
           Éléments saisis :
         </strong>
         <ul
-          class="c13"
+          class="c10"
         >
           <li
-            class="c14"
+            class="c11"
           >
             Salaire de référence (Sref)
              : 
             2000
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             Coefficient d'indemnité conventionnel (C)
              : 
             0.33
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             Ancienneté conventionnelle (A)
              : 
@@ -832,12 +728,12 @@ exports[`<Result /> renders legal indemnite 1`] = `
           </li>
         </ul>
         <strong
-          class="c12"
+          class="c9"
         >
           Formule :
         </strong>
         <div
-          class="c15"
+          class="c12"
         >
           <div
             id="react-mathjax-preview"
diff --git a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/2120/__tests__/__snapshots__/Result.test.js.snap b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/2120/__tests__/__snapshots__/Result.test.js.snap
index 82a55e732f..6318d2977b 100644
--- a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/2120/__tests__/__snapshots__/Result.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/2120/__tests__/__snapshots__/Result.test.js.snap
@@ -1,53 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Result /> should render 1`] = `
-.c3 {
-  position: absolute;
-  background-color: #7994d4;
-  border-radius: 0.6rem;
-  top: 50%;
-  left: 0;
-  width: 0.4rem;
-  height: 100%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
 .c0 {
-  margin: 0 auto 1rem;
-  text-align: left;
-}
-
-.c2 {
-  position: relative;
-  margin: 0;
-  color: #2f3b6c;
-  font-weight: normal;
-  font-size: 2.8rem;
-  font-family: "Merriweather",serif;
-  line-height: 1.25;
-  padding-left: 3.2rem;
-  text-align: left;
-}
-
-.c1 {
   margin-top: 3.2rem;
   margin-bottom: 2rem;
+  color: #4d73b8;
+  font-weight: 600;
+  font-size: 1.8rem;
+  font-family: "Open Sans",sans-serif;
 }
 
-.c4 {
+.c1 {
   color: #3e486e;
   font-weight: 700;
   font-size: 1.8rem;
   white-space: nowrap;
 }
 
-.c11 {
+.c8 {
   margin-bottom: 1.6rem;
 }
 
-.c7 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -58,46 +32,46 @@ exports[`<Result /> should render 1`] = `
   align-items: stretch;
 }
 
-.c8 {
+.c5 {
   width: calc(50% * 0.5583239213914615);
   background-color: #7994d4;
   border-radius: 0.6rem;
 }
 
-.c16 {
+.c13 {
   width: calc(50% * 1);
   background-color: #7994d4;
   border-radius: 0.6rem;
 }
 
-.c9 {
+.c6 {
   margin-left: 1.6rem;
   color: #4d73b8;
   font-size: 1.8rem;
 }
 
-.c10 {
+.c7 {
   margin-top: 2rem;
 }
 
-.c12 {
+.c9 {
   font-weight: bold;
   font-size: 1.4rem;
 }
 
-.c13 {
+.c10 {
   list-style-type: disc;
 }
 
-.c14 {
+.c11 {
   font-size: 1.4rem;
 }
 
-.c15 {
+.c12 {
   margin: 1.6rem 0;
 }
 
-.c5 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -107,32 +81,20 @@ exports[`<Result /> should render 1`] = `
   flex-direction: column;
 }
 
-.c6 {
+.c3 {
   margin: 0.4rem;
   font-weight: 700;
   font-size: 1.6rem;
 }
 
 @media (max-width:600px) {
-  .c2 {
-    padding-left: 1.6rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c2 {
-    font-size: 2.2rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c4 {
+  .c1 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:980px) {
-  .c7 {
+  .c4 {
     -webkit-flex-flow: wrap;
     -ms-flex-flow: wrap;
     flex-flow: wrap;
@@ -140,129 +102,115 @@ exports[`<Result /> should render 1`] = `
 }
 
 @media (max-width:980px) {
-  .c8 {
+  .c5 {
     width: calc(100% * 0.5583239213914615);
   }
 }
 
 @media (max-width:980px) {
-  .c16 {
+  .c13 {
     width: calc(100% * 1);
   }
 }
 
 @media (max-width:980px) {
-  .c9 {
+  .c6 {
     width: 100%;
     margin-left: 0;
   }
 }
 
 @media (max-width:600px) {
-  .c9 {
+  .c6 {
     font-size: 1.6rem;
   }
 }
 
 <div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Indemnité de licenciement
-    </h2>
-  </header>
+    Indemnité de licenciement
+  </h2>
   <p>
     À partir des éléments que vous avez saisis, l’indemnité de licenciement est estimée à
      
     <strong
-      class="c4"
+      class="c1"
     >
       21,692.30
        € brut
     </strong>
   </p>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Détails
-    </h2>
-  </header>
+    Détails
+  </h2>
   <p>
     Il s’agit du montant le plus important entre l’indemnité légale et l’indemnité conventionnelle.
   </p>
   <div
-    class="c5"
+    class="c2"
   >
     <div>
       <div
-        class="c6"
+        class="c3"
       >
         Votre indemnite légale
       </div>
       <div
-        class="c7"
+        class="c4"
       >
         <div
-          class="c8"
+          class="c5"
         />
         <span
-          class="c9"
+          class="c6"
         >
           12,111.33
            € brut
         </span>
       </div>
       <details
-        class="c10"
+        class="c7"
       >
         <summary
-          class="c11"
+          class="c8"
         >
           Voir le détail du calcul
         </summary>
         <strong
-          class="c12"
+          class="c9"
         >
           Éléments saisis :
         </strong>
         <ul
-          class="c13"
+          class="c10"
         >
           <li
-            class="c14"
+            class="c11"
           >
             Salaire de réference (Sref)
              : 
             2000
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             Licenciement pour inaptitude
              : 
             non
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             Ancienneté totale (A)
              : 
             20.66
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             Ancienneté au delà de 10ans (A2)
              : 
@@ -270,12 +218,12 @@ exports[`<Result /> should render 1`] = `
           </li>
         </ul>
         <strong
-          class="c12"
+          class="c9"
         >
           Formule :
         </strong>
         <div
-          class="c15"
+          class="c12"
         >
           <div
             id="react-mathjax-preview"
@@ -310,69 +258,69 @@ exports[`<Result /> should render 1`] = `
     </div>
     <div>
       <div
-        class="c6"
+        class="c3"
       >
         Votre indemnite conventionnelle
       </div>
       <div
-        class="c7"
+        class="c4"
       >
         <div
-          class="c16"
+          class="c13"
         />
         <span
-          class="c9"
+          class="c6"
         >
           21,692.30
            € brut
         </span>
       </div>
       <details
-        class="c10"
+        class="c7"
       >
         <summary
-          class="c11"
+          class="c8"
         >
           Voir le détail du calcul
         </summary>
         <strong
-          class="c12"
+          class="c9"
         >
           Éléments saisis :
         </strong>
         <ul
-          class="c13"
+          class="c10"
         >
           <li
-            class="c14"
+            class="c11"
           >
             Salaire de référence (Sref)
              : 
             1846.15
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             Motif du licenciement
              : 
             Motif économique
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             Catégorie
              : 
             Cadre
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             Nombre de semestres avant 2002 (S1)
              : 
             6
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             Nombre de semestres après 2002 (S2)
              : 
@@ -380,12 +328,12 @@ exports[`<Result /> should render 1`] = `
           </li>
         </ul>
         <strong
-          class="c12"
+          class="c9"
         >
           Formule :
         </strong>
         <div
-          class="c15"
+          class="c12"
         >
           <div
             id="react-mathjax-preview"
diff --git a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/2120/__tests__/__snapshots__/Step.test.js.snap b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/2120/__tests__/__snapshots__/Step.test.js.snap
index 2ad55c9186..f2c2019864 100644
--- a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/2120/__tests__/__snapshots__/Step.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/2120/__tests__/__snapshots__/Step.test.js.snap
@@ -2,19 +2,6 @@
 
 exports[`<Step /> should render 1`] = `
 .c3 {
-  position: absolute;
-  background-color: #7994d4;
-  border-radius: 0.6rem;
-  top: 50%;
-  left: 0;
-  width: 0.4rem;
-  height: 100%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c6 {
   position: relative;
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -34,7 +21,7 @@ exports[`<Step /> should render 1`] = `
   text-align: center;
 }
 
-.c9 {
+.c6 {
   position: absolute;
   top: 1.6rem;
   right: 1.6rem;
@@ -44,7 +31,7 @@ exports[`<Step /> should render 1`] = `
   pointer-events: none;
 }
 
-.c8 {
+.c5 {
   width: 100%;
   height: 5.4rem;
   padding: 0 2rem 0;
@@ -65,42 +52,25 @@ exports[`<Step /> should render 1`] = `
   appearance: none;
 }
 
-.c8::-ms-expand {
+.c5::-ms-expand {
   background-color: transparent;
   border: 0 transparent;
 }
 
-.c8 *::-ms-backdrop,
-.c8 {
+.c5 *::-ms-backdrop,
+.c5 {
   padding-right: 1.6rem;
 }
 
-.c8:invalid {
+.c5:invalid {
   border-color: #eb5757;
 }
 
-.c8:disabled {
+.c5:disabled {
   background-color: #e4e8ef;
 }
 
-.c0 {
-  margin: 0 auto 1rem;
-  text-align: left;
-}
-
 .c2 {
-  position: relative;
-  margin: 0;
-  color: #2f3b6c;
-  font-weight: normal;
-  font-size: 2.8rem;
-  font-family: "Merriweather",serif;
-  line-height: 1.25;
-  padding-left: 3.2rem;
-  text-align: left;
-}
-
-.c5 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -113,16 +83,20 @@ exports[`<Step /> should render 1`] = `
   padding: 0;
 }
 
-.c1 {
+.c0 {
   margin-top: 3.2rem;
   margin-bottom: 2rem;
+  color: #4d73b8;
+  font-weight: 600;
+  font-size: 1.8rem;
+  font-family: "Open Sans",sans-serif;
 }
 
-.c7 {
+.c4 {
   max-width: 32rem;
 }
 
-.c4 {
+.c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -137,45 +111,26 @@ exports[`<Step /> should render 1`] = `
   margin-bottom: 2rem;
 }
 
-@media (max-width:600px) {
-  .c2 {
-    padding-left: 1.6rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c2 {
-    font-size: 2.2rem;
-  }
-}
-
 <div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Motif du licenciement
-    </h2>
-  </header>
+    Motif du licenciement
+  </h2>
   <div
-    class="c4"
+    class="c1"
   >
     <label
-      class="c5"
+      class="c2"
       for="input-motif"
     >
       Quel est le motif du licenciement ?
     </label>
     <div
-      class="c6 c7"
+      class="c3 c4"
     >
       <select
-        class="c8"
+        class="c5"
         id="input-motif"
         name="motif"
       >
@@ -203,7 +158,7 @@ exports[`<Step /> should render 1`] = `
       </select>
       <div
         aria-hidden="true"
-        class="c9"
+        class="c6"
       >
         <svg
           fill="none"
@@ -232,19 +187,19 @@ exports[`<Step /> should render 1`] = `
     </div>
   </div>
   <div
-    class="c4"
+    class="c1"
   >
     <label
-      class="c5"
+      class="c2"
       for="input-categorie"
     >
       Quelle est la catégorie professionnelle du salarié ?
     </label>
     <div
-      class="c6 c7"
+      class="c3 c4"
     >
       <select
-        class="c8"
+        class="c5"
         id="input-categorie"
         name="categorie"
       >
@@ -272,7 +227,7 @@ exports[`<Step /> should render 1`] = `
       </select>
       <div
         aria-hidden="true"
-        class="c9"
+        class="c6"
       >
         <svg
           fill="none"
diff --git a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/3043/__tests__/__snapshots__/Result.test.js.snap b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/3043/__tests__/__snapshots__/Result.test.js.snap
index 73e062f499..46d1973b1c 100644
--- a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/3043/__tests__/__snapshots__/Result.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/ccn/3043/__tests__/__snapshots__/Result.test.js.snap
@@ -1,53 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Result /> should render 1`] = `
-.c3 {
-  position: absolute;
-  background-color: #7994d4;
-  border-radius: 0.6rem;
-  top: 50%;
-  left: 0;
-  width: 0.4rem;
-  height: 100%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
 .c0 {
-  margin: 0 auto 1rem;
-  text-align: left;
-}
-
-.c2 {
-  position: relative;
-  margin: 0;
-  color: #2f3b6c;
-  font-weight: normal;
-  font-size: 2.8rem;
-  font-family: "Merriweather",serif;
-  line-height: 1.25;
-  padding-left: 3.2rem;
-  text-align: left;
-}
-
-.c1 {
   margin-top: 3.2rem;
   margin-bottom: 2rem;
+  color: #4d73b8;
+  font-weight: 600;
+  font-size: 1.8rem;
+  font-family: "Open Sans",sans-serif;
 }
 
-.c4 {
+.c1 {
   color: #3e486e;
   font-weight: 700;
   font-size: 1.8rem;
   white-space: nowrap;
 }
 
-.c11 {
+.c8 {
   margin-bottom: 1.6rem;
 }
 
-.c7 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -58,46 +32,46 @@ exports[`<Result /> should render 1`] = `
   align-items: stretch;
 }
 
-.c8 {
+.c5 {
   width: calc(50% * 1);
   background-color: #7994d4;
   border-radius: 0.6rem;
 }
 
-.c16 {
+.c13 {
   width: calc(50% * 0.4);
   background-color: #7994d4;
   border-radius: 0.6rem;
 }
 
-.c9 {
+.c6 {
   margin-left: 1.6rem;
   color: #4d73b8;
   font-size: 1.8rem;
 }
 
-.c10 {
+.c7 {
   margin-top: 2rem;
 }
 
-.c12 {
+.c9 {
   font-weight: bold;
   font-size: 1.4rem;
 }
 
-.c13 {
+.c10 {
   list-style-type: disc;
 }
 
-.c14 {
+.c11 {
   font-size: 1.4rem;
 }
 
-.c15 {
+.c12 {
   margin: 1.6rem 0;
 }
 
-.c5 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -107,32 +81,20 @@ exports[`<Result /> should render 1`] = `
   flex-direction: column;
 }
 
-.c6 {
+.c3 {
   margin: 0.4rem;
   font-weight: 700;
   font-size: 1.6rem;
 }
 
 @media (max-width:600px) {
-  .c2 {
-    padding-left: 1.6rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c2 {
-    font-size: 2.2rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c4 {
+  .c1 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:980px) {
-  .c7 {
+  .c4 {
     -webkit-flex-flow: wrap;
     -ms-flex-flow: wrap;
     flex-flow: wrap;
@@ -140,122 +102,108 @@ exports[`<Result /> should render 1`] = `
 }
 
 @media (max-width:980px) {
-  .c8 {
+  .c5 {
     width: calc(100% * 1);
   }
 }
 
 @media (max-width:980px) {
-  .c16 {
+  .c13 {
     width: calc(100% * 0.4);
   }
 }
 
 @media (max-width:980px) {
-  .c9 {
+  .c6 {
     width: 100%;
     margin-left: 0;
   }
 }
 
 @media (max-width:600px) {
-  .c9 {
+  .c6 {
     font-size: 1.6rem;
   }
 }
 
 <div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Indemnité de licenciement
-    </h2>
-  </header>
+    Indemnité de licenciement
+  </h2>
   <p>
     À partir des éléments que vous avez saisis, l’indemnité de licenciement est estimée à
      
     <strong
-      class="c4"
+      class="c1"
     >
       2,500.00
        € brut
     </strong>
   </p>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Détails
-    </h2>
-  </header>
+    Détails
+  </h2>
   <p>
     Il s’agit du montant le plus important entre l’indemnité légale et l’indemnité conventionnelle.
   </p>
   <div
-    class="c5"
+    class="c2"
   >
     <div>
       <div
-        class="c6"
+        class="c3"
       >
         Votre indemnite légale
       </div>
       <div
-        class="c7"
+        class="c4"
       >
         <div
-          class="c8"
+          class="c5"
         />
         <span
-          class="c9"
+          class="c6"
         >
           2,500.00
            € brut
         </span>
       </div>
       <details
-        class="c10"
+        class="c7"
       >
         <summary
-          class="c11"
+          class="c8"
         >
           Voir le détail du calcul
         </summary>
         <strong
-          class="c12"
+          class="c9"
         >
           Éléments saisis :
         </strong>
         <ul
-          class="c13"
+          class="c10"
         >
           <li
-            class="c14"
+            class="c11"
           >
             Salaire de réference (Sref)
              : 
             2000
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             Licenciement pour inaptitude
              : 
             non
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             Ancienneté totale (A)
              : 
@@ -263,12 +211,12 @@ exports[`<Result /> should render 1`] = `
           </li>
         </ul>
         <strong
-          class="c12"
+          class="c9"
         >
           Formule :
         </strong>
         <div
-          class="c15"
+          class="c12"
         >
           <div
             id="react-mathjax-preview"
@@ -303,62 +251,62 @@ exports[`<Result /> should render 1`] = `
     </div>
     <div>
       <div
-        class="c6"
+        class="c3"
       >
         Votre indemnite conventionnelle
       </div>
       <div
-        class="c7"
+        class="c4"
       >
         <div
-          class="c16"
+          class="c13"
         />
         <span
-          class="c9"
+          class="c6"
         >
           1,000.00
            € brut
         </span>
       </div>
       <details
-        class="c10"
+        class="c7"
       >
         <summary
-          class="c11"
+          class="c8"
         >
           Voir le détail du calcul
         </summary>
         <strong
-          class="c12"
+          class="c9"
         >
           Éléments saisis :
         </strong>
         <ul
-          class="c13"
+          class="c10"
         >
           <li
-            class="c14"
+            class="c11"
           >
             Salaire de référence (Sref)
              : 
             2000
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             Ancienneté entre 2 et 5ans (A1)
              : 
             5
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             Ancienneté 6 ens 10ans (A2)
              : 
             0
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             Ancienneté au delà de 10ans (A3)
              : 
@@ -366,12 +314,12 @@ exports[`<Result /> should render 1`] = `
           </li>
         </ul>
         <strong
-          class="c12"
+          class="c9"
         >
           Formule :
         </strong>
         <div
-          class="c15"
+          class="c12"
         >
           <div
             id="react-mathjax-preview"
diff --git a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/components/__tests__/__snapshots__/AbsencePeriods.test.js.snap b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/components/__tests__/__snapshots__/AbsencePeriods.test.js.snap
index af3fde1813..513451a08a 100644
--- a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/components/__tests__/__snapshots__/AbsencePeriods.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/components/__tests__/__snapshots__/AbsencePeriods.test.js.snap
@@ -95,6 +95,7 @@ exports[`<AbsencePeriods /> should add a period 1`] = `
   font-weight: 600;
   font-size: 1.6rem;
   line-height: 1.625;
+  vertical-align: baseline;
   text-align: left;
   background: none;
   border: none;
@@ -532,6 +533,7 @@ exports[`<AbsencePeriods /> should delete a period 1`] = `
   font-weight: 600;
   font-size: 1.6rem;
   line-height: 1.625;
+  vertical-align: baseline;
   text-align: left;
   background: none;
   border: none;
@@ -753,6 +755,7 @@ exports[`<AbsencePeriods /> should render 1`] = `
   font-weight: 600;
   font-size: 1.6rem;
   line-height: 1.625;
+  vertical-align: baseline;
   text-align: left;
   background: none;
   border: none;
diff --git a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/components/__tests__/__snapshots__/IndemniteConventionnelle.test.js.snap b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/components/__tests__/__snapshots__/IndemniteConventionnelle.test.js.snap
index d6f8df8391..b67700512e 100644
--- a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/components/__tests__/__snapshots__/IndemniteConventionnelle.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/components/__tests__/__snapshots__/IndemniteConventionnelle.test.js.snap
@@ -1,85 +1,40 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<IndemniteCCn /> should render error 1`] = `
-.c3 {
-  position: absolute;
-  background-color: #7994d4;
-  border-radius: 0.6rem;
-  top: 50%;
-  left: 0;
-  width: 0.4rem;
-  height: 100%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c4 {
+.c1 {
   margin-bottom: 1.6rem;
   padding: 1rem 2rem;
   color: #3e486e;
   background-color: #f2f5fa;
-  border: 1px solid transparent;
+  border: 1px solid #f2f5fa;
   border-radius: 0.6rem;
 }
 
-.c4 > *:first-child {
+.c1 > *:first-child {
   margin-top: 0;
 }
 
-.c4 > *:last-child {
+.c1 > *:last-child {
   margin-bottom: 0;
 }
 
 .c0 {
-  margin: 0 auto 1rem;
-  text-align: left;
-}
-
-.c2 {
-  position: relative;
-  margin: 0;
-  color: #2f3b6c;
-  font-weight: normal;
-  font-size: 2.8rem;
-  font-family: "Merriweather",serif;
-  line-height: 1.25;
-  padding-left: 3.2rem;
-  text-align: left;
-}
-
-.c1 {
   margin-top: 3.2rem;
   margin-bottom: 2rem;
-}
-
-@media (max-width:600px) {
-  .c2 {
-    padding-left: 1.6rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c2 {
-    font-size: 2.2rem;
-  }
+  color: #4d73b8;
+  font-weight: 600;
+  font-size: 1.8rem;
+  font-family: "Open Sans",sans-serif;
 }
 
 <div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Indemnité de licenciement
-    </h2>
-  </header>
+    Indemnité de licenciement
+  </h2>
   <div
-    class="c4"
+    class="c1"
   >
     lorem ipsum
   </div>
@@ -90,53 +45,27 @@ exports[`<IndemniteCCn /> should render error 1`] = `
 `;
 
 exports[`<IndemniteCCn /> should render results with highlight on indemnité conventionnelle 1`] = `
-.c3 {
-  position: absolute;
-  background-color: #7994d4;
-  border-radius: 0.6rem;
-  top: 50%;
-  left: 0;
-  width: 0.4rem;
-  height: 100%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
 .c0 {
-  margin: 0 auto 1rem;
-  text-align: left;
-}
-
-.c2 {
-  position: relative;
-  margin: 0;
-  color: #2f3b6c;
-  font-weight: normal;
-  font-size: 2.8rem;
-  font-family: "Merriweather",serif;
-  line-height: 1.25;
-  padding-left: 3.2rem;
-  text-align: left;
-}
-
-.c1 {
   margin-top: 3.2rem;
   margin-bottom: 2rem;
+  color: #4d73b8;
+  font-weight: 600;
+  font-size: 1.8rem;
+  font-family: "Open Sans",sans-serif;
 }
 
-.c4 {
+.c1 {
   color: #3e486e;
   font-weight: 700;
   font-size: 1.8rem;
   white-space: nowrap;
 }
 
-.c11 {
+.c8 {
   margin-bottom: 1.6rem;
 }
 
-.c7 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -147,46 +76,46 @@ exports[`<IndemniteCCn /> should render results with highlight on indemnité con
   align-items: stretch;
 }
 
-.c8 {
+.c5 {
   width: calc(50% * 0.021);
   background-color: #7994d4;
   border-radius: 0.6rem;
 }
 
-.c16 {
+.c13 {
   width: calc(50% * 1);
   background-color: #7994d4;
   border-radius: 0.6rem;
 }
 
-.c9 {
+.c6 {
   margin-left: 1.6rem;
   color: #4d73b8;
   font-size: 1.8rem;
 }
 
-.c10 {
+.c7 {
   margin-top: 2rem;
 }
 
-.c12 {
+.c9 {
   font-weight: bold;
   font-size: 1.4rem;
 }
 
-.c13 {
+.c10 {
   list-style-type: disc;
 }
 
-.c14 {
+.c11 {
   font-size: 1.4rem;
 }
 
-.c15 {
+.c12 {
   margin: 1.6rem 0;
 }
 
-.c5 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -196,32 +125,20 @@ exports[`<IndemniteCCn /> should render results with highlight on indemnité con
   flex-direction: column;
 }
 
-.c6 {
+.c3 {
   margin: 0.4rem;
   font-weight: 700;
   font-size: 1.6rem;
 }
 
 @media (max-width:600px) {
-  .c2 {
-    padding-left: 1.6rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c2 {
-    font-size: 2.2rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c4 {
+  .c1 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:980px) {
-  .c7 {
+  .c4 {
     -webkit-flex-flow: wrap;
     -ms-flex-flow: wrap;
     flex-flow: wrap;
@@ -229,115 +146,101 @@ exports[`<IndemniteCCn /> should render results with highlight on indemnité con
 }
 
 @media (max-width:980px) {
-  .c8 {
+  .c5 {
     width: calc(100% * 0.021);
   }
 }
 
 @media (max-width:980px) {
-  .c16 {
+  .c13 {
     width: calc(100% * 1);
   }
 }
 
 @media (max-width:980px) {
-  .c9 {
+  .c6 {
     width: 100%;
     margin-left: 0;
   }
 }
 
 @media (max-width:600px) {
-  .c9 {
+  .c6 {
     font-size: 1.6rem;
   }
 }
 
 <div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Indemnité de licenciement
-    </h2>
-  </header>
+    Indemnité de licenciement
+  </h2>
   <p>
     À partir des éléments que vous avez saisis, l’indemnité de licenciement est estimée à
      
     <strong
-      class="c4"
+      class="c1"
     >
       2,000.00
        € brut
     </strong>
   </p>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Détails
-    </h2>
-  </header>
+    Détails
+  </h2>
   <p>
     Il s’agit du montant le plus important entre l’indemnité légale et l’indemnité conventionnelle.
   </p>
   <div
-    class="c5"
+    class="c2"
   >
     <div>
       <div
-        class="c6"
+        class="c3"
       >
         Votre indemnite légale
       </div>
       <div
-        class="c7"
+        class="c4"
       >
         <div
-          class="c8"
+          class="c5"
         />
         <span
-          class="c9"
+          class="c6"
         >
           42.00
            € brut
         </span>
       </div>
       <details
-        class="c10"
+        class="c7"
       >
         <summary
-          class="c11"
+          class="c8"
         >
           Voir le détail du calcul
         </summary>
         <strong
-          class="c12"
+          class="c9"
         >
           Éléments saisis :
         </strong>
         <ul
-          class="c13"
+          class="c10"
         >
           <li
-            class="c14"
+            class="c11"
           >
             salaire ref (Sref)
              : 
             42
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             anciennete (A)
              : 
@@ -345,12 +248,12 @@ exports[`<IndemniteCCn /> should render results with highlight on indemnité con
           </li>
         </ul>
         <strong
-          class="c12"
+          class="c9"
         >
           Formule :
         </strong>
         <div
-          class="c15"
+          class="c12"
         >
           <div
             id="react-mathjax-preview"
@@ -385,48 +288,48 @@ exports[`<IndemniteCCn /> should render results with highlight on indemnité con
     </div>
     <div>
       <div
-        class="c6"
+        class="c3"
       >
         Votre indemnite conventionnelle
       </div>
       <div
-        class="c7"
+        class="c4"
       >
         <div
-          class="c16"
+          class="c13"
         />
         <span
-          class="c9"
+          class="c6"
         >
           2,000.00
            € brut
         </span>
       </div>
       <details
-        class="c10"
+        class="c7"
       >
         <summary
-          class="c11"
+          class="c8"
         >
           Voir le détail du calcul
         </summary>
         <strong
-          class="c12"
+          class="c9"
         >
           Éléments saisis :
         </strong>
         <ul
-          class="c13"
+          class="c10"
         >
           <li
-            class="c14"
+            class="c11"
           >
             salaire de ref (Sref)
              : 
             1337
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             foo
              : 
@@ -434,12 +337,12 @@ exports[`<IndemniteCCn /> should render results with highlight on indemnité con
           </li>
         </ul>
         <strong
-          class="c12"
+          class="c9"
         >
           Formule :
         </strong>
         <div
-          class="c15"
+          class="c12"
         >
           <div
             id="react-mathjax-preview"
@@ -461,53 +364,27 @@ exports[`<IndemniteCCn /> should render results with highlight on indemnité con
 `;
 
 exports[`<IndemniteCCn /> should render results with highlight on indemnité legale 1`] = `
-.c3 {
-  position: absolute;
-  background-color: #7994d4;
-  border-radius: 0.6rem;
-  top: 50%;
-  left: 0;
-  width: 0.4rem;
-  height: 100%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
 .c0 {
-  margin: 0 auto 1rem;
-  text-align: left;
-}
-
-.c2 {
-  position: relative;
-  margin: 0;
-  color: #2f3b6c;
-  font-weight: normal;
-  font-size: 2.8rem;
-  font-family: "Merriweather",serif;
-  line-height: 1.25;
-  padding-left: 3.2rem;
-  text-align: left;
-}
-
-.c1 {
   margin-top: 3.2rem;
   margin-bottom: 2rem;
+  color: #4d73b8;
+  font-weight: 600;
+  font-size: 1.8rem;
+  font-family: "Open Sans",sans-serif;
 }
 
-.c4 {
+.c1 {
   color: #3e486e;
   font-weight: 700;
   font-size: 1.8rem;
   white-space: nowrap;
 }
 
-.c11 {
+.c8 {
   margin-bottom: 1.6rem;
 }
 
-.c7 {
+.c4 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -518,46 +395,46 @@ exports[`<IndemniteCCn /> should render results with highlight on indemnité leg
   align-items: stretch;
 }
 
-.c8 {
+.c5 {
   width: calc(50% * 1);
   background-color: #7994d4;
   border-radius: 0.6rem;
 }
 
-.c16 {
+.c13 {
   width: calc(50% * 0.5348);
   background-color: #7994d4;
   border-radius: 0.6rem;
 }
 
-.c9 {
+.c6 {
   margin-left: 1.6rem;
   color: #4d73b8;
   font-size: 1.8rem;
 }
 
-.c10 {
+.c7 {
   margin-top: 2rem;
 }
 
-.c12 {
+.c9 {
   font-weight: bold;
   font-size: 1.4rem;
 }
 
-.c13 {
+.c10 {
   list-style-type: disc;
 }
 
-.c14 {
+.c11 {
   font-size: 1.4rem;
 }
 
-.c15 {
+.c12 {
   margin: 1.6rem 0;
 }
 
-.c5 {
+.c2 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -567,32 +444,20 @@ exports[`<IndemniteCCn /> should render results with highlight on indemnité leg
   flex-direction: column;
 }
 
-.c6 {
+.c3 {
   margin: 0.4rem;
   font-weight: 700;
   font-size: 1.6rem;
 }
 
 @media (max-width:600px) {
-  .c2 {
-    padding-left: 1.6rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c2 {
-    font-size: 2.2rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c4 {
+  .c1 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:980px) {
-  .c7 {
+  .c4 {
     -webkit-flex-flow: wrap;
     -ms-flex-flow: wrap;
     flex-flow: wrap;
@@ -600,115 +465,101 @@ exports[`<IndemniteCCn /> should render results with highlight on indemnité leg
 }
 
 @media (max-width:980px) {
-  .c8 {
+  .c5 {
     width: calc(100% * 1);
   }
 }
 
 @media (max-width:980px) {
-  .c16 {
+  .c13 {
     width: calc(100% * 0.5348);
   }
 }
 
 @media (max-width:980px) {
-  .c9 {
+  .c6 {
     width: 100%;
     margin-left: 0;
   }
 }
 
 @media (max-width:600px) {
-  .c9 {
+  .c6 {
     font-size: 1.6rem;
   }
 }
 
 <div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Indemnité de licenciement
-    </h2>
-  </header>
+    Indemnité de licenciement
+  </h2>
   <p>
     À partir des éléments que vous avez saisis, l’indemnité de licenciement est estimée à
      
     <strong
-      class="c4"
+      class="c1"
     >
       2,500.00
        € brut
     </strong>
   </p>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Détails
-    </h2>
-  </header>
+    Détails
+  </h2>
   <p>
     Il s’agit du montant le plus important entre l’indemnité légale et l’indemnité conventionnelle.
   </p>
   <div
-    class="c5"
+    class="c2"
   >
     <div>
       <div
-        class="c6"
+        class="c3"
       >
         Votre indemnite légale
       </div>
       <div
-        class="c7"
+        class="c4"
       >
         <div
-          class="c8"
+          class="c5"
         />
         <span
-          class="c9"
+          class="c6"
         >
           2,500.00
            € brut
         </span>
       </div>
       <details
-        class="c10"
+        class="c7"
       >
         <summary
-          class="c11"
+          class="c8"
         >
           Voir le détail du calcul
         </summary>
         <strong
-          class="c12"
+          class="c9"
         >
           Éléments saisis :
         </strong>
         <ul
-          class="c13"
+          class="c10"
         >
           <li
-            class="c14"
+            class="c11"
           >
             salaire ref (Sref)
              : 
             42
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             anciennete (A)
              : 
@@ -716,12 +567,12 @@ exports[`<IndemniteCCn /> should render results with highlight on indemnité leg
           </li>
         </ul>
         <strong
-          class="c12"
+          class="c9"
         >
           Formule :
         </strong>
         <div
-          class="c15"
+          class="c12"
         >
           <div
             id="react-mathjax-preview"
@@ -756,48 +607,48 @@ exports[`<IndemniteCCn /> should render results with highlight on indemnité leg
     </div>
     <div>
       <div
-        class="c6"
+        class="c3"
       >
         Votre indemnite conventionnelle
       </div>
       <div
-        class="c7"
+        class="c4"
       >
         <div
-          class="c16"
+          class="c13"
         />
         <span
-          class="c9"
+          class="c6"
         >
           1,337.00
            € brut
         </span>
       </div>
       <details
-        class="c10"
+        class="c7"
       >
         <summary
-          class="c11"
+          class="c8"
         >
           Voir le détail du calcul
         </summary>
         <strong
-          class="c12"
+          class="c9"
         >
           Éléments saisis :
         </strong>
         <ul
-          class="c13"
+          class="c10"
         >
           <li
-            class="c14"
+            class="c11"
           >
             salaire de ref (Sref)
              : 
             1337
           </li>
           <li
-            class="c14"
+            class="c11"
           >
             foo
              : 
@@ -805,12 +656,12 @@ exports[`<IndemniteCCn /> should render results with highlight on indemnité leg
           </li>
         </ul>
         <strong
-          class="c12"
+          class="c9"
         >
           Formule :
         </strong>
         <div
-          class="c15"
+          class="c12"
         >
           <div
             id="react-mathjax-preview"
diff --git a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/components/__tests__/__snapshots__/IndemniteLegale.test.js.snap b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/components/__tests__/__snapshots__/IndemniteLegale.test.js.snap
index 01d020e018..1df426714d 100644
--- a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/components/__tests__/__snapshots__/IndemniteLegale.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/components/__tests__/__snapshots__/IndemniteLegale.test.js.snap
@@ -1,109 +1,64 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<IndemniteLegale /> should render 1`] = `
-.c3 {
-  position: absolute;
-  background-color: #7994d4;
-  border-radius: 0.6rem;
-  top: 50%;
-  left: 0;
-  width: 0.4rem;
-  height: 100%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
 .c0 {
-  margin: 0 auto 1rem;
-  text-align: left;
-}
-
-.c2 {
-  position: relative;
-  margin: 0;
-  color: #2f3b6c;
-  font-weight: normal;
-  font-size: 2.8rem;
-  font-family: "Merriweather",serif;
-  line-height: 1.25;
-  padding-left: 3.2rem;
-  text-align: left;
-}
-
-.c1 {
   margin-top: 3.2rem;
   margin-bottom: 2rem;
+  color: #4d73b8;
+  font-weight: 600;
+  font-size: 1.8rem;
+  font-family: "Open Sans",sans-serif;
 }
 
-.c4 {
+.c1 {
   color: #3e486e;
   font-weight: 700;
   font-size: 1.8rem;
   white-space: nowrap;
 }
 
-.c6 {
+.c3 {
   margin-bottom: 1.6rem;
 }
 
-.c5 {
+.c2 {
   margin-top: 2rem;
 }
 
-.c7 {
+.c4 {
   font-weight: bold;
   font-size: 1.4rem;
 }
 
-.c8 {
+.c5 {
   list-style-type: disc;
 }
 
-.c9 {
+.c6 {
   font-size: 1.4rem;
 }
 
-.c10 {
+.c7 {
   margin: 1.6rem 0;
 }
 
 @media (max-width:600px) {
-  .c2 {
-    padding-left: 1.6rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c2 {
-    font-size: 2.2rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c4 {
+  .c1 {
     font-size: 1.6rem;
   }
 }
 
 <div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Indemnité légale
-    </h2>
-  </header>
+    Indemnité légale
+  </h2>
   <p>
     Le code du travail prévoit un montant minimum de
      
     <strong
-      class="c4"
+      class="c1"
     >
       42.00
        € brut.
@@ -111,23 +66,23 @@ exports[`<IndemniteLegale /> should render 1`] = `
      
   </p>
   <details
-    class="c5"
+    class="c2"
   >
     <summary
-      class="c6"
+      class="c3"
     >
       Voir le détail du calcul
     </summary>
     <strong
-      class="c7"
+      class="c4"
     >
       Éléments saisis :
     </strong>
     <ul
-      class="c8"
+      class="c5"
     >
       <li
-        class="c9"
+        class="c6"
       >
         value
          : 
@@ -135,12 +90,12 @@ exports[`<IndemniteLegale /> should render 1`] = `
       </li>
     </ul>
     <strong
-      class="c7"
+      class="c4"
     >
       Formule :
     </strong>
     <div
-      class="c10"
+      class="c7"
     >
       <div
         id="react-mathjax-preview"
diff --git a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/components/__tests__/__snapshots__/Primes.test.js.snap b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/components/__tests__/__snapshots__/Primes.test.js.snap
index c42adbda08..c5d5f6eeb8 100644
--- a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/components/__tests__/__snapshots__/Primes.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/components/__tests__/__snapshots__/Primes.test.js.snap
@@ -95,6 +95,7 @@ exports[`<Primes /> should add a prime 1`] = `
   font-weight: 600;
   font-size: 1.6rem;
   line-height: 1.625;
+  vertical-align: baseline;
   text-align: left;
   background: none;
   border: none;
@@ -364,6 +365,7 @@ exports[`<Primes /> should delete a primes 1`] = `
   font-weight: 600;
   font-size: 1.6rem;
   line-height: 1.625;
+  vertical-align: baseline;
   text-align: left;
   background: none;
   border: none;
@@ -521,6 +523,7 @@ exports[`<Primes /> should render 1`] = `
   font-weight: 600;
   font-size: 1.6rem;
   line-height: 1.625;
+  vertical-align: baseline;
   text-align: left;
   background: none;
   border: none;
diff --git a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/components/__tests__/__snapshots__/SalaireTempsPartiel.test.js.snap b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/components/__tests__/__snapshots__/SalaireTempsPartiel.test.js.snap
index fd15d86291..40879d15b4 100644
--- a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/components/__tests__/__snapshots__/SalaireTempsPartiel.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/components/__tests__/__snapshots__/SalaireTempsPartiel.test.js.snap
@@ -95,6 +95,7 @@ exports[`<SalaireTempsPartiel /> should add a period 1`] = `
   font-weight: 600;
   font-size: 1.6rem;
   line-height: 1.625;
+  vertical-align: baseline;
   text-align: left;
   background: none;
   border: none;
@@ -702,6 +703,7 @@ exports[`<SalaireTempsPartiel /> should delete a period 1`] = `
   font-weight: 600;
   font-size: 1.6rem;
   line-height: 1.625;
+  vertical-align: baseline;
   text-align: left;
   background: none;
   border: none;
@@ -1309,6 +1311,7 @@ exports[`<SalaireTempsPartiel /> should render 1`] = `
   font-weight: 600;
   font-size: 1.6rem;
   line-height: 1.625;
+  vertical-align: baseline;
   text-align: left;
   background: none;
   border: none;
diff --git a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/steps/__tests__/__snapshots__/Anciennete.test.js.snap b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/steps/__tests__/__snapshots__/Anciennete.test.js.snap
index b967c8ea6a..82017698a3 100644
--- a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/steps/__tests__/__snapshots__/Anciennete.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/steps/__tests__/__snapshots__/Anciennete.test.js.snap
@@ -1,25 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Anciennete /> should render 1`] = `
-.c3 {
-  position: absolute;
-  background-color: #7994d4;
-  border-radius: 0.6rem;
-  top: 50%;
-  left: 0;
-  width: 0.4rem;
-  height: 100%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c7 {
+.c4 {
   position: relative;
   display: inline-block;
 }
 
-.c9 {
+.c6 {
   width: 100%;
   height: 5.4rem;
   padding: 0 2rem;
@@ -41,15 +28,15 @@ exports[`<Anciennete /> should render 1`] = `
   appearance: none;
 }
 
-.c9::-webkit-outer-spin-button,
-.c9::-webkit-inner-spin-button {
+.c6::-webkit-outer-spin-button,
+.c6::-webkit-inner-spin-button {
   margin: 0;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c9::-webkit-calendar-picker-indicator {
+.c6::-webkit-calendar-picker-indicator {
   display: block;
   width: 3.2rem;
   height: 3.2rem;
@@ -62,51 +49,51 @@ exports[`<Anciennete /> should render 1`] = `
   mask-image: url("data:image/svg+xml;,%3Csvg%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.947%207.601h1.601c1.472%200%202.521%201.198%202.521%202.669v2.306l-.001%2010.392c0%201.472-1.049%202.669-2.521%202.669H8.669A2.672%202.672%200%20016%2022.967l.001-12.697a2.672%202.672%200%20012.67-2.669h1.331V6h.999v1.601H20V6h.947v1.601zm1.6%2017.036c.883%200%201.454-.786%201.454-1.67v-10.33h-17L7%2022.967c0%20.884.785%201.67%201.668%201.67h13.879zm-15.548-13h17.002l.001-1.367c0-.883-.57-1.601-1.453-1.601h-1.6v1.068H20V8.669h-9v1.068h-1V8.669H8.669C7.786%208.669%207%209.387%207%2010.27v1.367zm9.677%206.277h-2.135a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203h-2.135v2.135h2.136v-2.135zm3.203%203.203h2.135a1.07%201.07%200%20001.068-1.068v-2.135a1.07%201.07%200%2000-1.068-1.068H19.88a1.07%201.07%200%2000-1.068%201.068v2.135a1.07%201.07%200%20001.068%201.068zm0-3.203h2.135l.001%202.135H19.88v-2.135zm-8.54%208.541H9.204a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203H9.204v2.135h2.136l-.001-2.135zm3.202%203.203h2.135a1.07%201.07%200%20001.068-1.068v-2.135a1.07%201.07%200%2000-1.068-1.068h-2.135a1.07%201.07%200%2000-1.068%201.068v2.135a1.07%201.07%200%20001.068%201.068zm0-3.203h2.135l.001%202.135h-2.136v-2.135zm7.473%203.203H19.88a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203H19.88v2.135h2.136v-2.135z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
 }
 
-.c9:invalid {
+.c6:invalid {
   border-color: #eb5757;
 }
 
-.c9::-webkit-input-placeholder {
+.c6::-webkit-input-placeholder {
   color: #9298af;
 }
 
-.c9::-moz-placeholder {
+.c6::-moz-placeholder {
   color: #9298af;
 }
 
-.c9:-ms-input-placeholder {
+.c6:-ms-input-placeholder {
   color: #9298af;
 }
 
-.c9::placeholder {
+.c6::placeholder {
   color: #9298af;
 }
 
-.c9:focus {
+.c6:focus {
   border-color: #7994d4;
 }
 
-.c9:focus::-webkit-input-placeholder {
+.c6:focus::-webkit-input-placeholder {
   color: transparent;
 }
 
-.c9:focus::-moz-placeholder {
+.c6:focus::-moz-placeholder {
   color: transparent;
 }
 
-.c9:focus:-ms-input-placeholder {
+.c6:focus:-ms-input-placeholder {
   color: transparent;
 }
 
-.c9:focus::placeholder {
+.c6:focus::placeholder {
   color: transparent;
 }
 
-.c8 {
+.c5 {
   width: 20rem;
 }
 
-.c12 {
+.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -115,7 +102,7 @@ exports[`<Anciennete /> should render 1`] = `
   cursor: pointer;
 }
 
-.c13 {
+.c10 {
   position: relative;
   display: inline-block;
   -webkit-flex-shrink: 0;
@@ -136,7 +123,7 @@ exports[`<Anciennete /> should render 1`] = `
   appearance: none;
 }
 
-.c13:before {
+.c10:before {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -151,33 +138,16 @@ exports[`<Anciennete /> should render 1`] = `
   content: "";
 }
 
-.c13:checked {
+.c10:checked {
   background-color: #fff;
   border-color: #f66663;
 }
 
-.c13:checked:before {
+.c10:checked:before {
   display: block;
 }
 
-.c0 {
-  margin: 0 auto 1rem;
-  text-align: left;
-}
-
-.c2 {
-  position: relative;
-  margin: 0;
-  color: #2f3b6c;
-  font-weight: normal;
-  font-size: 2.8rem;
-  font-family: "Merriweather",serif;
-  line-height: 1.25;
-  padding-left: 3.2rem;
-  text-align: left;
-}
-
-.c11 {
+.c8 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -196,12 +166,16 @@ exports[`<Anciennete /> should render 1`] = `
   margin-bottom: 2rem;
 }
 
-.c1 {
+.c0 {
   margin-top: 3.2rem;
   margin-bottom: 2rem;
+  color: #4d73b8;
+  font-weight: 600;
+  font-size: 1.8rem;
+  font-family: "Open Sans",sans-serif;
 }
 
-.c4 {
+.c1 {
   display: block;
   margin-top: 2rem;
   margin-bottom: 1rem;
@@ -209,7 +183,7 @@ exports[`<Anciennete /> should render 1`] = `
   cursor: pointer;
 }
 
-.c10 {
+.c7 {
   display: block;
   margin-top: 2rem;
   margin-bottom: 1rem;
@@ -217,13 +191,13 @@ exports[`<Anciennete /> should render 1`] = `
   cursor: default;
 }
 
-.c5 {
+.c2 {
   display: inline-block;
   margin-left: 1rem;
   color: #eb5757;
 }
 
-.c6 {
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -236,70 +210,51 @@ exports[`<Anciennete /> should render 1`] = `
 }
 
 @media (max-width:600px) {
-  .c9 {
+  .c6 {
     padding: 0 1rem;
     padding-right: 2rem;
   }
 }
 
 @media (max-width:600px) {
-  .c2 {
-    padding-left: 1.6rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c2 {
-    font-size: 2.2rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c4 {
+  .c1 {
     font-size: 1.6rem;
   }
 }
 
 @media (max-width:600px) {
-  .c10 {
+  .c7 {
     font-size: 1.6rem;
   }
 }
 
 <div>
   <form>
-    <header
-      class="c0 c1"
+    <h2
+      class="c0"
     >
-      <h2
-        class="c2"
-      >
-        <div
-          class="c3"
-        />
-        Dates d’entrée et de sortie de l’entreprise
-      </h2>
-    </header>
+      Dates d’entrée et de sortie de l’entreprise
+    </h2>
     <label
-      class="c4"
+      class="c1"
       for="1"
     >
       Quelle est la date d’entrée dans l’entreprise ?
       <span
         aria-label="champs obligatoire"
-        class="c5"
+        class="c2"
       >
         *
       </span>
     </label>
     <div
-      class="c6"
+      class="c3"
     >
       <span
-        class="c7 c8"
+        class="c4 c5"
       >
         <input
-          class="c9"
+          class="c6"
           id="1"
           name="dateEntree"
           placeholder=" jj/mm/yyyy"
@@ -309,25 +264,25 @@ exports[`<Anciennete /> should render 1`] = `
       </span>
     </div>
     <label
-      class="c4"
+      class="c1"
       for="2"
     >
       Quelle est la date de notification du licenciement ?
       <span
         aria-label="champs obligatoire"
-        class="c5"
+        class="c2"
       >
         *
       </span>
     </label>
     <div
-      class="c6"
+      class="c3"
     >
       <span
-        class="c7 c8"
+        class="c4 c5"
       >
         <input
-          class="c9"
+          class="c6"
           id="2"
           name="dateNotification"
           placeholder=" jj/mm/yyyy"
@@ -337,25 +292,25 @@ exports[`<Anciennete /> should render 1`] = `
       </span>
     </div>
     <label
-      class="c4"
+      class="c1"
       for="3"
     >
       Quelle est la date de sortie de l’entreprise ?
       <span
         aria-label="champs obligatoire"
-        class="c5"
+        class="c2"
       >
         *
       </span>
     </label>
     <div
-      class="c6"
+      class="c3"
     >
       <span
-        class="c7 c8"
+        class="c4 c5"
       >
         <input
-          class="c9"
+          class="c6"
           id="3"
           name="dateSortie"
           placeholder=" jj/mm/yyyy"
@@ -364,38 +319,31 @@ exports[`<Anciennete /> should render 1`] = `
         />
       </span>
     </div>
-    <header
-      class="c0 c1"
+    <h2
+      class="c0"
     >
-      <h2
-        class="c2"
-      >
-        <div
-          class="c3"
-        />
-        Période d’absence prolongée
-      </h2>
-    </header>
+      Période d’absence prolongée
+    </h2>
     <p
-      class="c10"
+      class="c7"
     >
       Y a-t-il eu des absences de plus d’un mois durant le contrat de travail ?
       <span
         aria-label="champs obligatoire"
-        class="c5"
+        class="c2"
       >
         *
       </span>
     </p>
     <div
-      class="c11"
+      class="c8"
     >
       <label
-        class="c12"
+        class="c9"
         for="hasAbsenceProlonge-yes"
       >
         <input
-          class="c13"
+          class="c10"
           id="hasAbsenceProlonge-yes"
           name="hasAbsenceProlonge"
           type="radio"
@@ -404,11 +352,11 @@ exports[`<Anciennete /> should render 1`] = `
         Oui
       </label>
       <label
-        class="c12"
+        class="c9"
         for="hasAbsenceProlonge-no"
       >
         <input
-          class="c13"
+          class="c10"
           id="hasAbsenceProlonge-no"
           name="hasAbsenceProlonge"
           type="radio"
diff --git a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/steps/__tests__/__snapshots__/Indemnite.test.js.snap b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/steps/__tests__/__snapshots__/Indemnite.test.js.snap
index f9f32824a9..ba39f3b313 100644
--- a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/steps/__tests__/__snapshots__/Indemnite.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/steps/__tests__/__snapshots__/Indemnite.test.js.snap
@@ -1,20 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<StepIndemnite /> should render 1`] = `
-.c3 {
-  position: absolute;
-  background-color: #7994d4;
-  border-radius: 0.6rem;
-  top: 50%;
-  left: 0;
-  width: 0.4rem;
-  height: 100%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-.c11 {
+.c8 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -36,7 +23,7 @@ exports[`<StepIndemnite /> should render 1`] = `
   animation: none;
 }
 
-.c12 {
+.c9 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -49,95 +36,63 @@ exports[`<StepIndemnite /> should render 1`] = `
 }
 
 .c0 {
-  margin: 0 auto 1rem;
-  text-align: left;
-}
-
-.c2 {
-  position: relative;
-  margin: 0;
-  color: #2f3b6c;
-  font-weight: normal;
-  font-size: 2.8rem;
-  font-family: "Merriweather",serif;
-  line-height: 1.25;
-  padding-left: 3.2rem;
-  text-align: left;
-}
-
-.c1 {
   margin-top: 3.2rem;
   margin-bottom: 2rem;
+  color: #4d73b8;
+  font-weight: 600;
+  font-size: 1.8rem;
+  font-family: "Open Sans",sans-serif;
 }
 
-.c4 {
+.c1 {
   color: #3e486e;
   font-weight: 700;
   font-size: 1.8rem;
   white-space: nowrap;
 }
 
-.c6 {
+.c3 {
   margin-bottom: 1.6rem;
 }
 
-.c5 {
+.c2 {
   margin-top: 2rem;
 }
 
-.c7 {
+.c4 {
   font-weight: bold;
   font-size: 1.4rem;
 }
 
-.c8 {
+.c5 {
   list-style-type: disc;
 }
 
-.c9 {
+.c6 {
   font-size: 1.4rem;
 }
 
-.c10 {
+.c7 {
   margin: 1.6rem 0;
 }
 
 @media (max-width:600px) {
-  .c2 {
-    padding-left: 1.6rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c2 {
-    font-size: 2.2rem;
-  }
-}
-
-@media (max-width:600px) {
-  .c4 {
+  .c1 {
     font-size: 1.6rem;
   }
 }
 
 <div>
-  <header
-    class="c0 c1"
+  <h2
+    class="c0"
   >
-    <h2
-      class="c2"
-    >
-      <div
-        class="c3"
-      />
-      Indemnité légale
-    </h2>
-  </header>
+    Indemnité légale
+  </h2>
   <p>
     Le code du travail prévoit un montant minimum de
      
     <strong
-      class="c4"
+      class="c1"
     >
       1,250.00
        € brut.
@@ -145,37 +100,37 @@ exports[`<StepIndemnite /> should render 1`] = `
      
   </p>
   <details
-    class="c5"
+    class="c2"
   >
     <summary
-      class="c6"
+      class="c3"
     >
       Voir le détail du calcul
     </summary>
     <strong
-      class="c7"
+      class="c4"
     >
       Éléments saisis :
     </strong>
     <ul
-      class="c8"
+      class="c5"
     >
       <li
-        class="c9"
+        class="c6"
       >
         Salaire de réference (Sref)
          : 
         2000
       </li>
       <li
-        class="c9"
+        class="c6"
       >
         Licenciement pour inaptitude
          : 
         oui
       </li>
       <li
-        class="c9"
+        class="c6"
       >
         Ancienneté totale (A)
          : 
@@ -183,12 +138,12 @@ exports[`<StepIndemnite /> should render 1`] = `
       </li>
     </ul>
     <strong
-      class="c7"
+      class="c4"
     >
       Formule :
     </strong>
     <div
-      class="c10"
+      class="c7"
     >
       <div
         id="react-mathjax-preview"
@@ -221,10 +176,10 @@ exports[`<StepIndemnite /> should render 1`] = `
     </a>
   </p>
   <div
-    class="c11"
+    class="c8"
   >
     <div
-      class="c12"
+      class="c9"
       role="alert"
     >
       Un accord d’entreprise, le contrat de travail ou un usage peuvent prévoir un montant plus favorable pour le salarié. Dans ce cas, le montant dû est le montant le plus favorable pour le salarié.
diff --git a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/steps/__tests__/__snapshots__/Primes.test.js.snap b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/steps/__tests__/__snapshots__/Primes.test.js.snap
index 4f894c65d6..0c000178fa 100644
--- a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/steps/__tests__/__snapshots__/Primes.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/steps/__tests__/__snapshots__/Primes.test.js.snap
@@ -95,6 +95,7 @@ exports[`<StepPrimes /> should render 1`] = `
   font-weight: 600;
   font-size: 1.6rem;
   line-height: 1.625;
+  vertical-align: baseline;
   text-align: left;
   background: none;
   border: none;
diff --git a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/steps/__tests__/__snapshots__/Salaires.test.js.snap b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/steps/__tests__/__snapshots__/Salaires.test.js.snap
index f1bd40c21b..d26a8f9ca8 100644
--- a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/steps/__tests__/__snapshots__/Salaires.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/steps/__tests__/__snapshots__/Salaires.test.js.snap
@@ -1282,6 +1282,7 @@ exports[`<StepSalaires /> should render tempsPartiel 1`] = `
   font-weight: 600;
   font-size: 1.6rem;
   line-height: 1.625;
+  vertical-align: baseline;
   text-align: left;
   background: none;
   border: none;
diff --git a/packages/code-du-travail-frontend/src/outils/IndemnitePrecarite/__tests__/__snapshots__/index.test.js.snap b/packages/code-du-travail-frontend/src/outils/IndemnitePrecarite/__tests__/__snapshots__/index.test.js.snap
index 198e04bc5c..7b8fad1c61 100644
--- a/packages/code-du-travail-frontend/src/outils/IndemnitePrecarite/__tests__/__snapshots__/index.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/IndemnitePrecarite/__tests__/__snapshots__/index.test.js.snap
@@ -73,6 +73,7 @@ exports[`<SimulateurIndemnitePrecarite /> should render 1`] = `
   color: #3e486e;
   border-radius: 0.6rem;
   background-color: #f2f5fa;
+  border: 1px solid #f2f5fa;
   position: absolute;
   top: 0;
   bottom: 0;
diff --git a/packages/code-du-travail-frontend/src/outils/IndemnitePrecarite/components/__tests__/__snapshots__/Salaires.test.js.snap b/packages/code-du-travail-frontend/src/outils/IndemnitePrecarite/components/__tests__/__snapshots__/Salaires.test.js.snap
index e9e6ba640d..6742f80c47 100644
--- a/packages/code-du-travail-frontend/src/outils/IndemnitePrecarite/components/__tests__/__snapshots__/Salaires.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/IndemnitePrecarite/components/__tests__/__snapshots__/Salaires.test.js.snap
@@ -95,6 +95,7 @@ exports[`<Salaires /> should add a salaire 1`] = `
   font-weight: 600;
   font-size: 1.6rem;
   line-height: 1.625;
+  vertical-align: baseline;
   text-align: left;
   background: none;
   border: none;
@@ -409,6 +410,7 @@ exports[`<Salaires /> should delete a salaires 1`] = `
   font-weight: 600;
   font-size: 1.6rem;
   line-height: 1.625;
+  vertical-align: baseline;
   text-align: left;
   background: none;
   border: none;
@@ -566,6 +568,7 @@ exports[`<Salaires /> should render 1`] = `
   font-weight: 600;
   font-size: 1.6rem;
   line-height: 1.625;
+  vertical-align: baseline;
   text-align: left;
   background: none;
   border: none;
diff --git a/packages/code-du-travail-frontend/src/outils/IndemnitePrecarite/steps/__tests__/__snapshots__/Remuneration.test.js.snap b/packages/code-du-travail-frontend/src/outils/IndemnitePrecarite/steps/__tests__/__snapshots__/Remuneration.test.js.snap
index 7b6f290ad3..94195bb31f 100644
--- a/packages/code-du-travail-frontend/src/outils/IndemnitePrecarite/steps/__tests__/__snapshots__/Remuneration.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/IndemnitePrecarite/steps/__tests__/__snapshots__/Remuneration.test.js.snap
@@ -95,6 +95,7 @@ exports[`<StepRemuneration /> should render multiple inputs 1`] = `
   font-weight: 600;
   font-size: 1.6rem;
   line-height: 1.625;
+  vertical-align: baseline;
   text-align: left;
   background: none;
   border: none;
diff --git a/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/InfoCCn.test.js.snap b/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/InfoCCn.test.js.snap
index e777ad8627..196780a9cb 100644
--- a/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/InfoCCn.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/InfoCCn.test.js.snap
@@ -2,25 +2,11 @@
 
 exports[`<StepInfoCCn /> should render cdd infos step 1`] = `
 .c2 {
-  max-width: 124rem;
-  margin: 0 auto;
-  padding: 0 2rem;
-}
-
-.c2 > *:first-child {
-  margin-top: 0;
-}
-
-.c2 > *:last-child {
-  margin-bottom: 0;
-}
-
-.c4 {
   position: relative;
   display: inline-block;
 }
 
-.c6 {
+.c4 {
   width: 100%;
   height: 5.4rem;
   padding: 0 2rem;
@@ -42,15 +28,15 @@ exports[`<StepInfoCCn /> should render cdd infos step 1`] = `
   appearance: none;
 }
 
-.c6::-webkit-outer-spin-button,
-.c6::-webkit-inner-spin-button {
+.c4::-webkit-outer-spin-button,
+.c4::-webkit-inner-spin-button {
   margin: 0;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
 }
 
-.c6::-webkit-calendar-picker-indicator {
+.c4::-webkit-calendar-picker-indicator {
   display: block;
   width: 3.2rem;
   height: 3.2rem;
@@ -63,47 +49,47 @@ exports[`<StepInfoCCn /> should render cdd infos step 1`] = `
   mask-image: url("data:image/svg+xml;,%3Csvg%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M20.947%207.601h1.601c1.472%200%202.521%201.198%202.521%202.669v2.306l-.001%2010.392c0%201.472-1.049%202.669-2.521%202.669H8.669A2.672%202.672%200%20016%2022.967l.001-12.697a2.672%202.672%200%20012.67-2.669h1.331V6h.999v1.601H20V6h.947v1.601zm1.6%2017.036c.883%200%201.454-.786%201.454-1.67v-10.33h-17L7%2022.967c0%20.884.785%201.67%201.668%201.67h13.879zm-15.548-13h17.002l.001-1.367c0-.883-.57-1.601-1.453-1.601h-1.6v1.068H20V8.669h-9v1.068h-1V8.669H8.669C7.786%208.669%207%209.387%207%2010.27v1.367zm9.677%206.277h-2.135a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203h-2.135v2.135h2.136v-2.135zm3.203%203.203h2.135a1.07%201.07%200%20001.068-1.068v-2.135a1.07%201.07%200%2000-1.068-1.068H19.88a1.07%201.07%200%2000-1.068%201.068v2.135a1.07%201.07%200%20001.068%201.068zm0-3.203h2.135l.001%202.135H19.88v-2.135zm-8.54%208.541H9.204a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203H9.204v2.135h2.136l-.001-2.135zm3.202%203.203h2.135a1.07%201.07%200%20001.068-1.068v-2.135a1.07%201.07%200%2000-1.068-1.068h-2.135a1.07%201.07%200%2000-1.068%201.068v2.135a1.07%201.07%200%20001.068%201.068zm0-3.203h2.135l.001%202.135h-2.136v-2.135zm7.473%203.203H19.88a1.07%201.07%200%2001-1.068-1.068v-2.135a1.07%201.07%200%20011.068-1.068h2.135a1.07%201.07%200%20011.068%201.068v2.135a1.07%201.07%200%2001-1.068%201.068zm0-3.203H19.88v2.135h2.136v-2.135z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E");
 }
 
-.c6:invalid {
+.c4:invalid {
   border-color: #eb5757;
 }
 
-.c6::-webkit-input-placeholder {
+.c4::-webkit-input-placeholder {
   color: #9298af;
 }
 
-.c6::-moz-placeholder {
+.c4::-moz-placeholder {
   color: #9298af;
 }
 
-.c6:-ms-input-placeholder {
+.c4:-ms-input-placeholder {
   color: #9298af;
 }
 
-.c6::placeholder {
+.c4::placeholder {
   color: #9298af;
 }
 
-.c6:focus {
+.c4:focus {
   border-color: #7994d4;
 }
 
-.c6:focus::-webkit-input-placeholder {
+.c4:focus::-webkit-input-placeholder {
   color: transparent;
 }
 
-.c6:focus::-moz-placeholder {
+.c4:focus::-moz-placeholder {
   color: transparent;
 }
 
-.c6:focus:-ms-input-placeholder {
+.c4:focus:-ms-input-placeholder {
   color: transparent;
 }
 
-.c6:focus::placeholder {
+.c4:focus::placeholder {
   color: transparent;
 }
 
-.c5 {
+.c3 {
   display: block;
 }
 
@@ -115,30 +101,12 @@ exports[`<StepInfoCCn /> should render cdd infos step 1`] = `
   cursor: default;
 }
 
-.c3 {
-  padding-right: 0;
-  padding-left: 0;
-}
-
 .c1 {
   font-style: italic;
 }
 
 @media (max-width:600px) {
-  .c2 {
-    padding: 0 1rem;
-  }
-}
-
-@media print {
-  .c2 {
-    max-width: 100%;
-    padding: 0;
-  }
-}
-
-@media (max-width:600px) {
-  .c6 {
+  .c4 {
     padding: 0 1rem;
     padding-right: 2rem;
   }
@@ -164,26 +132,22 @@ exports[`<StepInfoCCn /> should render cdd infos step 1`] = `
     </strong>
     , si vous ne connaissez pas la convention collective, vous pouvez passer à l’étape suivante en cliquant sur le bouton Suivant.
   </p>
-  <div
+  
+  <p>
+    Renseignez le nom de votre entreprise, son SIRET ou le nom de votre convention collective.
+  </p>
+  <span
     class="c2 c3"
   >
-    
-    <p>
-      Renseignez le nom de votre entreprise, son SIRET ou le nom de votre convention collective.
-    </p>
-    <span
-      class="c4 c5"
-    >
-      <input
-        class="c6"
-        name="q"
-        placeholder="Nom d'entreprise, SIRET, nom de convention collective"
-        role="search"
-        type="search"
-        value=""
-      />
-    </span>
-    
-  </div>
+    <input
+      class="c4"
+      name="q"
+      placeholder="Nom d'entreprise, SIRET, nom de convention collective"
+      role="search"
+      type="search"
+      value=""
+    />
+  </span>
+  
 </div>
 `;
diff --git a/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/StepList.test.js.snap b/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/StepList.test.js.snap
index 2f884e894a..5edfd94bb9 100644
--- a/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/StepList.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/StepList.test.js.snap
@@ -12,6 +12,7 @@ exports[`<StepList /> should render 1`] = `
   color: #3e486e;
   border-radius: 0.6rem;
   background-color: #f2f5fa;
+  border: 1px solid #f2f5fa;
   position: absolute;
   top: 0;
   bottom: 0;
diff --git a/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/Wizard.test.js.snap b/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/Wizard.test.js.snap
index 4d9c791f25..77fbc7d19f 100644
--- a/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/Wizard.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/common/__tests__/__snapshots__/Wizard.test.js.snap
@@ -73,6 +73,7 @@ exports[`<Wizard /> should call navigate the previous step when click on précé
   color: #3e486e;
   border-radius: 0.6rem;
   background-color: #f2f5fa;
+  border: 1px solid #f2f5fa;
   position: absolute;
   top: 0;
   bottom: 0;
@@ -587,6 +588,7 @@ exports[`<Wizard /> should handle initialStepIndex 1`] = `
   color: #3e486e;
   border-radius: 0.6rem;
   background-color: #f2f5fa;
+  border: 1px solid #f2f5fa;
   position: absolute;
   top: 0;
   bottom: 0;
@@ -1061,6 +1063,7 @@ exports[`<Wizard /> should handle initialValues 1`] = `
   color: #3e486e;
   border-radius: 0.6rem;
   background-color: #f2f5fa;
+  border: 1px solid #f2f5fa;
   position: absolute;
   top: 0;
   bottom: 0;
@@ -1524,6 +1527,7 @@ exports[`<Wizard /> should inject rules component 1`] = `
   color: #3e486e;
   border-radius: 0.6rem;
   background-color: #f2f5fa;
+  border: 1px solid #f2f5fa;
   position: absolute;
   top: 0;
   bottom: 0;
@@ -2041,6 +2045,7 @@ exports[`<Wizard /> should navigate to the second step when click on Suivant 1`]
   color: #3e486e;
   border-radius: 0.6rem;
   background-color: #f2f5fa;
+  border: 1px solid #f2f5fa;
   position: absolute;
   top: 0;
   bottom: 0;
@@ -2515,6 +2520,7 @@ exports[`<Wizard /> should render a step 1`] = `
   color: #3e486e;
   border-radius: 0.6rem;
   background-color: #f2f5fa;
+  border: 1px solid #f2f5fa;
   position: absolute;
   top: 0;
   bottom: 0;
diff --git a/packages/code-du-travail-frontend/src/outils/common/stepStyles.js b/packages/code-du-travail-frontend/src/outils/common/stepStyles.js
index b564e7d5a1..e6162567f7 100644
--- a/packages/code-du-travail-frontend/src/outils/common/stepStyles.js
+++ b/packages/code-du-travail-frontend/src/outils/common/stepStyles.js
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { theme, Title } from "@socialgouv/react-ui";
+import { theme } from "@socialgouv/react-ui";
 
 const { breakpoints, fonts, colors, spacings } = theme;
 
@@ -35,9 +35,13 @@ export const Header = styled.div`
   align-items: center;
 `;
 
-export const SectionTitle = styled(Title)`
+export const SectionTitle = styled.h2`
   margin-top: ${spacings.large};
   margin-bottom: ${spacings.medium};
+  color: ${({ theme }) => theme.altText};
+  font-weight: 600;
+  font-size: ${fonts.sizes.headings.small};
+  font-family: "Open Sans", sans-serif;
 `;
 
 export const Highlight = styled.strong`
diff --git a/packages/code-du-travail-frontend/src/search/__tests__/__snapshots__/SearchResults.test.js.snap b/packages/code-du-travail-frontend/src/search/__tests__/__snapshots__/SearchResults.test.js.snap
index cb30a23d37..6fa5ac96a9 100644
--- a/packages/code-du-travail-frontend/src/search/__tests__/__snapshots__/SearchResults.test.js.snap
+++ b/packages/code-du-travail-frontend/src/search/__tests__/__snapshots__/SearchResults.test.js.snap
@@ -157,6 +157,7 @@ exports[`<SearchResults/> should render results 1`] = `
   font-weight: 600;
   font-size: 1.6rem;
   line-height: 1.625;
+  vertical-align: baseline;
   text-align: left;
   background: none;
   border: none;
@@ -421,7 +422,8 @@ exports[`<SearchResults/> should render results 1`] = `
 }
 
 .c1 {
-  margin: 0 auto 1rem;
+  margin-bottom: 1.6rem;
+  margin-left: auto;
   text-align: left;
 }
 
@@ -623,6 +625,13 @@ exports[`<SearchResults/> should render results 1`] = `
   }
 }
 
+@media (max-width:600px) {
+  .c1 {
+    margin-bottom: 1rem;
+    margin-left: auto;
+  }
+}
+
 @media (max-width:600px) {
   .c2 {
     padding-left: 1.6rem;
diff --git a/packages/react-fiche-service-public/__tests__/__snapshots__/FicheServicePublic.test.js.snap b/packages/react-fiche-service-public/__tests__/__snapshots__/FicheServicePublic.test.js.snap
index b1adaf5884..02479d23b8 100644
--- a/packages/react-fiche-service-public/__tests__/__snapshots__/FicheServicePublic.test.js.snap
+++ b/packages/react-fiche-service-public/__tests__/__snapshots__/FicheServicePublic.test.js.snap
@@ -236,7 +236,8 @@ exports[`<FicheServicePublic /> should render 1`] = `
 }
 
 .c7 {
-  margin: 0 auto 1rem;
+  margin-bottom: 1.6rem;
+  margin-left: auto;
   text-align: left;
 }
 
@@ -387,6 +388,13 @@ exports[`<FicheServicePublic /> should render 1`] = `
   }
 }
 
+@media (max-width:600px) {
+  .c7 {
+    margin-bottom: 1rem;
+    margin-left: auto;
+  }
+}
+
 @media (max-width:600px) {
   .c8 {
     padding-left: 1.6rem;
diff --git a/packages/react-fiche-service-public/src/components/__tests__/__snapshots__/Accordion.test.js.snap b/packages/react-fiche-service-public/src/components/__tests__/__snapshots__/Accordion.test.js.snap
index 64d7750fc7..d7c70438be 100644
--- a/packages/react-fiche-service-public/src/components/__tests__/__snapshots__/Accordion.test.js.snap
+++ b/packages/react-fiche-service-public/src/components/__tests__/__snapshots__/Accordion.test.js.snap
@@ -88,7 +88,8 @@ exports[`<Accordion /> should have two different levels of headings 1`] = `
 }
 
 .c0 {
-  margin: 0 auto 1rem;
+  margin-bottom: 1.6rem;
+  margin-left: auto;
   text-align: left;
 }
 
@@ -114,6 +115,13 @@ exports[`<Accordion /> should have two different levels of headings 1`] = `
   }
 }
 
+@media (max-width:600px) {
+  .c0 {
+    margin-bottom: 1rem;
+    margin-left: auto;
+  }
+}
+
 @media (max-width:600px) {
   .c1 {
     padding-left: 1.6rem;
diff --git a/packages/react-fiche-service-public/src/components/__tests__/__snapshots__/List.test.js.snap b/packages/react-fiche-service-public/src/components/__tests__/__snapshots__/List.test.js.snap
index 79b8d04db1..c88ba2703f 100644
--- a/packages/react-fiche-service-public/src/components/__tests__/__snapshots__/List.test.js.snap
+++ b/packages/react-fiche-service-public/src/components/__tests__/__snapshots__/List.test.js.snap
@@ -15,7 +15,8 @@ exports[`<List /> should render and increment heading level of children by one 1
 }
 
 .c1 {
-  margin: 0 auto 1rem;
+  margin-bottom: 1.6rem;
+  margin-left: auto;
   text-align: left;
 }
 
@@ -35,6 +36,13 @@ exports[`<List /> should render and increment heading level of children by one 1
   margin-bottom: 0.4rem;
 }
 
+@media (max-width:600px) {
+  .c1 {
+    margin-bottom: 1rem;
+    margin-left: auto;
+  }
+}
+
 @media (max-width:600px) {
   .c2 {
     padding-left: 1.6rem;
diff --git a/packages/react-fiche-service-public/src/components/__tests__/__snapshots__/Tabulator.test.js.snap b/packages/react-fiche-service-public/src/components/__tests__/__snapshots__/Tabulator.test.js.snap
index 75fd8976a0..5f59cbf4fd 100644
--- a/packages/react-fiche-service-public/src/components/__tests__/__snapshots__/Tabulator.test.js.snap
+++ b/packages/react-fiche-service-public/src/components/__tests__/__snapshots__/Tabulator.test.js.snap
@@ -92,7 +92,8 @@ exports[`<Tabulator /> should have two different levels of headings 1`] = `
 }
 
 .c5 {
-  margin: 0 auto 1rem;
+  margin-bottom: 1.6rem;
+  margin-left: auto;
   text-align: left;
 }
 
@@ -151,6 +152,13 @@ exports[`<Tabulator /> should have two different levels of headings 1`] = `
   }
 }
 
+@media (max-width:600px) {
+  .c5 {
+    margin-bottom: 1rem;
+    margin-left: auto;
+  }
+}
+
 @media (max-width:600px) {
   .c6 {
     padding-left: 1.6rem;
diff --git a/packages/react-ui/src/Alert/__snapshots__/test.js.snap b/packages/react-ui/src/Alert/__snapshots__/test.js.snap
index 9a93f3d92b..464e987a64 100644
--- a/packages/react-ui/src/Alert/__snapshots__/test.js.snap
+++ b/packages/react-ui/src/Alert/__snapshots__/test.js.snap
@@ -6,8 +6,7 @@ exports[`<Alert /> it should render a primary alert 1`] = `
   padding: 1rem 2rem;
   color: #3e486e;
   background-color: #f2f5fa;
-  border: 1px solid transparent;
-  border-color: #f66663;
+  border: 1px solid #f66663;
   border-radius: 0.6rem;
 }
 
@@ -36,7 +35,7 @@ exports[`<Alert /> it should render a secondary alert 1`] = `
   padding: 1rem 2rem;
   color: #3e486e;
   background-color: #f2f5fa;
-  border: 1px solid transparent;
+  border: 1px solid #f2f5fa;
   border-radius: 0.6rem;
 }
 
@@ -65,7 +64,7 @@ exports[`<Alert /> should render 1`] = `
   padding: 1rem 2rem;
   color: #3e486e;
   background-color: #f2f5fa;
-  border: 1px solid transparent;
+  border: 1px solid #f2f5fa;
   border-radius: 0.6rem;
 }
 
diff --git a/packages/react-ui/src/Alert/index.js b/packages/react-ui/src/Alert/index.js
index 1851b0dc7d..696d808e0d 100644
--- a/packages/react-ui/src/Alert/index.js
+++ b/packages/react-ui/src/Alert/index.js
@@ -1,5 +1,5 @@
 import PropTypes from "prop-types";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import { box, spacings } from "../theme";
 
 export const Alert = styled.div`
@@ -7,14 +7,9 @@ export const Alert = styled.div`
   padding: ${spacings.small} ${spacings.medium};
   color: ${({ theme }) => theme.paragraph};
   background-color: ${({ theme }) => theme.bgSecondary};
-  border: 1px solid transparent;
-  ${props => {
-    if (props.variant === "primary") {
-      return css`
-        border-color: ${({ theme }) => theme.primary};
-      `;
-    }
-  }}
+  border: 1px solid
+    ${({ theme, variant }) =>
+      variant === "primary" ? theme.primary : theme.bgSecondary};
   border-radius: ${box.borderRadius};
   & > *:first-child {
     margin-top: 0;
diff --git a/packages/react-ui/src/Button/__snapshots__/test.js.snap b/packages/react-ui/src/Button/__snapshots__/test.js.snap
index 622506a6df..1859488819 100644
--- a/packages/react-ui/src/Button/__snapshots__/test.js.snap
+++ b/packages/react-ui/src/Button/__snapshots__/test.js.snap
@@ -267,6 +267,7 @@ exports[`<Button /> it renders a Button link 1`] = `
   font-weight: 600;
   font-size: 1.6rem;
   line-height: 1.625;
+  vertical-align: baseline;
   text-align: left;
   background: none;
   border: none;
diff --git a/packages/react-ui/src/Button/index.js b/packages/react-ui/src/Button/index.js
index cf9a24a6de..85209610e0 100644
--- a/packages/react-ui/src/Button/index.js
+++ b/packages/react-ui/src/Button/index.js
@@ -33,6 +33,7 @@ export const StyledButton = styled.button`
         font-weight: 600;
         font-size: ${fonts.sizes.default};
         line-height: ${fonts.lineHeight};
+        vertical-align: baseline;
         text-align: left;
         background: none;
         border: none;
diff --git a/packages/react-ui/src/IconStripe/__snapshots__/test.js.snap b/packages/react-ui/src/IconStripe/__snapshots__/test.js.snap
new file mode 100644
index 0000000000..b0ae4347be
--- /dev/null
+++ b/packages/react-ui/src/IconStripe/__snapshots__/test.js.snap
@@ -0,0 +1,68 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Grid /> renders 1`] = `
+.c0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: stretch;
+  -webkit-justify-content: stretch;
+  -ms-flex-pack: stretch;
+  justify-content: stretch;
+}
+
+.c1 {
+  display: block;
+  -webkit-flex: 0 0 4.2rem;
+  -ms-flex: 0 0 4.2rem;
+  flex: 0 0 4.2rem;
+  margin-right: 2.4rem;
+}
+
+.c2 {
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+}
+
+@media (max-width:600px) {
+  .c1 {
+    -webkit-flex: 0 0 3.4rem;
+    -ms-flex: 0 0 3.4rem;
+    flex: 0 0 3.4rem;
+    margin-right: 1rem;
+  }
+}
+
+<div>
+  <div
+    class="c0"
+  >
+    <div
+      class="c1"
+    >
+      <svg
+        fill="none"
+        viewBox="0 0 52 52"
+      >
+        <path
+          clip-rule="evenodd"
+          d="M26.567 3.89L32.544 8H42a1 1 0 011 1v6.188l6.566 4.514a1 1 0 01.434.824V47a1 1 0 01-1 1H3a1 1 0 01-1-1V20.526a1 1 0 01.433-.824L9 15.188V9a1 1 0 011-1h9.455l5.979-4.11a1 1 0 011.133 0zM22.985 8h6.03L26 5.927 22.985 8zM9 17.615l-5 3.437v.323l5 3.438v-7.198zm2 8.573l10.537 7.244 2.873-1.796a3 3 0 013.18 0l2.873 1.796L41 26.188V10H11v16.188zm32-1.375l5-3.438v-.323l-5-3.437v7.198zm5-1.01L32.313 34.586 48 44.392v-20.59zM4 44.391l15.687-9.805L4 23.802v20.59zm21.47-11.06L5.2 46h41.6L26.53 33.332a1 1 0 00-1.06 0z"
+          fill="#4E6896"
+          fill-rule="evenodd"
+        />
+        <path
+          d="M16 17c0-.552.471-1 1.053-1h17.894c.582 0 1.053.448 1.053 1s-.471 1-1.053 1H17.053C16.47 18 16 17.552 16 17zm1.053 5C16.47 22 16 22.448 16 23s.471 1 1.053 1h17.894C35.53 24 36 23.552 36 23s-.471-1-1.053-1H17.053z"
+          fill="#FF7067"
+        />
+      </svg>
+    </div>
+    <div
+      class="c2"
+    >
+      Here is some content
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/react-ui/src/IconStripe/index.js b/packages/react-ui/src/IconStripe/index.js
new file mode 100644
index 0000000000..c000f4bfa4
--- /dev/null
+++ b/packages/react-ui/src/IconStripe/index.js
@@ -0,0 +1,38 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+
+import { breakpoints, spacings } from "../theme";
+
+export const IconStripe = ({ children, icon: Icon, ...props }) => (
+  <FlexDiv {...props}>
+    <IconWrapper>
+      <Icon />
+    </IconWrapper>
+    <ChildrenWrapper>{children}</ChildrenWrapper>
+  </FlexDiv>
+);
+
+const FlexDiv = styled.div`
+  display: flex;
+  justify-content: stretch;
+`;
+
+const IconWrapper = styled.div`
+  display: ${({ theme }) => (theme.noColors ? "none" : "block")};
+  flex: 0 0 4.2rem;
+  margin-right: ${spacings.xmedium};
+  @media (max-width: ${breakpoints.mobile}) {
+    flex: 0 0 3.4rem;
+    margin-right: ${spacings.small};
+  }
+`;
+
+const ChildrenWrapper = styled.div`
+  flex: 1 1 auto;
+`;
+
+IconStripe.propTypes = {
+  children: PropTypes.node.isRequired,
+  icon: PropTypes.elementType.isRequired
+};
diff --git a/packages/react-ui/src/IconStripe/story.js b/packages/react-ui/src/IconStripe/story.js
new file mode 100644
index 0000000000..d36b58ad3e
--- /dev/null
+++ b/packages/react-ui/src/IconStripe/story.js
@@ -0,0 +1,25 @@
+import React from "react";
+import { Custom, Document } from "../icons";
+import { Section } from "../layout/Section";
+import { IconStripe } from ".";
+
+export default {
+  component: IconStripe,
+  title: "Components|IconStripe"
+};
+
+export const base = () => (
+  <>
+    <Section>
+      <IconStripe icon={Custom}>
+        This is a very basic component that simply puts an icon on the left of
+        the children
+      </IconStripe>
+    </Section>
+    <Section>
+      <IconStripe icon={Document}>
+        Check how it fits with another icon
+      </IconStripe>
+    </Section>
+  </>
+);
diff --git a/packages/react-ui/src/IconStripe/test.js b/packages/react-ui/src/IconStripe/test.js
new file mode 100644
index 0000000000..5b91213852
--- /dev/null
+++ b/packages/react-ui/src/IconStripe/test.js
@@ -0,0 +1,13 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { Document } from "../icons";
+import { IconStripe } from ".";
+
+describe("<Grid />", () => {
+  it("renders", () => {
+    const { container } = render(
+      <IconStripe icon={Document}>Here is some content</IconStripe>
+    );
+    expect(container).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-ui/src/Titles/Heading/__snapshots__/test.js.snap b/packages/react-ui/src/Titles/Heading/__snapshots__/test.js.snap
index ddd280a456..9d0f173196 100644
--- a/packages/react-ui/src/Titles/Heading/__snapshots__/test.js.snap
+++ b/packages/react-ui/src/Titles/Heading/__snapshots__/test.js.snap
@@ -29,8 +29,8 @@ exports[`<Heading /> renders a H3 heading  1`] = `
 exports[`<Heading /> renders a stripped shifted H4 heading  1`] = `
 .c1 {
   position: absolute;
-  background-color: #f66663;
-  border-radius: none;
+  background-color: #7994d4;
+  border-radius: 0.6rem;
   top: 50%;
   left: 0;
   width: 0.4rem;
diff --git a/packages/react-ui/src/Titles/Heading/index.js b/packages/react-ui/src/Titles/Heading/index.js
index d678f46c55..70fb77227a 100644
--- a/packages/react-ui/src/Titles/Heading/index.js
+++ b/packages/react-ui/src/Titles/Heading/index.js
@@ -4,9 +4,16 @@ import styled, { css } from "styled-components";
 import { Stripe } from "../../Stripe";
 import { breakpoints, fonts, spacings } from "../../theme";
 
-export const Heading = ({ children, stripped = false, ...props }) => (
+export const Heading = ({ children, stripped = false, variant, ...props }) => (
   <StyledHeading stripped={stripped} {...props}>
-    {stripped && <Stripe variant="primary" position="left" length="100%" />}
+    {stripped && (
+      <Stripe
+        rounded={variant !== "primary"}
+        variant={variant}
+        position="left"
+        length="100%"
+      />
+    )}
     {children}
   </StyledHeading>
 );
@@ -15,7 +22,12 @@ Heading.propTypes = {
   as: PropTypes.string,
   children: PropTypes.node,
   shift: PropTypes.string,
-  stripped: PropTypes.bool
+  stripped: PropTypes.bool,
+  variant: PropTypes.string
+};
+
+Heading.defaultProps = {
+  variant: "secondary"
 };
 
 const StyledHeading = styled.h3`
diff --git a/packages/react-ui/src/Titles/Heading/story.js b/packages/react-ui/src/Titles/Heading/story.js
index aa737ff27c..c541223611 100644
--- a/packages/react-ui/src/Titles/Heading/story.js
+++ b/packages/react-ui/src/Titles/Heading/story.js
@@ -14,10 +14,19 @@ export const base = () => (
   <>
     <Section>
       <Heading>This is a heading (h3)</Heading>
+    </Section>
+    <Section>
       <Heading as="h4">This is a heading (h4)</Heading>
     </Section>
     <Section>
-      <Heading stripped>This is a stripped heading (h3)</Heading>
+      <Heading stripped>This is a stripped heading</Heading>
+    </Section>
+    <Section>
+      <Heading variant="primary" stripped>
+        This is a stripped primary heading
+      </Heading>
+    </Section>
+    <Section>
       <Wrapper variant="light">
         <Heading stripped shift={spacings.xmedium} as="h4">
           This is a stripped shifted heading (h4)
diff --git a/packages/react-ui/src/Titles/PageTitle/__snapshots__/test.js.snap b/packages/react-ui/src/Titles/PageTitle/__snapshots__/test.js.snap
index 2d9131af7d..8eacb71971 100644
--- a/packages/react-ui/src/Titles/PageTitle/__snapshots__/test.js.snap
+++ b/packages/react-ui/src/Titles/PageTitle/__snapshots__/test.js.snap
@@ -15,8 +15,8 @@ exports[`<PageTitle /> renders a H1 page title  1`] = `
 }
 
 .c0 {
-  margin: 0 auto 1rem;
   margin-bottom: 4rem;
+  margin-left: auto;
   text-align: center;
 }
 
@@ -34,12 +34,13 @@ exports[`<PageTitle /> renders a H1 page title  1`] = `
 @media (max-width:600px) {
   .c0 {
     margin-bottom: 2.4rem;
+    margin-left: auto;
   }
 }
 
 @media (max-width:600px) {
   .c1 {
-    font-size: 2.8rem;
+    font-size: 2.6rem;
   }
 }
 
@@ -74,7 +75,8 @@ exports[`<PageTitle /> renders a leftStripped shifted H1 page title  1`] = `
 }
 
 .c0 {
-  margin: 0 auto 1rem;
+  margin-bottom: 4rem;
+  margin-left: auto;
   text-align: left;
 }
 
@@ -89,6 +91,13 @@ exports[`<PageTitle /> renders a leftStripped shifted H1 page title  1`] = `
   padding-left: 3.2rem;
 }
 
+@media (max-width:600px) {
+  .c0 {
+    margin-bottom: 2.4rem;
+    margin-left: auto;
+  }
+}
+
 @media (max-width:600px) {
   .c1 {
     padding-left: 1.6rem;
@@ -97,7 +106,7 @@ exports[`<PageTitle /> renders a leftStripped shifted H1 page title  1`] = `
 
 @media (max-width:600px) {
   .c1 {
-    font-size: 2.8rem;
+    font-size: 2.6rem;
   }
 }
 
diff --git a/packages/react-ui/src/Titles/PageTitle/index.js b/packages/react-ui/src/Titles/PageTitle/index.js
index 25b508149a..a0c124bb9a 100644
--- a/packages/react-ui/src/Titles/PageTitle/index.js
+++ b/packages/react-ui/src/Titles/PageTitle/index.js
@@ -13,12 +13,14 @@ export const PageTitle = ({
   leftStripped = false,
   shift = "",
   subtitle,
+  variant,
   ...props
 }) => (
   <Header pageTitle leftStripped={leftStripped} shift={shift} {...props}>
     <StyledPageTitle leftStripped={leftStripped} as={as} shift={shift}>
       <Stripe
-        rounded
+        rounded={variant !== "primary"}
+        variant={variant}
         {...(leftStripped && { position: "left", length: "100%" })}
       />
       {children}
@@ -36,7 +38,12 @@ PageTitle.propTypes = {
   children: PropTypes.node,
   shift: PropTypes.string,
   leftStripped: PropTypes.bool,
-  subtitle: PropTypes.string
+  subtitle: PropTypes.string,
+  variant: PropTypes.string
+};
+
+PageTitle.defaultProps = {
+  variant: "secondary"
 };
 
 const StyledPageTitle = styled.h1`
@@ -61,6 +68,6 @@ const StyledPageTitle = styled.h1`
     `;
   }};
   @media (max-width: ${breakpoints.mobile}) {
-    font-size: ${fonts.sizes.headings.medium};
+    font-size: ${fonts.sizes.headings.mobileMedium};
   }
 `;
diff --git a/packages/react-ui/src/Titles/PageTitle/story.js b/packages/react-ui/src/Titles/PageTitle/story.js
index 45ae10ec5f..9d8dc810b3 100644
--- a/packages/react-ui/src/Titles/PageTitle/story.js
+++ b/packages/react-ui/src/Titles/PageTitle/story.js
@@ -11,6 +11,12 @@ export default {
 
 export const base = () => (
   <>
+    <Section>
+      <PageTitle>This is a basic page title</PageTitle>
+    </Section>
+    <Section>
+      <PageTitle variant="primary">This is a primary page title</PageTitle>
+    </Section>
     <Section>
       <PageTitle subtitle="With a basic subtitle">
         This is a page title
diff --git a/packages/react-ui/src/Titles/Title/__snapshots__/test.js.snap b/packages/react-ui/src/Titles/Title/__snapshots__/test.js.snap
index 75b620d9c1..4165497df9 100644
--- a/packages/react-ui/src/Titles/Title/__snapshots__/test.js.snap
+++ b/packages/react-ui/src/Titles/Title/__snapshots__/test.js.snap
@@ -15,7 +15,8 @@ exports[`<Title /> renders a H2 title  1`] = `
 }
 
 .c0 {
-  margin: 0 auto 1rem;
+  margin-bottom: 1.6rem;
+  margin-left: auto;
   text-align: left;
 }
 
@@ -31,6 +32,13 @@ exports[`<Title /> renders a H2 title  1`] = `
   text-align: left;
 }
 
+@media (max-width:600px) {
+  .c0 {
+    margin-bottom: 1rem;
+    margin-left: auto;
+  }
+}
+
 @media (max-width:600px) {
   .c1 {
     padding-left: 1.6rem;
@@ -74,7 +82,7 @@ exports[`<Title /> renders a shifted H2 title (the stripe should be 10rem to the
 }
 
 .c0 {
-  margin: 0 auto 1rem;
+  margin-bottom: 1.6rem;
   margin-left: -10rem;
   text-align: left;
 }
@@ -93,6 +101,7 @@ exports[`<Title /> renders a shifted H2 title (the stripe should be 10rem to the
 
 @media (max-width:600px) {
   .c0 {
+    margin-bottom: 1rem;
     margin-left: -1rem;
   }
 }
diff --git a/packages/react-ui/src/Titles/Title/index.js b/packages/react-ui/src/Titles/Title/index.js
index 5925fc1eb0..3e3b11dee7 100644
--- a/packages/react-ui/src/Titles/Title/index.js
+++ b/packages/react-ui/src/Titles/Title/index.js
@@ -13,12 +13,14 @@ export const Title = ({
   topStripped = false,
   shift = "",
   subtitle,
+  variant,
   ...props
 }) => (
   <Header leftStripped={!topStripped} shift={shift} {...props}>
     <StyledTitle leftStripped={!topStripped} as={as} shift={shift}>
       <Stripe
-        rounded
+        rounded={variant !== "primary"}
+        variant={variant}
         {...(!topStripped && { position: "left", length: "100%" })}
       />
       {children}
@@ -36,7 +38,12 @@ Title.propTypes = {
   children: PropTypes.node,
   shift: PropTypes.string,
   subtitle: PropTypes.string,
-  topStripped: PropTypes.bool
+  topStripped: PropTypes.bool,
+  variant: PropTypes.string
+};
+
+Title.defaultProps = {
+  variant: "secondary"
 };
 
 const StyledTitle = styled.h2`
diff --git a/packages/react-ui/src/Titles/Title/story.js b/packages/react-ui/src/Titles/Title/story.js
index 005a6ae18e..48ac211787 100644
--- a/packages/react-ui/src/Titles/Title/story.js
+++ b/packages/react-ui/src/Titles/Title/story.js
@@ -11,6 +11,12 @@ export default {
 
 export const base = () => (
   <>
+    <Section>
+      <Title>This is a basic title (h2)</Title>
+    </Section>
+    <Section>
+      <Title variant="primary">This is a basic primary title (h2)</Title>
+    </Section>
     <Section>
       <Title subtitle="With a subtitle which can be very very long but this is quite an excuse I made up. Because I do loooove to talk. Yup.">
         This is a title (h2)
diff --git a/packages/react-ui/src/Titles/common/Header.js b/packages/react-ui/src/Titles/common/Header.js
index 9799355f2b..37474e424a 100644
--- a/packages/react-ui/src/Titles/common/Header.js
+++ b/packages/react-ui/src/Titles/common/Header.js
@@ -3,29 +3,14 @@ import styled, { css } from "styled-components";
 import { breakpoints, spacings } from "../../theme";
 
 export const Header = styled.header`
-  margin: 0 auto ${spacings.small};
-  ${({ leftStripped, shift }) => {
-    if (leftStripped) {
-      if (shift) {
-        return css`
-          margin-left: -${shift};
-          text-align: left;
-          @media (max-width: ${breakpoints.mobile}) {
-            margin-left: -${spacings.small};
-          }
-        `;
-      }
-      return css`
-        text-align: left;
-      `;
-    }
+  ${({ leftStripped, pageTitle, shift }) => {
     return css`
-      margin-bottom: ${({ pageTitle }) =>
-        pageTitle ? spacings.larger : spacings.base};
-      text-align: center;
+      margin-bottom: ${pageTitle ? spacings.larger : spacings.base};
+      margin-left: ${shift ? `-${shift}}` : "auto"};
+      text-align: ${leftStripped ? "left" : "center"};
       @media (max-width: ${breakpoints.mobile}) {
-        margin-bottom: ${({ pageTitle }) =>
-          pageTitle ? spacings.xmedium : spacings.small};
+        margin-bottom: ${pageTitle ? spacings.xmedium : spacings.small};
+        margin-left: ${shift ? `-${spacings.small}}` : "auto"};
       }
     `;
   }};
diff --git a/packages/react-ui/src/index.js b/packages/react-ui/src/index.js
index df356be608..f3155ab391 100644
--- a/packages/react-ui/src/index.js
+++ b/packages/react-ui/src/index.js
@@ -16,6 +16,7 @@ export { Button } from "./Button";
 export { GlobalStyles } from "./GlobalStyles";
 export { Grid, RootGrid, GridCell } from "./Grid";
 export { FlatList } from "./FlatList";
+export { IconStripe } from "./IconStripe";
 export { Modal, ModalContentWrapper } from "./Modal";
 export { OverflowWrapper } from "./OverflowWrapper";
 export { ScreenReaderOnly } from "./ScreenReaderOnly";
diff --git a/packages/react-ui/src/layout/Wrapper/__snapshots__/test.js.snap b/packages/react-ui/src/layout/Wrapper/__snapshots__/test.js.snap
index 681185e5bd..6c3e4844a9 100644
--- a/packages/react-ui/src/layout/Wrapper/__snapshots__/test.js.snap
+++ b/packages/react-ui/src/layout/Wrapper/__snapshots__/test.js.snap
@@ -6,6 +6,7 @@ exports[`<Wrapper /> it renders a dark Wrapper 1`] = `
   color: #3e486e;
   border-radius: 0.6rem;
   background-color: #f2f5fa;
+  border: 1px solid #f2f5fa;
 }
 
 .c0 > *:first-child {
diff --git a/packages/react-ui/src/layout/Wrapper/index.js b/packages/react-ui/src/layout/Wrapper/index.js
index 34a8fda8b1..5fc6fb0805 100644
--- a/packages/react-ui/src/layout/Wrapper/index.js
+++ b/packages/react-ui/src/layout/Wrapper/index.js
@@ -22,7 +22,9 @@ export const Wrapper = styled.div`
     }
     if (props.variant === "dark") {
       return css`
-        background-color: ${props.theme.bgSecondary};
+        background-color: ${({ theme }) => theme.bgSecondary};
+        border: ${({ theme }) =>
+          box.border(theme.noColors ? theme.border : theme.bgSecondary)};
       `;
     }
     if (props.variant === "main") {
diff --git a/packages/react-ui/src/theme.js b/packages/react-ui/src/theme.js
index 0e4be67eb5..4eb8361354 100644
--- a/packages/react-ui/src/theme.js
+++ b/packages/react-ui/src/theme.js
@@ -75,6 +75,7 @@ export const fonts = {
     headings: {
       small: "1.8rem",
       xmedium: "2.2rem",
+      mobileMedium: "2.6rem",
       medium: "2.8rem",
       large: "3.2rem"
     },