packages/ui/src/components/_common/new-sections-edit.stories_snapshots_Default.html

@@ -3,28 +3,40 @@
     <legend class="fr-fieldset__legend" id="renseignements-legend">Renseignements</legend>
     <div class="fr-fieldset__element">
       <div>
-        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Or brut extrait (g) *<span class="fr-hint-text">Masse d’or brut en sortie de mine extrait au cours du trimestre (exemple : masse sous la forme de concentré gravimétrique).</span></label><input class="fr-input" name="input_271" id="input_271" required="" type="number" min="0">
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Or brut extrait (g)
+            <!---->
+            <!----><span class="fr-hint-text">Masse d’or brut en sortie de mine extrait au cours du trimestre (exemple : masse sous la forme de concentré gravimétrique).</span>
+          </label><input class="fr-input" name="input_271" id="input_271" required="" type="number" min="0">
           <!---->
         </div>
       </div>
     </div>
     <div class="fr-fieldset__element">
       <div>
-        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Mercure récupéré (g) *<span class="fr-hint-text">Masse en gramme de l’ensemble des produits contaminés envoyés en traitement au cours du trimestre.</span></label><input class="fr-input" name="input_670" id="input_670" required="" type="number" min="0">
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Mercure récupéré (g)
+            <!---->
+            <!----><span class="fr-hint-text">Masse en gramme de l’ensemble des produits contaminés envoyés en traitement au cours du trimestre.</span>
+          </label><input class="fr-input" name="input_670" id="input_670" required="" type="number" min="0">
           <!---->
         </div>
       </div>
     </div>
     <div class="fr-fieldset__element">
       <div>
-        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Carburant détaxé (l) *<span class="fr-hint-text">Volume total en litre de carburant détaxé consommé au cours du trimestre par les travaux réalisés sur le chantier.</span></label><input class="fr-input" name="input_74" id="input_74" required="" type="number" min="0">
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Carburant détaxé (l)
+            <!---->
+            <!----><span class="fr-hint-text">Volume total en litre de carburant détaxé consommé au cours du trimestre par les travaux réalisés sur le chantier.</span>
+          </label><input class="fr-input" name="input_74" id="input_74" required="" type="number" min="0">
           <!---->
         </div>
       </div>
     </div>
     <div class="fr-fieldset__element">
       <div>
-        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_878">Carburant conventionnel (l) *<span class="fr-hint-text">Volume total en litre de carburant conventionnel consommé au cours du trimestre par les travaux réalisés sur le chantier.</span></label><input class="fr-input" name="input_878" id="input_878" required="" type="number" min="0">
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_878">Carburant conventionnel (l)
+            <!---->
+            <!----><span class="fr-hint-text">Volume total en litre de carburant conventionnel consommé au cours du trimestre par les travaux réalisés sur le chantier.</span>
+          </label><input class="fr-input" name="input_878" id="input_878" required="" type="number" min="0">
           <!---->
         </div>
       </div>
@@ -32,7 +44,7 @@
     <div class="fr-fieldset__element">
       <div>
         <fieldset class="fr-fieldset" id="pompes" aria-labelledby="pompes-legend" style="flex-direction: column; align-items: flex-start;">
-          <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="pompes-legend">Pompes présentes *<span class="fr-hint-text">Des pompes étaient-elles présentes sur le chantier</span></legend>
+          <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="pompes-legend">Pompes présentes <span class="fr-hint-text">Des pompes étaient-elles présentes sur le chantier</span></legend>
           <div class="fr-fieldset__element">
             <div class="fr-radio-group"><input type="radio" id="pompes-0" name="pompes"><label class="fr-label" for="pompes-0">Oui
                 <!---->
@@ -48,21 +60,27 @@
     </div>
     <div class="fr-fieldset__element">
       <div>
-        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_967">Pelles actives *<span class="fr-hint-text">Nombre moyen de pelles actives au cours du trimestre utilisées sur le chantier (aménagement, exploitation, réhabilitation).</span></label><input class="fr-input" name="input_967" id="input_967" required="" type="number" min="0">
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_967">Pelles actives
+            <!---->
+            <!----><span class="fr-hint-text">Nombre moyen de pelles actives au cours du trimestre utilisées sur le chantier (aménagement, exploitation, réhabilitation).</span>
+          </label><input class="fr-input" name="input_967" id="input_967" required="" type="number" min="0">
           <!---->
         </div>
       </div>
     </div>
     <div class="fr-fieldset__element">
       <div>
-        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_25">Effectifs *<span class="fr-hint-text">Nombre moyen de salariés sur le chantier au cours du trimestre.</span></label><input class="fr-input" name="input_25" id="input_25" required="" type="number" min="0">
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_25">Effectifs
+            <!---->
+            <!----><span class="fr-hint-text">Nombre moyen de salariés sur le chantier au cours du trimestre.</span>
+          </label><input class="fr-input" name="input_25" id="input_25" required="" type="number" min="0">
           <!---->
         </div>
       </div>
     </div>
     <div class="fr-fieldset__element">
       <div>
-        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_128">Dépenses relatives à la protection de l’environnement (euros)
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_128">Dépenses relatives à la protection de l’environnement (euros) (optionnel)
             <!----><span class="fr-hint-text">Montant en euros des investissements consentis au cours du trimestre listés à l’<a href="https://www.legifrance.gouv.fr/affichCodeArticle.do?idArticle=LEGIARTI000021850940&amp;cidTexte=LEGITEXT000006069569" target="_blank" rel="noopener noreferrer">article 318 C de l’annexe II du code général des impôts</a>. Afin de bénéficier des déductions fiscales afférentes, les justificatifs attestant de la réalisation effective des investissements sont susceptibles de vous êtres demandés par l’administration.</span>
           </label><input class="fr-input" name="input_128" id="input_128" type="number" min="0">
           <!---->

packages/ui/src/components/_common/new-sections-edit.stories_snapshots_ParticipationDuPublic.html

@@ -3,7 +3,10 @@
     <!---->
     <div class="fr-fieldset__element">
       <div>
-        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Nombre de jours de la participation du public *<span class="fr-hint-text"></span></label><input class="fr-input" name="input_271" id="input_271" required="" type="number" min="0" aria-describedby="input_271-info" value="12">
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Nombre de jours de la participation du public
+            <!---->
+            <!----><span class="fr-hint-text"></span>
+          </label><input class="fr-input" name="input_271" id="input_271" required="" type="number" min="0" aria-describedby="input_271-info" value="12">
           <p id="input_271-info" class="fr-info-text">Du 12-01-2024 au 23-01-2024 (inclus)</p>
         </div>
       </div>

packages/ui/src/components/_common/new-sections-edit.stories_snapshots_TousLesElementsRemplis.html

@@ -3,40 +3,56 @@
     <!---->
     <div class="fr-fieldset__element">
       <div>
-        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">integer *<span class="fr-hint-text">Description pour integer</span></label><input class="fr-input" name="input_271" id="input_271" required="" type="number" min="0" value="12">
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">integer
+            <!---->
+            <!----><span class="fr-hint-text">Description pour integer</span>
+          </label><input class="fr-input" name="input_271" id="input_271" required="" type="number" min="0" value="12">
           <!---->
         </div>
       </div>
     </div>
     <div class="fr-fieldset__element">
       <div>
-        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">number *<span class="fr-hint-text">Description pour number</span></label><input class="fr-input" name="input_670" id="input_670" required="" type="number" min="0" value="8.2">
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">number
+            <!---->
+            <!----><span class="fr-hint-text">Description pour number</span>
+          </label><input class="fr-input" name="input_670" id="input_670" required="" type="number" min="0" value="8.2">
           <!---->
         </div>
       </div>
     </div>
     <div class="fr-fieldset__element">
       <div>
-        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">date *<span class="fr-hint-text">Description pour date</span></label><input class="fr-input" name="input_74" id="input_74" required="" type="date" value="2023-09-01">
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">date
+            <!----><span class="fr-hint-text">au format jj/mm/yyyy</span><span class="fr-hint-text">Description pour date</span>
+          </label><input class="fr-input" name="input_74" id="input_74" required="" type="date" value="2023-09-01">
           <!---->
         </div>
       </div>
     </div>
     <div class="fr-fieldset__element">
       <div>
-        <div class="fr-input-group"><label class="fr-label" for="textarea_878">textarea *<span class="fr-hint-text">Description pour textarea</span></label><textarea class="fr-input" name="textarea_878" id="textarea_878" required="" value="ceci est un textarea"></textarea></div>
+        <div class="fr-input-group"><label class="fr-label" for="textarea_878">textarea
+            <!----><span class="fr-hint-text">Description pour textarea</span>
+          </label><textarea class="fr-input" name="textarea_878" id="textarea_878" required="" value="ceci est un textarea"></textarea></div>
       </div>
     </div>
     <div class="fr-fieldset__element">
       <div>
-        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_967">text *<span class="fr-hint-text">Description pour text</span></label><input class="fr-input" name="input_967" id="input_967" required="" type="text" value="ceci est un text">
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_967">text
+            <!---->
+            <!----><span class="fr-hint-text">Description pour text</span>
+          </label><input class="fr-input" name="input_967" id="input_967" required="" type="text" value="ceci est un text">
           <!---->
         </div>
       </div>
     </div>
     <div class="fr-fieldset__element">
       <div>
-        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_25">url *<span class="fr-hint-text">Description pour url</span></label><input class="fr-input" name="input_25" id="input_25" required="" type="text" value="https://google.fr">
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_25">url
+            <!---->
+            <!----><span class="fr-hint-text">Description pour url</span>
+          </label><input class="fr-input" name="input_25" id="input_25" required="" type="text" value="https://google.fr">
           <!---->
         </div>
       </div>
@@ -44,7 +60,7 @@
     <div class="fr-fieldset__element">
       <div>
         <fieldset class="fr-fieldset" id="radio" aria-labelledby="radio-legend" style="flex-direction: column; align-items: flex-start;">
-          <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio-legend">radio *<span class="fr-hint-text">Description pour radio</span></legend>
+          <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio-legend">radio <span class="fr-hint-text">Description pour radio</span></legend>
           <div class="fr-fieldset__element">
             <div class="fr-radio-group"><input type="radio" id="radio-0" checked="" name="radio"><label class="fr-label" for="radio-0">Oui
                 <!---->
@@ -87,7 +103,7 @@
     </div>
     <div class="fr-fieldset__element">
       <div>
-        <div class="fr-select-group"><label class="fr-label" for="select_453">select *<span class="fr-hint-text">Description pour select</span></label><select class="fr-select" id="select_453" aria-label="select" name="select_453" value="deg">
+        <div class="fr-select-group"><label class="fr-label" for="select_453">select <span class="fr-hint-text">Description pour select</span></label><select class="fr-select" id="select_453" aria-label="select" name="select_453" value="deg">
             <option selected="" value="deg">degré</option>
             <option value="gon">grade</option>
             <option value="km3">kilomètre cube</option>

packages/ui/src/components/_common/new-sections-edit.stories_snapshots_TousLesElementsRequis.html

@@ -3,40 +3,56 @@
     <!---->
     <div class="fr-fieldset__element">
       <div>
-        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">integer *<span class="fr-hint-text">Description pour integer</span></label><input class="fr-input" name="input_271" id="input_271" required="" type="number" min="0">
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">integer
+            <!---->
+            <!----><span class="fr-hint-text">Description pour integer</span>
+          </label><input class="fr-input" name="input_271" id="input_271" required="" type="number" min="0">
           <!---->
         </div>
       </div>
     </div>
     <div class="fr-fieldset__element">
       <div>
-        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">number *<span class="fr-hint-text">Description pour number</span></label><input class="fr-input" name="input_670" id="input_670" required="" type="number" min="0">
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">number
+            <!---->
+            <!----><span class="fr-hint-text">Description pour number</span>
+          </label><input class="fr-input" name="input_670" id="input_670" required="" type="number" min="0">
           <!---->
         </div>
       </div>
     </div>
     <div class="fr-fieldset__element">
       <div>
-        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">date *<span class="fr-hint-text">Description pour date</span></label><input class="fr-input" name="input_74" id="input_74" required="" type="date">
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">date
+            <!----><span class="fr-hint-text">au format jj/mm/yyyy</span><span class="fr-hint-text">Description pour date</span>
+          </label><input class="fr-input" name="input_74" id="input_74" required="" type="date">
           <!---->
         </div>
       </div>
     </div>
     <div class="fr-fieldset__element">
       <div>
-        <div class="fr-input-group"><label class="fr-label" for="textarea_878">textarea *<span class="fr-hint-text">Description pour textarea</span></label><textarea class="fr-input" name="textarea_878" id="textarea_878" required=""></textarea></div>
+        <div class="fr-input-group"><label class="fr-label" for="textarea_878">textarea
+            <!----><span class="fr-hint-text">Description pour textarea</span>
+          </label><textarea class="fr-input" name="textarea_878" id="textarea_878" required=""></textarea></div>
       </div>
     </div>
     <div class="fr-fieldset__element">
       <div>
-        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_967">text *<span class="fr-hint-text">Description pour text</span></label><input class="fr-input" name="input_967" id="input_967" required="" type="text">
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_967">text
+            <!---->
+            <!----><span class="fr-hint-text">Description pour text</span>
+          </label><input class="fr-input" name="input_967" id="input_967" required="" type="text">
           <!---->
         </div>
       </div>
     </div>
     <div class="fr-fieldset__element">
       <div>
-        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_25">url *<span class="fr-hint-text">Description pour url</span></label><input class="fr-input" name="input_25" id="input_25" required="" type="text">
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_25">url
+            <!---->
+            <!----><span class="fr-hint-text">Description pour url</span>
+          </label><input class="fr-input" name="input_25" id="input_25" required="" type="text">
           <!---->
         </div>
       </div>
@@ -44,7 +60,7 @@
     <div class="fr-fieldset__element">
       <div>
         <fieldset class="fr-fieldset" id="radio" aria-labelledby="radio-legend" style="flex-direction: column; align-items: flex-start;">
-          <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio-legend">radio *<span class="fr-hint-text">Description pour radio</span></legend>
+          <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio-legend">radio <span class="fr-hint-text">Description pour radio</span></legend>
           <div class="fr-fieldset__element">
             <div class="fr-radio-group"><input type="radio" id="radio-0" name="radio"><label class="fr-label" for="radio-0">Oui
                 <!---->
@@ -82,7 +98,7 @@
     </div>
     <div class="fr-fieldset__element">
       <div>
-        <div class="fr-select-group"><label class="fr-label" for="select_453">select *<span class="fr-hint-text">Description pour select</span></label><select class="fr-select" id="select_453" aria-label="select" name="select_453">
+        <div class="fr-select-group"><label class="fr-label" for="select_453">select <span class="fr-hint-text">Description pour select</span></label><select class="fr-select" id="select_453" aria-label="select" name="select_453">
             <option value="deg">degré</option>
             <option value="gon">grade</option>
             <option value="km3">kilomètre cube</option>

packages/ui/src/components/_common/new-sections-edit.stories_snapshots_TousLesElementsVidesOptionnels.html

@@ -3,7 +3,7 @@
     <!---->
     <div class="fr-fieldset__element">
       <div>
-        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">integer
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">integer (optionnel)
             <!----><span class="fr-hint-text">Description pour integer</span>
           </label><input class="fr-input" name="input_271" id="input_271" type="number" min="0">
           <!---->
@@ -12,7 +12,7 @@
     </div>
     <div class="fr-fieldset__element">
       <div>
-        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">number
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">number (optionnel)
             <!----><span class="fr-hint-text">Description pour number</span>
           </label><input class="fr-input" name="input_670" id="input_670" type="number" min="0">
           <!---->
@@ -21,23 +21,19 @@
     </div>
     <div class="fr-fieldset__element">
       <div>
-        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">date
-            <!----><span class="fr-hint-text">Description pour date</span>
-          </label><input class="fr-input" name="input_74" id="input_74" type="date">
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">date (optionnel)<span class="fr-hint-text">au format jj/mm/yyyy</span><span class="fr-hint-text">Description pour date</span></label><input class="fr-input" name="input_74" id="input_74" type="date">
           <!---->
         </div>
       </div>
     </div>
     <div class="fr-fieldset__element">
       <div>
-        <div class="fr-input-group"><label class="fr-label" for="textarea_878">textarea
-            <!----><span class="fr-hint-text">Description pour textarea</span>
-          </label><textarea class="fr-input" name="textarea_878" id="textarea_878"></textarea></div>
+        <div class="fr-input-group"><label class="fr-label" for="textarea_878">textarea (optionnel)<span class="fr-hint-text">Description pour textarea</span></label><textarea class="fr-input" name="textarea_878" id="textarea_878"></textarea></div>
       </div>
     </div>
     <div class="fr-fieldset__element">
       <div>
-        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_967">text
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_967">text (optionnel)
             <!----><span class="fr-hint-text">Description pour text</span>
           </label><input class="fr-input" name="input_967" id="input_967" type="text">
           <!---->
@@ -46,7 +42,7 @@
     </div>
     <div class="fr-fieldset__element">
       <div>
-        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_25">url
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_25">url (optionnel)
             <!----><span class="fr-hint-text">Description pour url</span>
           </label><input class="fr-input" name="input_25" id="input_25" type="text">
           <!---->
@@ -56,7 +52,7 @@
     <div class="fr-fieldset__element">
       <div>
         <fieldset class="fr-fieldset" id="radio" aria-labelledby="radio-legend" style="flex-direction: column; align-items: flex-start;">
-          <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio-legend">radio *<span class="fr-hint-text">Description pour radio</span></legend>
+          <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio-legend">radio <span class="fr-hint-text">Description pour radio</span></legend>
           <div class="fr-fieldset__element">
             <div class="fr-radio-group"><input type="radio" id="radio-0" name="radio"><label class="fr-label" for="radio-0">Oui
                 <!---->
@@ -94,7 +90,7 @@
     </div>
     <div class="fr-fieldset__element">
       <div>
-        <div class="fr-select-group"><label class="fr-label" for="select_453">select <span class="fr-hint-text">Description pour select</span></label><select class="fr-select" id="select_453" aria-label="select" name="select_453">
+        <div class="fr-select-group"><label class="fr-label" for="select_453">select (optionnel)<span class="fr-hint-text">Description pour select</span></label><select class="fr-select" id="select_453" aria-label="select" name="select_453">
             <option value="deg">degré</option>
             <option value="gon">grade</option>
             <option value="km3">kilomètre cube</option>

packages/ui/src/components/_common/new-sections-edit.stories_snapshots_VolumeGranulatsExtrait.html

@@ -3,7 +3,10 @@
     <!---->
     <div class="fr-fieldset__element">
       <div>
-        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Volume de granulats marins extrait (m3) *<span class="fr-hint-text">Volume de granulats marins extrait, en mètre cube, au cours de l'année.</span></label><input class="fr-input" name="input_271" id="input_271" required="" type="number" min="0" aria-describedby="input_271-info" value="12">
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Volume de granulats marins extrait (m3)
+            <!---->
+            <!----><span class="fr-hint-text">Volume de granulats marins extrait, en mètre cube, au cours de l'année.</span>
+          </label><input class="fr-input" name="input_271" id="input_271" required="" type="number" min="0" aria-describedby="input_271-info" value="12">
           <p id="input_271-info" class="fr-info-text">Soit l’équivalent de 18 tonnes</p>
         </div>
       </div>

packages/ui/src/components/_common/new-sections-edit.tsx

@@ -19,7 +19,7 @@ interface Props {
   etapeDate: CaminoDate | null
 }
 
-export const SectionsEdit = defineComponent<Props>(props => {
+export const NewSectionsEdit = defineComponent<Props>(props => {
   const [sectionsWithValue, setSectionsWithValue] = useState<SectionWithValue[]>([])
 
   watch(
@@ -75,7 +75,7 @@ export const SectionsEdit = defineComponent<Props>(props => {
   )
 })
 // @ts-ignore waiting for https://github.com/vuejs/core/issues/7833
-SectionsEdit.props = ['sectionsWithValue', 'completeUpdate', 'etapeDate']
+NewSectionsEdit.props = ['sectionsWithValue', 'completeUpdate', 'etapeDate']
 
 interface SectionElementEditProps {
   element: ElementWithValue

packages/ui/src/components/_common/nom.stories_snapshots_AlreadyUppercase.html

-<p class="h6 bold mb-0">Nom minuscule</p>
\ No newline at end of file
+<p class="mb-0">Nom minuscule</p>
\ No newline at end of file

packages/ui/src/components/_common/nom.stories_snapshots_Default.html

-<p class="h6 bold mb-0">Indéfini</p>
\ No newline at end of file
+<p class="mb-0">Indéfini</p>
\ No newline at end of file

packages/ui/src/components/_common/nom.stories_snapshots_Lowercase.html

-<p class="h6 bold mb-0">Nom minuscule</p>
\ No newline at end of file
+<p class="mb-0">Nom minuscule</p>
\ No newline at end of file

packages/ui/src/components/_common/nom.tsx

@@ -7,5 +7,5 @@ interface Props {
 export const Nom: FunctionalComponent<Props> = props => {
   const nom = capitalize(props.nom ?? 'indéfini')
 
-  return <p class="h6 bold mb-0">{nom}</p>
+  return <p class="mb-0">{nom}</p>
 }

packages/ui/src/components/_common/page-with-filters.tsx

+import { fr } from '@codegouvfr/react-dsfr'
 import { FunctionalComponent } from 'vue'
 import type { JSX } from 'vue/jsx-runtime'
 type Props = {
@@ -7,11 +8,14 @@ type Props = {
 
 export const PageWithFilters: FunctionalComponent<Props> = props => {
   return (
-    <div class="fr-container--fluid" style={{ overflow: 'visible' }}>
-      <div class="fr-grid-row">
-        <div class="fr-col-12 fr-col-md-3">{props.filtres}</div>
-
-        <div class="fr-col-12 fr-col-md-9 fr-pt-3w fr-pr-2w fr-pb-3w">{props.content}</div>
+    <div class={fr.cx('fr-container--fluid')} style={{ overflow: 'visible' }}>
+      <div class={fr.cx('fr-grid-row')}>
+        <div class={fr.cx('fr-col-12', 'fr-col-md-9', 'fr-pt-3w', 'fr-pr-2w', 'fr-pb-3w')} aria-live="polite">
+          {props.content}
+        </div>
+        <div class={fr.cx('fr-col-12', 'fr-col-md-3')} style={{ order: -1 }}>
+          {props.filtres}
+        </div>
       </div>
     </div>
   )

packages/ui/src/components/_common/substance-legale-typeahead.stories_snapshots_Default.html

 <div id="typeahead_substances_271_wrapper" class="_typeahead_8eddf1">
-  <div class="flex"><input id="typeahead_substances_271" type="text" name="typeahead_substances_271" class="fr-input" placeholder="" autocomplete="off" value=""></div>
-  <div class="_typeahead-list_8eddf1">
-    <div class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1"><span>bauxite</span></div>
-    <div class="_typeahead-list-item_8eddf1 "><span>or</span></div>
-  </div>
+  <div class="flex"><input id="typeahead_substances_271" type="text" title="" name="typeahead_substances_271" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_substances_271-control" aria-activedescendant="typeahead_substances_271-control-0" aria-expanded="true" aria-autocomplete="list" value=""></div>
+  <ul class="_typeahead-list_8eddf1 _typeahead-list--visible_8eddf1" tabindex="-1" id="typeahead_substances_271-control" role="listbox">
+    <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="true" id="typeahead_substances_271-control-0"><span>bauxite</span></li>
+    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_substances_271-control-1"><span>or</span></li>
+  </ul>
 </div>
\ No newline at end of file

packages/ui/src/components/_common/substance-legale-typeahead.stories_snapshots_WithSubstanceTypeAlreadySelected.html

 <div id="typeahead_substances_271_wrapper" class="_typeahead_8eddf1">
-  <div class="flex"><input id="typeahead_substances_271" type="text" name="typeahead_substances_271" class="fr-input" placeholder="" autocomplete="off" value="or"></div>
-  <!---->
+  <div class="flex"><input id="typeahead_substances_271" type="text" title="" name="typeahead_substances_271" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_substances_271-control" aria-activedescendant="typeahead_substances_271-control" aria-expanded="false" aria-autocomplete="list" value="or"></div>
+  <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_substances_271-control" role="listbox">
+    <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_substances_271-control-0"><span>bauxite</span></li>
+  </ul>
 </div>
\ No newline at end of file

packages/ui/src/components/_common/titre-reference-select.stories_snapshots_WithValues.html

@@ -16,7 +16,7 @@
       </select>
     </div>
     <div class="fr-input-group fr-col fr-ml-2v fr-mb-0" style="margin-bottom: 0px;">
-      <!----><input class="fr-input" name="input_670" id="input_670" type="text" value="REF1">
+      <!----><input class="fr-input" name="input_670" id="input_670" required="" type="text" value="REF1">
       <!---->
     </div><button class="fr-btn fr-btn--tertiary fr-btn--md fr-icon-delete-bin-line fr-ml-2v" title="Supprimer la référence 1" aria-label="Supprimer la référence 1" type="button">
       <!---->
@@ -39,7 +39,7 @@
       </select>
     </div>
     <div class="fr-input-group fr-col fr-ml-2v fr-mb-0" style="margin-bottom: 0px;">
-      <!----><input class="fr-input" name="input_878" id="input_878" type="text" value="REF2">
+      <!----><input class="fr-input" name="input_878" id="input_878" required="" type="text" value="REF2">
       <!---->
     </div><button class="fr-btn fr-btn--tertiary fr-btn--md fr-icon-delete-bin-line fr-ml-2v" title="Supprimer la référence 2" aria-label="Supprimer la référence 2" type="button">
       <!---->

packages/ui/src/components/_common/titre-reference-select.tsx

@@ -44,8 +44,22 @@ export const TitreReferenceSelect = defineComponent<Props>(props => {
       </label>
       {references.value.map((reference, index) => (
         <div key={index} class="fr-grid-row fr-grid-row--middle fr-mb-3v">
-          <DsfrSelect class="fr-col fr-mb-0" legend={{ main: '', visible: false }} initialValue={reference.referenceTypeId} items={referencesTypes} valueChanged={onReferenceChanged(index)} />
-          <DsfrInput class="fr-col fr-ml-2v fr-mb-0" type={{ type: 'text' }} legend={{ main: '', visible: false }} initialValue={reference.nom} valueChanged={onReferenceValueChanged(index)} />
+          <DsfrSelect
+            class="fr-col fr-mb-0"
+            required={true}
+            legend={{ main: '', visible: false }}
+            initialValue={reference.referenceTypeId}
+            items={referencesTypes}
+            valueChanged={onReferenceChanged(index)}
+          />
+          <DsfrInput
+            required={true}
+            class="fr-col fr-ml-2v fr-mb-0"
+            type={{ type: 'text' }}
+            legend={{ main: '', visible: false }}
+            initialValue={reference.nom}
+            valueChanged={onReferenceValueChanged(index)}
+          />
           <DsfrButtonIcon class="fr-ml-2v" icon="fr-icon-delete-bin-line" onClick={referenceRemove(index)} title={`Supprimer la référence ${index + 1}`} buttonType="tertiary" />
         </div>
       ))}

packages/ui/src/components/_common/titre-type-select.stories_snapshots_AlreadySelected.html

-<div class="fr-select-group"><label class="fr-label" for="select_271">Domaine *
+<div class="fr-select-group"><label class="fr-label" for="select_271">Domaine
     <!---->
   </label><select class="fr-select" id="select_271" aria-label="Domaine" name="select_271" value="m">
     <option selected="" value="m">minéraux et métaux</option>
     <option disabled="" hidden="" value="">Selectionnez une option</option>
   </select></div>
-<div class="fr-select-group"><label class="fr-label" for="select_670">Type *
+<div class="fr-select-group"><label class="fr-label" for="select_670">Type
     <!---->
   </label><select class="fr-select" id="select_670" aria-label="Type" name="select_670" value="ar">
     <option selected="" value="ar">autorisation de recherches</option>

packages/ui/src/components/_common/titre-type-select.stories_snapshots_Default.html

-<div class="fr-select-group"><label class="fr-label" for="select_271">Domaine *
+<div class="fr-select-group"><label class="fr-label" for="select_271">Domaine
     <!---->
   </label><select class="fr-select" id="select_271" aria-label="Domaine" name="select_271">
     <option value="c">carrières</option>

packages/ui/src/components/_common/titre-type-select.stories_snapshots_Entreprise.html

-<div class="fr-select-group"><label class="fr-label" for="select_670">Domaine *
+<div class="fr-select-group"><label class="fr-label" for="select_670">Domaine
     <!---->
   </label><select class="fr-select" id="select_670" aria-label="Domaine" name="select_670" value="m">
     <option value="m" selected="">minéraux et métaux</option>
     <option disabled="" hidden="" value="">Selectionnez une option</option>
   </select></div>
-<div class="fr-select-group"><label class="fr-label" for="select_74">Type *
+<div class="fr-select-group"><label class="fr-label" for="select_74">Type
     <!---->
   </label><select class="fr-select" id="select_74" aria-label="Type" name="select_74">
     <option value="ar">autorisation de recherches</option>