diff --git a/packages/ui/src/components/_common/downloads.tsx b/packages/ui/src/components/_common/downloads.tsx
index b16da074027d1239d23fc2839361a94ac40267f7..ba11182e738eee1e1e68f65158e79b2cb5b70a01 100644
--- a/packages/ui/src/components/_common/downloads.tsx
+++ b/packages/ui/src/components/_common/downloads.tsx
@@ -117,7 +117,14 @@ const DownloadPopup = defineComponent(<T extends DownloadRestRoutes>(props: Down
   }
   const content = () => (
     <form>
-      <DsfrInputRadio legend={{ main: 'Choisissez le format du fichier que vous souhaitez' }} required={true} orientation="horizontal" valueChanged={fileTypeSelected} elements={items} />
+      <DsfrInputRadio
+        id="file_format"
+        legend={{ main: 'Choisissez le format du fichier que vous souhaitez' }}
+        required={true}
+        orientation="horizontal"
+        valueChanged={fileTypeSelected}
+        elements={items}
+      />
       <Alert small={true} type="info" title={'Une fois le téléchargement effectué, cette fenêtre se fermera automatiquement'} />
     </form>
   )
diff --git a/packages/ui/src/components/_common/dsfr-perimetre-table.tsx b/packages/ui/src/components/_common/dsfr-perimetre-table.tsx
index e2b6b7f8920bc68f1b688f665fe83485b842e3c8..4df6a237c79259353c2d6eceda663d4bf73dc736 100644
--- a/packages/ui/src/components/_common/dsfr-perimetre-table.tsx
+++ b/packages/ui/src/components/_common/dsfr-perimetre-table.tsx
@@ -147,7 +147,7 @@ const TableForages: FunctionalComponent<NotNullableKeys<Pick<Props, 'geo_systeme
 export const TabCaminoTable = defineComponent<Props>(props => {
   return () => (
     <div style={{ display: 'flex', flexDirection: 'column' }}>
-      <GeoSystemeTypeahead disabled={true} geoSystemeId={props.geo_systeme_id} />
+      <GeoSystemeTypeahead id={props.geo_systeme_id} disabled={true} geoSystemeId={props.geo_systeme_id} />
 
       <TablePoints caption="Points" {...props} />
 
diff --git a/packages/ui/src/components/_common/dsfr-perimetre.stories.tsx b/packages/ui/src/components/_common/dsfr-perimetre.stories.tsx
index 27d9b2e8e9b9636fc370fde49248b91aab792ec2..642bad974402bf81073aee806bd1e2d32706d806 100644
--- a/packages/ui/src/components/_common/dsfr-perimetre.stories.tsx
+++ b/packages/ui/src/components/_common/dsfr-perimetre.stories.tsx
@@ -59,6 +59,7 @@ export const Default: StoryFn = () => (
   <>
     <MapPattern />
     <DsfrPerimetre
+      id="test"
       titreTypeId="axm"
       perimetre={{
         geojson4326_perimetre,
@@ -126,6 +127,7 @@ export const NoNeighbors: StoryFn = () => (
   <>
     <MapPattern />
     <DsfrPerimetre
+      id="test"
       titreTypeId="axm"
       perimetre={{
         geojson4326_perimetre,
@@ -171,6 +173,7 @@ export const PolygonWithLacune: StoryFn = () => (
   <>
     <MapPattern />
     <DsfrPerimetre
+      id="test"
       titreTypeId="axm"
       perimetre={{
         geojson4326_perimetre: perimetreWithLacune,
@@ -213,6 +216,7 @@ export const Big: StoryFn = () => (
   <>
     <MapPattern />
     <DsfrPerimetre
+      id="test"
       titreTypeId="axm"
       perimetre={{
         geojson4326_perimetre: bigGeoJson,
@@ -279,6 +283,7 @@ export const Multiple: StoryFn = () => (
   <>
     <MapPattern />
     <DsfrPerimetre
+      id="test"
       titreTypeId="axm"
       perimetre={{
         geojson4326_perimetre: multiplePolygone,
@@ -367,6 +372,7 @@ export const MultiplePolygonWithLacuneTableau: StoryFn = () => (
   <>
     <MapPattern />
     <DsfrPerimetre
+      id="test"
       titreTypeId="axm"
       perimetre={{
         geojson4326_perimetre: multiplePolygoneWithLacune,
@@ -404,6 +410,7 @@ export const CustomPoints: StoryFn = () => (
   <>
     <MapPattern />
     <DsfrPerimetre
+      id="test"
       titreTypeId="axm"
       perimetre={{
         geojson4326_perimetre,
@@ -431,6 +438,7 @@ export const CustomPointsWithoutNameAndDesc: StoryFn = () => (
   <>
     <MapPattern />
     <DsfrPerimetre
+      id="test"
       titreTypeId="axm"
       perimetre={{
         geojson4326_perimetre,
@@ -453,6 +461,7 @@ export const CustomPointsWithAnotherGeoSysteme: StoryFn = () => (
   <>
     <MapPattern />
     <DsfrPerimetre
+      id="test"
       titreTypeId="axm"
       perimetre={{
         geojson4326_perimetre,
@@ -479,6 +488,7 @@ export const CustomPointsWithAnotherLegacyGeoSysteme: StoryFn = () => (
   <>
     <MapPattern />
     <DsfrPerimetre
+      id="test"
       titreTypeId="axm"
       perimetre={{
         geojson4326_perimetre,
@@ -503,6 +513,7 @@ export const CustomPointsWithAnotherLegacyGeoSysteme: StoryFn = () => (
 
 export const WithForages: StoryFn = () => (
   <DsfrPerimetre
+    id="test"
     titreTypeId="pxm"
     perimetre={{
       geojson4326_perimetre,
diff --git a/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_Big.html b/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_Big.html
index be6faa83090f9a26c18bfe43e9987d67dd330492..dd1755f3d13543df15fd3c1398346159ae1d251f 100644
--- a/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_Big.html
+++ b/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_Big.html
@@ -300,13 +300,14 @@
 <div>
   <div class="fr-tabs" style="--tabs-height: 0px;">
     <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-      <li role="presentation"><button id="tabpanel-carte-271" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Carte" aria-selected="true" aria-controls="tabpanel-carte-271-panel">Carte</button></li>
-      <li role="presentation"><button id="tabpanel-points-271" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Tableau" aria-selected="false" aria-controls="tabpanel-points-271-panel">Tableau</button></li>
+      <li role="presentation"><button id="tabpanel-carte-test" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Carte" aria-selected="true" aria-controls="tabpanel-carte-test-panel">Carte</button></li>
+      <li role="presentation"><button id="tabpanel-points-test" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Tableau" aria-selected="false" aria-controls="tabpanel-points-test-panel">Tableau</button></li>
     </ul>
-    <div id="tabpanel-carte-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-carte-271" tabindex="0">
+    <div id="tabpanel-carte-test-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-carte-test" tabindex="0">
       <div style="display: flex; flex-direction: column;">
-        <mocked-map perimetre="[object Object]" titretypeid="axm" style="min-height: 400px;" class="fr-mb-1w" maxmarkers="20" neighbours="[object Object]">
+        <mocked-map perimetre="[object Object]" id="test" titretypeid="axm" style="min-height: 400px;" class="fr-mb-1w" maxmarkers="20" neighbours="[object Object]">
           <perimetre>{"geojson4326_perimetre":{"type":"Feature","properties":{},"geometry":{"type":"MultiPolygon","coordinates":[[[[-4.370364497124209,48.53380508608616],[-4.373271574712479,48.47151134163559],[-4.03753485335386,48.579164636474836],[-3.89919702975027,48.603980178934115],[-3.860482328708233,48.62511389817695],[-3.858436311611334,48.629031691751045],[-3.862157259991486,48.633014015139416],[-3.870281882041237,48.63550010399696],[-3.879786359001045,48.639113643702565],[-3.895430188480503,48.64455770816115],[-3.89902273351368,48.64822789311303],[-3.902536979616769,48.654435032933826],[-3.906528075174153,48.66061643462235],[-3.904489574558275,48.6643307169305],[-3.89647573803132,48.66601900245078],[-3.890673665115296,48.667020244464325],[-3.890721315690864,48.67062455977177],[-3.892950905315848,48.67088770685571],[-3.898005277721187,48.6723935639094],[-3.8992413951649,48.67074624589731],[-3.903300809713803,48.67034264689684],[-3.907548440632195,48.66910635173531],[-3.91185396569359,48.669954398127075],[-3.914635548862354,48.67322568941628],[-3.920575104032537,48.67458696237509],[-3.924157593611878,48.669749821082725],[-3.927138109422188,48.66538094626539],[-3.927802453245391,48.66178827244388],[-3.92880004801291,48.660065331624466],[-3.930674658925236,48.657424523021],[-3.934385020441046,48.65730036039394],[-3.940574301992641,48.65682750256307],[-3.949892212356874,48.653210569309856],[-3.9518951695476,48.64983646195122],[-3.95135848409069,48.646306571150944],[-3.952791103114349,48.64456097348628],[-3.954311041643234,48.64535110107629],[-3.957178207067545,48.65093506946735],[-3.95632686509049,48.654756209794456],[-3.954939197043658,48.66049485799891],[-3.958264581105623,48.66351217516115],[-3.954301077151103,48.665175330569724],[-3.958113788215813,48.66678821578858],[-3.958288500972019,48.67004622329816],[-3.953583216471425,48.67102223996598],[-3.952154912225681,48.67280542236],[-3.954601922703807,48.67354649576719],[-3.957150323952388,48.6728667311387],[-3.962232217223142,48.674085603023535],[-3.96509885038279,48.67647290565392],[-3.968196892552599,48.67354977814375],[-3.970552500285286,48.67336152037275],[-3.971907150463719,48.67429537178488],[-3.971687730880199,48.67565139942766],[-3.968925351937541,48.67998621214178],[-3.97276835094199,48.68681279071675],[-3.969905040239144,48.687617856017994],[-3.967785856011854,48.69274164929216],[-3.97050395358365,48.693904041872074],[-3.974129066864182,48.69665141578885],[-3.976827175680581,48.699084231748806],[-3.973964059500176,48.70207052891004],[-3.97557715354335,48.70449012698265],[-3.972337757698344,48.70582333762662],[-3.974038535718974,48.710344199247295],[-3.972061362590358,48.71168433267898],[-3.969407494937729,48.71919463600953],[-3.966114995158957,48.719188628020184],[-3.964815895310649,48.72248973384656],[-3.968123622922862,48.72216808659624],[-3.970117554054281,48.7239825094888],[-3.971030085004171,48.72531725688056],[-3.974105493634571,48.72442714535237],[-3.977130032296356,48.72223266964199],[-3.98038470744471,48.72282149601802],[-3.98267568678471,48.72451484026706],[-3.983159793997456,48.72623219482621],[-3.985655519886893,48.726898196761965],[-3.988412331317411,48.727004809776105],[-3.990251104366354,48.72588975599552],[-3.992106999472123,48.723541171653366],[-3.992308257471176,48.72204072794657],[-3.990818477440011,48.71838055340067],[-3.993241558794496,48.715311146944074],[-3.99726181945054,48.71273584775902],[-4.000886986292233,48.71141716999743],[-4.005573266114372,48.715195490443925],[-4.004640753163968,48.716989015759715],[-4.007861713401779,48.72044675798358],[-4.009590286562232,48.72068101995395],[-4.012907971574204,48.71865165832863],[-4.010881803078078,48.716872551149415],[-4.013298574720932,48.713765123429766],[-4.018283788022766,48.71146515516518],[-4.02502266800395,48.710486602386844],[-4.029102910364339,48.7109751516783],[-4.032895375568785,48.712496949149184],[-4.034013864663466,48.71364906002572],[-4.035203599079426,48.71386049099469],[-4.036426674181452,48.711761570746404],[-4.035857818689737,48.70935978588029],[-4.037836186006247,48.70536884991981],[-4.040876440962449,48.70331706201061],[-4.042661395770205,48.70267658451317],[-4.044522857875245,48.70264835316387],[-4.048746772595955,48.70536952092104],[-4.051782617787177,48.70458102418029],[-4.053387641319855,48.70237110662314],[-4.054960885021424,48.69887510664347],[-4.057098904957046,48.688336149296134],[-4.047492224129947,48.6881905546806],[-4.04264615919883,48.688356681641565],[-4.05570877851515,48.685187990084636],[-4.061384711067841,48.687678086132514],[-4.063856568443375,48.68626486757381],[-4.069006699782528,48.687977416990556],[-4.066114156101222,48.68600063748565],[-4.065917761777147,48.68383188367652],[-4.06536435070835,48.68281963355705],[-4.062811851052143,48.68243638561189],[-4.063604286352126,48.680735563101265],[-4.061249339782617,48.68019915458731],[-4.060491984152113,48.67893668983929],[-4.056630622211962,48.67523642323898],[-4.055350396131191,48.67179995101334],[-4.057224936686009,48.670572879663034],[-4.057969445321888,48.675068847630506],[-4.059622862128396,48.675122344607715],[-4.06024682153259,48.67613145254186],[-4.063213863275964,48.67815002912692],[-4.064507934140134,48.677605925445725],[-4.067195178609656,48.67891661518815],[-4.068000601946539,48.68272446881325],[-4.07116708376152,48.68462241191764],[-4.080222240659125,48.689712089777736],[-4.082890717412141,48.693212237422216],[-4.0837341887691,48.69168549285934],[-4.08645810312384,48.69005696722575],[-4.08922980276701,48.69161527586137],[-4.091651149022687,48.69171173600047],[-4.095188717132302,48.686965610139666],[-4.097383839952319,48.69356464812578],[-4.102536986221444,48.69351221259058],[-4.106197887484285,48.692515838515405],[-4.109568285925066,48.69472448012849],[-4.115803404112282,48.69506791354793],[-4.118098969264236,48.692778728280935],[-4.12511664716867,48.693877169595176],[-4.127837461875522,48.69361476668908],[-4.131236501370729,48.6960475956426],[-4.136181126707938,48.69293107079426],[-4.142132619722753,48.69237814384752],[-4.150020162763907,48.69217377284019],[-4.152170300893284,48.691487051119246],[-4.162483098525137,48.68833023827453],[-4.174170898732186,48.657628672506775],[-4.409843663429304,48.633874515395604],[-4.370364497124209,48.53380508608616]]]]}},"geojson4326_points":{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.370364497124209,48.53380508608616]},"properties":{"nom":"A","description":"Polygone 1","latitude":"48.53380508608616","longitude":"-4.370364497124209"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.373271574712479,48.47151134163559]},"properties":{"nom":"B","description":"Polygone 1","latitude":"48.47151134163559","longitude":"-4.373271574712479"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.03753485335386,48.579164636474836]},"properties":{"nom":"C","description":"Polygone 1","latitude":"48.579164636474836","longitude":"-4.03753485335386"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.89919702975027,48.603980178934115]},"properties":{"nom":"D","description":"Polygone 1","latitude":"48.603980178934115","longitude":"-3.89919702975027"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.860482328708233,48.62511389817695]},"properties":{"nom":"E","description":"Polygone 1","latitude":"48.62511389817695","longitude":"-3.860482328708233"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.858436311611334,48.629031691751045]},"properties":{"nom":"F","description":"Polygone 1","latitude":"48.629031691751045","longitude":"-3.858436311611334"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.862157259991486,48.633014015139416]},"properties":{"nom":"G","description":"Polygone 1","latitude":"48.633014015139416","longitude":"-3.862157259991486"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.870281882041237,48.63550010399696]},"properties":{"nom":"H","description":"Polygone 1","latitude":"48.63550010399696","longitude":"-3.870281882041237"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.879786359001045,48.639113643702565]},"properties":{"nom":"I","description":"Polygone 1","latitude":"48.639113643702565","longitude":"-3.879786359001045"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.895430188480503,48.64455770816115]},"properties":{"nom":"J","description":"Polygone 1","latitude":"48.64455770816115","longitude":"-3.895430188480503"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.89902273351368,48.64822789311303]},"properties":{"nom":"K","description":"Polygone 1","latitude":"48.64822789311303","longitude":"-3.89902273351368"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.902536979616769,48.654435032933826]},"properties":{"nom":"L","description":"Polygone 1","latitude":"48.654435032933826","longitude":"-3.902536979616769"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.906528075174153,48.66061643462235]},"properties":{"nom":"M","description":"Polygone 1","latitude":"48.66061643462235","longitude":"-3.906528075174153"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.904489574558275,48.6643307169305]},"properties":{"nom":"N","description":"Polygone 1","latitude":"48.6643307169305","longitude":"-3.904489574558275"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.89647573803132,48.66601900245078]},"properties":{"nom":"O","description":"Polygone 1","latitude":"48.66601900245078","longitude":"-3.89647573803132"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.890673665115296,48.667020244464325]},"properties":{"nom":"P","description":"Polygone 1","latitude":"48.667020244464325","longitude":"-3.890673665115296"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.890721315690864,48.67062455977177]},"properties":{"nom":"Q","description":"Polygone 1","latitude":"48.67062455977177","longitude":"-3.890721315690864"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.892950905315848,48.67088770685571]},"properties":{"nom":"R","description":"Polygone 1","latitude":"48.67088770685571","longitude":"-3.892950905315848"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.898005277721187,48.6723935639094]},"properties":{"nom":"S","description":"Polygone 1","latitude":"48.6723935639094","longitude":"-3.898005277721187"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.8992413951649,48.67074624589731]},"properties":{"nom":"T","description":"Polygone 1","latitude":"48.67074624589731","longitude":"-3.8992413951649"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.903300809713803,48.67034264689684]},"properties":{"nom":"U","description":"Polygone 1","latitude":"48.67034264689684","longitude":"-3.903300809713803"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.907548440632195,48.66910635173531]},"properties":{"nom":"V","description":"Polygone 1","latitude":"48.66910635173531","longitude":"-3.907548440632195"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.91185396569359,48.669954398127075]},"properties":{"nom":"W","description":"Polygone 1","latitude":"48.669954398127075","longitude":"-3.91185396569359"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.914635548862354,48.67322568941628]},"properties":{"nom":"X","description":"Polygone 1","latitude":"48.67322568941628","longitude":"-3.914635548862354"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.920575104032537,48.67458696237509]},"properties":{"nom":"Y","description":"Polygone 1","latitude":"48.67458696237509","longitude":"-3.920575104032537"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.924157593611878,48.669749821082725]},"properties":{"nom":"Z","description":"Polygone 1","latitude":"48.669749821082725","longitude":"-3.924157593611878"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.927138109422188,48.66538094626539]},"properties":{"nom":"AA","description":"Polygone 1","latitude":"48.66538094626539","longitude":"-3.927138109422188"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.927802453245391,48.66178827244388]},"properties":{"nom":"AB","description":"Polygone 1","latitude":"48.66178827244388","longitude":"-3.927802453245391"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.92880004801291,48.660065331624466]},"properties":{"nom":"AC","description":"Polygone 1","latitude":"48.660065331624466","longitude":"-3.92880004801291"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.930674658925236,48.657424523021]},"properties":{"nom":"AD","description":"Polygone 1","latitude":"48.657424523021","longitude":"-3.930674658925236"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.934385020441046,48.65730036039394]},"properties":{"nom":"AE","description":"Polygone 1","latitude":"48.65730036039394","longitude":"-3.934385020441046"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.940574301992641,48.65682750256307]},"properties":{"nom":"AF","description":"Polygone 1","latitude":"48.65682750256307","longitude":"-3.940574301992641"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.949892212356874,48.653210569309856]},"properties":{"nom":"AG","description":"Polygone 1","latitude":"48.653210569309856","longitude":"-3.949892212356874"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.9518951695476,48.64983646195122]},"properties":{"nom":"AH","description":"Polygone 1","latitude":"48.64983646195122","longitude":"-3.9518951695476"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.95135848409069,48.646306571150944]},"properties":{"nom":"AI","description":"Polygone 1","latitude":"48.646306571150944","longitude":"-3.95135848409069"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.952791103114349,48.64456097348628]},"properties":{"nom":"AJ","description":"Polygone 1","latitude":"48.64456097348628","longitude":"-3.952791103114349"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.954311041643234,48.64535110107629]},"properties":{"nom":"AK","description":"Polygone 1","latitude":"48.64535110107629","longitude":"-3.954311041643234"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.957178207067545,48.65093506946735]},"properties":{"nom":"AL","description":"Polygone 1","latitude":"48.65093506946735","longitude":"-3.957178207067545"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.95632686509049,48.654756209794456]},"properties":{"nom":"AM","description":"Polygone 1","latitude":"48.654756209794456","longitude":"-3.95632686509049"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.954939197043658,48.66049485799891]},"properties":{"nom":"AN","description":"Polygone 1","latitude":"48.66049485799891","longitude":"-3.954939197043658"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.958264581105623,48.66351217516115]},"properties":{"nom":"AO","description":"Polygone 1","latitude":"48.66351217516115","longitude":"-3.958264581105623"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.954301077151103,48.665175330569724]},"properties":{"nom":"AP","description":"Polygone 1","latitude":"48.665175330569724","longitude":"-3.954301077151103"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.958113788215813,48.66678821578858]},"properties":{"nom":"AQ","description":"Polygone 1","latitude":"48.66678821578858","longitude":"-3.958113788215813"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.958288500972019,48.67004622329816]},"properties":{"nom":"AR","description":"Polygone 1","latitude":"48.67004622329816","longitude":"-3.958288500972019"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.953583216471425,48.67102223996598]},"properties":{"nom":"AS","description":"Polygone 1","latitude":"48.67102223996598","longitude":"-3.953583216471425"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.952154912225681,48.67280542236]},"properties":{"nom":"AT","description":"Polygone 1","latitude":"48.67280542236","longitude":"-3.952154912225681"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.954601922703807,48.67354649576719]},"properties":{"nom":"AU","description":"Polygone 1","latitude":"48.67354649576719","longitude":"-3.954601922703807"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.957150323952388,48.6728667311387]},"properties":{"nom":"AV","description":"Polygone 1","latitude":"48.6728667311387","longitude":"-3.957150323952388"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.962232217223142,48.674085603023535]},"properties":{"nom":"AW","description":"Polygone 1","latitude":"48.674085603023535","longitude":"-3.962232217223142"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.96509885038279,48.67647290565392]},"properties":{"nom":"AX","description":"Polygone 1","latitude":"48.67647290565392","longitude":"-3.96509885038279"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.968196892552599,48.67354977814375]},"properties":{"nom":"AY","description":"Polygone 1","latitude":"48.67354977814375","longitude":"-3.968196892552599"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.970552500285286,48.67336152037275]},"properties":{"nom":"AZ","description":"Polygone 1","latitude":"48.67336152037275","longitude":"-3.970552500285286"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.971907150463719,48.67429537178488]},"properties":{"nom":"BA","description":"Polygone 1","latitude":"48.67429537178488","longitude":"-3.971907150463719"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.971687730880199,48.67565139942766]},"properties":{"nom":"BB","description":"Polygone 1","latitude":"48.67565139942766","longitude":"-3.971687730880199"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.968925351937541,48.67998621214178]},"properties":{"nom":"BC","description":"Polygone 1","latitude":"48.67998621214178","longitude":"-3.968925351937541"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.97276835094199,48.68681279071675]},"properties":{"nom":"BD","description":"Polygone 1","latitude":"48.68681279071675","longitude":"-3.97276835094199"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.969905040239144,48.687617856017994]},"properties":{"nom":"BE","description":"Polygone 1","latitude":"48.687617856017994","longitude":"-3.969905040239144"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.967785856011854,48.69274164929216]},"properties":{"nom":"BF","description":"Polygone 1","latitude":"48.69274164929216","longitude":"-3.967785856011854"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.97050395358365,48.693904041872074]},"properties":{"nom":"BG","description":"Polygone 1","latitude":"48.693904041872074","longitude":"-3.97050395358365"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.974129066864182,48.69665141578885]},"properties":{"nom":"BH","description":"Polygone 1","latitude":"48.69665141578885","longitude":"-3.974129066864182"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.976827175680581,48.699084231748806]},"properties":{"nom":"BI","description":"Polygone 1","latitude":"48.699084231748806","longitude":"-3.976827175680581"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.973964059500176,48.70207052891004]},"properties":{"nom":"BJ","description":"Polygone 1","latitude":"48.70207052891004","longitude":"-3.973964059500176"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.97557715354335,48.70449012698265]},"properties":{"nom":"BK","description":"Polygone 1","latitude":"48.70449012698265","longitude":"-3.97557715354335"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.972337757698344,48.70582333762662]},"properties":{"nom":"BL","description":"Polygone 1","latitude":"48.70582333762662","longitude":"-3.972337757698344"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.974038535718974,48.710344199247295]},"properties":{"nom":"BM","description":"Polygone 1","latitude":"48.710344199247295","longitude":"-3.974038535718974"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.972061362590358,48.71168433267898]},"properties":{"nom":"BN","description":"Polygone 1","latitude":"48.71168433267898","longitude":"-3.972061362590358"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.969407494937729,48.71919463600953]},"properties":{"nom":"BO","description":"Polygone 1","latitude":"48.71919463600953","longitude":"-3.969407494937729"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.966114995158957,48.719188628020184]},"properties":{"nom":"BP","description":"Polygone 1","latitude":"48.719188628020184","longitude":"-3.966114995158957"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.964815895310649,48.72248973384656]},"properties":{"nom":"BQ","description":"Polygone 1","latitude":"48.72248973384656","longitude":"-3.964815895310649"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.968123622922862,48.72216808659624]},"properties":{"nom":"BR","description":"Polygone 1","latitude":"48.72216808659624","longitude":"-3.968123622922862"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.970117554054281,48.7239825094888]},"properties":{"nom":"BS","description":"Polygone 1","latitude":"48.7239825094888","longitude":"-3.970117554054281"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.971030085004171,48.72531725688056]},"properties":{"nom":"BT","description":"Polygone 1","latitude":"48.72531725688056","longitude":"-3.971030085004171"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.974105493634571,48.72442714535237]},"properties":{"nom":"BU","description":"Polygone 1","latitude":"48.72442714535237","longitude":"-3.974105493634571"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.977130032296356,48.72223266964199]},"properties":{"nom":"BV","description":"Polygone 1","latitude":"48.72223266964199","longitude":"-3.977130032296356"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.98038470744471,48.72282149601802]},"properties":{"nom":"BW","description":"Polygone 1","latitude":"48.72282149601802","longitude":"-3.98038470744471"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.98267568678471,48.72451484026706]},"properties":{"nom":"BX","description":"Polygone 1","latitude":"48.72451484026706","longitude":"-3.98267568678471"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.983159793997456,48.72623219482621]},"properties":{"nom":"BY","description":"Polygone 1","latitude":"48.72623219482621","longitude":"-3.983159793997456"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.985655519886893,48.726898196761965]},"properties":{"nom":"BZ","description":"Polygone 1","latitude":"48.726898196761965","longitude":"-3.985655519886893"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.988412331317411,48.727004809776105]},"properties":{"nom":"CA","description":"Polygone 1","latitude":"48.727004809776105","longitude":"-3.988412331317411"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.990251104366354,48.72588975599552]},"properties":{"nom":"CB","description":"Polygone 1","latitude":"48.72588975599552","longitude":"-3.990251104366354"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.992106999472123,48.723541171653366]},"properties":{"nom":"CC","description":"Polygone 1","latitude":"48.723541171653366","longitude":"-3.992106999472123"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.992308257471176,48.72204072794657]},"properties":{"nom":"CD","description":"Polygone 1","latitude":"48.72204072794657","longitude":"-3.992308257471176"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.990818477440011,48.71838055340067]},"properties":{"nom":"CE","description":"Polygone 1","latitude":"48.71838055340067","longitude":"-3.990818477440011"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.993241558794496,48.715311146944074]},"properties":{"nom":"CF","description":"Polygone 1","latitude":"48.715311146944074","longitude":"-3.993241558794496"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.99726181945054,48.71273584775902]},"properties":{"nom":"CG","description":"Polygone 1","latitude":"48.71273584775902","longitude":"-3.99726181945054"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.000886986292233,48.71141716999743]},"properties":{"nom":"CH","description":"Polygone 1","latitude":"48.71141716999743","longitude":"-4.000886986292233"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.005573266114372,48.715195490443925]},"properties":{"nom":"CI","description":"Polygone 1","latitude":"48.715195490443925","longitude":"-4.005573266114372"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.004640753163968,48.716989015759715]},"properties":{"nom":"CJ","description":"Polygone 1","latitude":"48.716989015759715","longitude":"-4.004640753163968"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.007861713401779,48.72044675798358]},"properties":{"nom":"CK","description":"Polygone 1","latitude":"48.72044675798358","longitude":"-4.007861713401779"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.009590286562232,48.72068101995395]},"properties":{"nom":"CL","description":"Polygone 1","latitude":"48.72068101995395","longitude":"-4.009590286562232"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.012907971574204,48.71865165832863]},"properties":{"nom":"CM","description":"Polygone 1","latitude":"48.71865165832863","longitude":"-4.012907971574204"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.010881803078078,48.716872551149415]},"properties":{"nom":"CN","description":"Polygone 1","latitude":"48.716872551149415","longitude":"-4.010881803078078"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.013298574720932,48.713765123429766]},"properties":{"nom":"CO","description":"Polygone 1","latitude":"48.713765123429766","longitude":"-4.013298574720932"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.018283788022766,48.71146515516518]},"properties":{"nom":"CP","description":"Polygone 1","latitude":"48.71146515516518","longitude":"-4.018283788022766"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.02502266800395,48.710486602386844]},"properties":{"nom":"CQ","description":"Polygone 1","latitude":"48.710486602386844","longitude":"-4.02502266800395"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.029102910364339,48.7109751516783]},"properties":{"nom":"CR","description":"Polygone 1","latitude":"48.7109751516783","longitude":"-4.029102910364339"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.032895375568785,48.712496949149184]},"properties":{"nom":"CS","description":"Polygone 1","latitude":"48.712496949149184","longitude":"-4.032895375568785"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.034013864663466,48.71364906002572]},"properties":{"nom":"CT","description":"Polygone 1","latitude":"48.71364906002572","longitude":"-4.034013864663466"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.035203599079426,48.71386049099469]},"properties":{"nom":"CU","description":"Polygone 1","latitude":"48.71386049099469","longitude":"-4.035203599079426"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.036426674181452,48.711761570746404]},"properties":{"nom":"CV","description":"Polygone 1","latitude":"48.711761570746404","longitude":"-4.036426674181452"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.035857818689737,48.70935978588029]},"properties":{"nom":"CW","description":"Polygone 1","latitude":"48.70935978588029","longitude":"-4.035857818689737"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.037836186006247,48.70536884991981]},"properties":{"nom":"CX","description":"Polygone 1","latitude":"48.70536884991981","longitude":"-4.037836186006247"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.040876440962449,48.70331706201061]},"properties":{"nom":"CY","description":"Polygone 1","latitude":"48.70331706201061","longitude":"-4.040876440962449"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.042661395770205,48.70267658451317]},"properties":{"nom":"CZ","description":"Polygone 1","latitude":"48.70267658451317","longitude":"-4.042661395770205"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.044522857875245,48.70264835316387]},"properties":{"nom":"DA","description":"Polygone 1","latitude":"48.70264835316387","longitude":"-4.044522857875245"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.048746772595955,48.70536952092104]},"properties":{"nom":"DB","description":"Polygone 1","latitude":"48.70536952092104","longitude":"-4.048746772595955"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.051782617787177,48.70458102418029]},"properties":{"nom":"DC","description":"Polygone 1","latitude":"48.70458102418029","longitude":"-4.051782617787177"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.053387641319855,48.70237110662314]},"properties":{"nom":"DD","description":"Polygone 1","latitude":"48.70237110662314","longitude":"-4.053387641319855"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.054960885021424,48.69887510664347]},"properties":{"nom":"DE","description":"Polygone 1","latitude":"48.69887510664347","longitude":"-4.054960885021424"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.057098904957046,48.688336149296134]},"properties":{"nom":"DF","description":"Polygone 1","latitude":"48.688336149296134","longitude":"-4.057098904957046"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.047492224129947,48.6881905546806]},"properties":{"nom":"DG","description":"Polygone 1","latitude":"48.6881905546806","longitude":"-4.047492224129947"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.04264615919883,48.688356681641565]},"properties":{"nom":"DH","description":"Polygone 1","latitude":"48.688356681641565","longitude":"-4.04264615919883"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.05570877851515,48.685187990084636]},"properties":{"nom":"DI","description":"Polygone 1","latitude":"48.685187990084636","longitude":"-4.05570877851515"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.061384711067841,48.687678086132514]},"properties":{"nom":"DJ","description":"Polygone 1","latitude":"48.687678086132514","longitude":"-4.061384711067841"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.063856568443375,48.68626486757381]},"properties":{"nom":"DK","description":"Polygone 1","latitude":"48.68626486757381","longitude":"-4.063856568443375"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.069006699782528,48.687977416990556]},"properties":{"nom":"DL","description":"Polygone 1","latitude":"48.687977416990556","longitude":"-4.069006699782528"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.066114156101222,48.68600063748565]},"properties":{"nom":"DM","description":"Polygone 1","latitude":"48.68600063748565","longitude":"-4.066114156101222"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.065917761777147,48.68383188367652]},"properties":{"nom":"DN","description":"Polygone 1","latitude":"48.68383188367652","longitude":"-4.065917761777147"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.06536435070835,48.68281963355705]},"properties":{"nom":"DO","description":"Polygone 1","latitude":"48.68281963355705","longitude":"-4.06536435070835"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.062811851052143,48.68243638561189]},"properties":{"nom":"DP","description":"Polygone 1","latitude":"48.68243638561189","longitude":"-4.062811851052143"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.063604286352126,48.680735563101265]},"properties":{"nom":"DQ","description":"Polygone 1","latitude":"48.680735563101265","longitude":"-4.063604286352126"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.061249339782617,48.68019915458731]},"properties":{"nom":"DR","description":"Polygone 1","latitude":"48.68019915458731","longitude":"-4.061249339782617"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.060491984152113,48.67893668983929]},"properties":{"nom":"DS","description":"Polygone 1","latitude":"48.67893668983929","longitude":"-4.060491984152113"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.056630622211962,48.67523642323898]},"properties":{"nom":"DT","description":"Polygone 1","latitude":"48.67523642323898","longitude":"-4.056630622211962"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.055350396131191,48.67179995101334]},"properties":{"nom":"DU","description":"Polygone 1","latitude":"48.67179995101334","longitude":"-4.055350396131191"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.057224936686009,48.670572879663034]},"properties":{"nom":"DV","description":"Polygone 1","latitude":"48.670572879663034","longitude":"-4.057224936686009"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.057969445321888,48.675068847630506]},"properties":{"nom":"DW","description":"Polygone 1","latitude":"48.675068847630506","longitude":"-4.057969445321888"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.059622862128396,48.675122344607715]},"properties":{"nom":"DX","description":"Polygone 1","latitude":"48.675122344607715","longitude":"-4.059622862128396"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.06024682153259,48.67613145254186]},"properties":{"nom":"DY","description":"Polygone 1","latitude":"48.67613145254186","longitude":"-4.06024682153259"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.063213863275964,48.67815002912692]},"properties":{"nom":"DZ","description":"Polygone 1","latitude":"48.67815002912692","longitude":"-4.063213863275964"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.064507934140134,48.677605925445725]},"properties":{"nom":"EA","description":"Polygone 1","latitude":"48.677605925445725","longitude":"-4.064507934140134"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.067195178609656,48.67891661518815]},"properties":{"nom":"EB","description":"Polygone 1","latitude":"48.67891661518815","longitude":"-4.067195178609656"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.068000601946539,48.68272446881325]},"properties":{"nom":"EC","description":"Polygone 1","latitude":"48.68272446881325","longitude":"-4.068000601946539"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.07116708376152,48.68462241191764]},"properties":{"nom":"ED","description":"Polygone 1","latitude":"48.68462241191764","longitude":"-4.07116708376152"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.080222240659125,48.689712089777736]},"properties":{"nom":"EE","description":"Polygone 1","latitude":"48.689712089777736","longitude":"-4.080222240659125"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.082890717412141,48.693212237422216]},"properties":{"nom":"EF","description":"Polygone 1","latitude":"48.693212237422216","longitude":"-4.082890717412141"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.0837341887691,48.69168549285934]},"properties":{"nom":"EG","description":"Polygone 1","latitude":"48.69168549285934","longitude":"-4.0837341887691"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.08645810312384,48.69005696722575]},"properties":{"nom":"EH","description":"Polygone 1","latitude":"48.69005696722575","longitude":"-4.08645810312384"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.08922980276701,48.69161527586137]},"properties":{"nom":"EI","description":"Polygone 1","latitude":"48.69161527586137","longitude":"-4.08922980276701"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.091651149022687,48.69171173600047]},"properties":{"nom":"EJ","description":"Polygone 1","latitude":"48.69171173600047","longitude":"-4.091651149022687"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.095188717132302,48.686965610139666]},"properties":{"nom":"EK","description":"Polygone 1","latitude":"48.686965610139666","longitude":"-4.095188717132302"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.097383839952319,48.69356464812578]},"properties":{"nom":"EL","description":"Polygone 1","latitude":"48.69356464812578","longitude":"-4.097383839952319"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.102536986221444,48.69351221259058]},"properties":{"nom":"EM","description":"Polygone 1","latitude":"48.69351221259058","longitude":"-4.102536986221444"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.106197887484285,48.692515838515405]},"properties":{"nom":"EN","description":"Polygone 1","latitude":"48.692515838515405","longitude":"-4.106197887484285"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.109568285925066,48.69472448012849]},"properties":{"nom":"EO","description":"Polygone 1","latitude":"48.69472448012849","longitude":"-4.109568285925066"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.115803404112282,48.69506791354793]},"properties":{"nom":"EP","description":"Polygone 1","latitude":"48.69506791354793","longitude":"-4.115803404112282"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.118098969264236,48.692778728280935]},"properties":{"nom":"EQ","description":"Polygone 1","latitude":"48.692778728280935","longitude":"-4.118098969264236"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.12511664716867,48.693877169595176]},"properties":{"nom":"ER","description":"Polygone 1","latitude":"48.693877169595176","longitude":"-4.12511664716867"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.127837461875522,48.69361476668908]},"properties":{"nom":"ES","description":"Polygone 1","latitude":"48.69361476668908","longitude":"-4.127837461875522"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.131236501370729,48.6960475956426]},"properties":{"nom":"ET","description":"Polygone 1","latitude":"48.6960475956426","longitude":"-4.131236501370729"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.136181126707938,48.69293107079426]},"properties":{"nom":"EU","description":"Polygone 1","latitude":"48.69293107079426","longitude":"-4.136181126707938"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.142132619722753,48.69237814384752]},"properties":{"nom":"EV","description":"Polygone 1","latitude":"48.69237814384752","longitude":"-4.142132619722753"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.150020162763907,48.69217377284019]},"properties":{"nom":"EW","description":"Polygone 1","latitude":"48.69217377284019","longitude":"-4.150020162763907"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.152170300893284,48.691487051119246]},"properties":{"nom":"EX","description":"Polygone 1","latitude":"48.691487051119246","longitude":"-4.152170300893284"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.162483098525137,48.68833023827453]},"properties":{"nom":"EY","description":"Polygone 1","latitude":"48.68833023827453","longitude":"-4.162483098525137"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.174170898732186,48.657628672506775]},"properties":{"nom":"EZ","description":"Polygone 1","latitude":"48.657628672506775","longitude":"-4.174170898732186"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.409843663429304,48.633874515395604]},"properties":{"nom":"FA","description":"Polygone 1","latitude":"48.633874515395604","longitude":"-4.409843663429304"}}]},"geojson_origine_perimetre":{"type":"Feature","properties":{},"geometry":{"type":"MultiPolygon","coordinates":[[[[-4.370364497124209,48.53380508608616],[-4.373271574712479,48.47151134163559],[-4.03753485335386,48.579164636474836],[-3.89919702975027,48.603980178934115],[-3.860482328708233,48.62511389817695],[-3.858436311611334,48.629031691751045],[-3.862157259991486,48.633014015139416],[-3.870281882041237,48.63550010399696],[-3.879786359001045,48.639113643702565],[-3.895430188480503,48.64455770816115],[-3.89902273351368,48.64822789311303],[-3.902536979616769,48.654435032933826],[-3.906528075174153,48.66061643462235],[-3.904489574558275,48.6643307169305],[-3.89647573803132,48.66601900245078],[-3.890673665115296,48.667020244464325],[-3.890721315690864,48.67062455977177],[-3.892950905315848,48.67088770685571],[-3.898005277721187,48.6723935639094],[-3.8992413951649,48.67074624589731],[-3.903300809713803,48.67034264689684],[-3.907548440632195,48.66910635173531],[-3.91185396569359,48.669954398127075],[-3.914635548862354,48.67322568941628],[-3.920575104032537,48.67458696237509],[-3.924157593611878,48.669749821082725],[-3.927138109422188,48.66538094626539],[-3.927802453245391,48.66178827244388],[-3.92880004801291,48.660065331624466],[-3.930674658925236,48.657424523021],[-3.934385020441046,48.65730036039394],[-3.940574301992641,48.65682750256307],[-3.949892212356874,48.653210569309856],[-3.9518951695476,48.64983646195122],[-3.95135848409069,48.646306571150944],[-3.952791103114349,48.64456097348628],[-3.954311041643234,48.64535110107629],[-3.957178207067545,48.65093506946735],[-3.95632686509049,48.654756209794456],[-3.954939197043658,48.66049485799891],[-3.958264581105623,48.66351217516115],[-3.954301077151103,48.665175330569724],[-3.958113788215813,48.66678821578858],[-3.958288500972019,48.67004622329816],[-3.953583216471425,48.67102223996598],[-3.952154912225681,48.67280542236],[-3.954601922703807,48.67354649576719],[-3.957150323952388,48.6728667311387],[-3.962232217223142,48.674085603023535],[-3.96509885038279,48.67647290565392],[-3.968196892552599,48.67354977814375],[-3.970552500285286,48.67336152037275],[-3.971907150463719,48.67429537178488],[-3.971687730880199,48.67565139942766],[-3.968925351937541,48.67998621214178],[-3.97276835094199,48.68681279071675],[-3.969905040239144,48.687617856017994],[-3.967785856011854,48.69274164929216],[-3.97050395358365,48.693904041872074],[-3.974129066864182,48.69665141578885],[-3.976827175680581,48.699084231748806],[-3.973964059500176,48.70207052891004],[-3.97557715354335,48.70449012698265],[-3.972337757698344,48.70582333762662],[-3.974038535718974,48.710344199247295],[-3.972061362590358,48.71168433267898],[-3.969407494937729,48.71919463600953],[-3.966114995158957,48.719188628020184],[-3.964815895310649,48.72248973384656],[-3.968123622922862,48.72216808659624],[-3.970117554054281,48.7239825094888],[-3.971030085004171,48.72531725688056],[-3.974105493634571,48.72442714535237],[-3.977130032296356,48.72223266964199],[-3.98038470744471,48.72282149601802],[-3.98267568678471,48.72451484026706],[-3.983159793997456,48.72623219482621],[-3.985655519886893,48.726898196761965],[-3.988412331317411,48.727004809776105],[-3.990251104366354,48.72588975599552],[-3.992106999472123,48.723541171653366],[-3.992308257471176,48.72204072794657],[-3.990818477440011,48.71838055340067],[-3.993241558794496,48.715311146944074],[-3.99726181945054,48.71273584775902],[-4.000886986292233,48.71141716999743],[-4.005573266114372,48.715195490443925],[-4.004640753163968,48.716989015759715],[-4.007861713401779,48.72044675798358],[-4.009590286562232,48.72068101995395],[-4.012907971574204,48.71865165832863],[-4.010881803078078,48.716872551149415],[-4.013298574720932,48.713765123429766],[-4.018283788022766,48.71146515516518],[-4.02502266800395,48.710486602386844],[-4.029102910364339,48.7109751516783],[-4.032895375568785,48.712496949149184],[-4.034013864663466,48.71364906002572],[-4.035203599079426,48.71386049099469],[-4.036426674181452,48.711761570746404],[-4.035857818689737,48.70935978588029],[-4.037836186006247,48.70536884991981],[-4.040876440962449,48.70331706201061],[-4.042661395770205,48.70267658451317],[-4.044522857875245,48.70264835316387],[-4.048746772595955,48.70536952092104],[-4.051782617787177,48.70458102418029],[-4.053387641319855,48.70237110662314],[-4.054960885021424,48.69887510664347],[-4.057098904957046,48.688336149296134],[-4.047492224129947,48.6881905546806],[-4.04264615919883,48.688356681641565],[-4.05570877851515,48.685187990084636],[-4.061384711067841,48.687678086132514],[-4.063856568443375,48.68626486757381],[-4.069006699782528,48.687977416990556],[-4.066114156101222,48.68600063748565],[-4.065917761777147,48.68383188367652],[-4.06536435070835,48.68281963355705],[-4.062811851052143,48.68243638561189],[-4.063604286352126,48.680735563101265],[-4.061249339782617,48.68019915458731],[-4.060491984152113,48.67893668983929],[-4.056630622211962,48.67523642323898],[-4.055350396131191,48.67179995101334],[-4.057224936686009,48.670572879663034],[-4.057969445321888,48.675068847630506],[-4.059622862128396,48.675122344607715],[-4.06024682153259,48.67613145254186],[-4.063213863275964,48.67815002912692],[-4.064507934140134,48.677605925445725],[-4.067195178609656,48.67891661518815],[-4.068000601946539,48.68272446881325],[-4.07116708376152,48.68462241191764],[-4.080222240659125,48.689712089777736],[-4.082890717412141,48.693212237422216],[-4.0837341887691,48.69168549285934],[-4.08645810312384,48.69005696722575],[-4.08922980276701,48.69161527586137],[-4.091651149022687,48.69171173600047],[-4.095188717132302,48.686965610139666],[-4.097383839952319,48.69356464812578],[-4.102536986221444,48.69351221259058],[-4.106197887484285,48.692515838515405],[-4.109568285925066,48.69472448012849],[-4.115803404112282,48.69506791354793],[-4.118098969264236,48.692778728280935],[-4.12511664716867,48.693877169595176],[-4.127837461875522,48.69361476668908],[-4.131236501370729,48.6960475956426],[-4.136181126707938,48.69293107079426],[-4.142132619722753,48.69237814384752],[-4.150020162763907,48.69217377284019],[-4.152170300893284,48.691487051119246],[-4.162483098525137,48.68833023827453],[-4.174170898732186,48.657628672506775],[-4.409843663429304,48.633874515395604],[-4.370364497124209,48.53380508608616]]]]}},"geojson_origine_points":{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.370364497124209,48.53380508608616]},"properties":{"nom":"A","description":"Polygone 1","latitude":"48.53380508608616","longitude":"-4.370364497124209"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.373271574712479,48.47151134163559]},"properties":{"nom":"B","description":"Polygone 1","latitude":"48.47151134163559","longitude":"-4.373271574712479"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.03753485335386,48.579164636474836]},"properties":{"nom":"C","description":"Polygone 1","latitude":"48.579164636474836","longitude":"-4.03753485335386"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.89919702975027,48.603980178934115]},"properties":{"nom":"D","description":"Polygone 1","latitude":"48.603980178934115","longitude":"-3.89919702975027"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.860482328708233,48.62511389817695]},"properties":{"nom":"E","description":"Polygone 1","latitude":"48.62511389817695","longitude":"-3.860482328708233"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.858436311611334,48.629031691751045]},"properties":{"nom":"F","description":"Polygone 1","latitude":"48.629031691751045","longitude":"-3.858436311611334"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.862157259991486,48.633014015139416]},"properties":{"nom":"G","description":"Polygone 1","latitude":"48.633014015139416","longitude":"-3.862157259991486"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.870281882041237,48.63550010399696]},"properties":{"nom":"H","description":"Polygone 1","latitude":"48.63550010399696","longitude":"-3.870281882041237"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.879786359001045,48.639113643702565]},"properties":{"nom":"I","description":"Polygone 1","latitude":"48.639113643702565","longitude":"-3.879786359001045"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.895430188480503,48.64455770816115]},"properties":{"nom":"J","description":"Polygone 1","latitude":"48.64455770816115","longitude":"-3.895430188480503"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.89902273351368,48.64822789311303]},"properties":{"nom":"K","description":"Polygone 1","latitude":"48.64822789311303","longitude":"-3.89902273351368"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.902536979616769,48.654435032933826]},"properties":{"nom":"L","description":"Polygone 1","latitude":"48.654435032933826","longitude":"-3.902536979616769"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.906528075174153,48.66061643462235]},"properties":{"nom":"M","description":"Polygone 1","latitude":"48.66061643462235","longitude":"-3.906528075174153"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.904489574558275,48.6643307169305]},"properties":{"nom":"N","description":"Polygone 1","latitude":"48.6643307169305","longitude":"-3.904489574558275"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.89647573803132,48.66601900245078]},"properties":{"nom":"O","description":"Polygone 1","latitude":"48.66601900245078","longitude":"-3.89647573803132"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.890673665115296,48.667020244464325]},"properties":{"nom":"P","description":"Polygone 1","latitude":"48.667020244464325","longitude":"-3.890673665115296"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.890721315690864,48.67062455977177]},"properties":{"nom":"Q","description":"Polygone 1","latitude":"48.67062455977177","longitude":"-3.890721315690864"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.892950905315848,48.67088770685571]},"properties":{"nom":"R","description":"Polygone 1","latitude":"48.67088770685571","longitude":"-3.892950905315848"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.898005277721187,48.6723935639094]},"properties":{"nom":"S","description":"Polygone 1","latitude":"48.6723935639094","longitude":"-3.898005277721187"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.8992413951649,48.67074624589731]},"properties":{"nom":"T","description":"Polygone 1","latitude":"48.67074624589731","longitude":"-3.8992413951649"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.903300809713803,48.67034264689684]},"properties":{"nom":"U","description":"Polygone 1","latitude":"48.67034264689684","longitude":"-3.903300809713803"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.907548440632195,48.66910635173531]},"properties":{"nom":"V","description":"Polygone 1","latitude":"48.66910635173531","longitude":"-3.907548440632195"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.91185396569359,48.669954398127075]},"properties":{"nom":"W","description":"Polygone 1","latitude":"48.669954398127075","longitude":"-3.91185396569359"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.914635548862354,48.67322568941628]},"properties":{"nom":"X","description":"Polygone 1","latitude":"48.67322568941628","longitude":"-3.914635548862354"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.920575104032537,48.67458696237509]},"properties":{"nom":"Y","description":"Polygone 1","latitude":"48.67458696237509","longitude":"-3.920575104032537"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.924157593611878,48.669749821082725]},"properties":{"nom":"Z","description":"Polygone 1","latitude":"48.669749821082725","longitude":"-3.924157593611878"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.927138109422188,48.66538094626539]},"properties":{"nom":"AA","description":"Polygone 1","latitude":"48.66538094626539","longitude":"-3.927138109422188"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.927802453245391,48.66178827244388]},"properties":{"nom":"AB","description":"Polygone 1","latitude":"48.66178827244388","longitude":"-3.927802453245391"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.92880004801291,48.660065331624466]},"properties":{"nom":"AC","description":"Polygone 1","latitude":"48.660065331624466","longitude":"-3.92880004801291"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.930674658925236,48.657424523021]},"properties":{"nom":"AD","description":"Polygone 1","latitude":"48.657424523021","longitude":"-3.930674658925236"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.934385020441046,48.65730036039394]},"properties":{"nom":"AE","description":"Polygone 1","latitude":"48.65730036039394","longitude":"-3.934385020441046"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.940574301992641,48.65682750256307]},"properties":{"nom":"AF","description":"Polygone 1","latitude":"48.65682750256307","longitude":"-3.940574301992641"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.949892212356874,48.653210569309856]},"properties":{"nom":"AG","description":"Polygone 1","latitude":"48.653210569309856","longitude":"-3.949892212356874"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.9518951695476,48.64983646195122]},"properties":{"nom":"AH","description":"Polygone 1","latitude":"48.64983646195122","longitude":"-3.9518951695476"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.95135848409069,48.646306571150944]},"properties":{"nom":"AI","description":"Polygone 1","latitude":"48.646306571150944","longitude":"-3.95135848409069"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.952791103114349,48.64456097348628]},"properties":{"nom":"AJ","description":"Polygone 1","latitude":"48.64456097348628","longitude":"-3.952791103114349"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.954311041643234,48.64535110107629]},"properties":{"nom":"AK","description":"Polygone 1","latitude":"48.64535110107629","longitude":"-3.954311041643234"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.957178207067545,48.65093506946735]},"properties":{"nom":"AL","description":"Polygone 1","latitude":"48.65093506946735","longitude":"-3.957178207067545"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.95632686509049,48.654756209794456]},"properties":{"nom":"AM","description":"Polygone 1","latitude":"48.654756209794456","longitude":"-3.95632686509049"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.954939197043658,48.66049485799891]},"properties":{"nom":"AN","description":"Polygone 1","latitude":"48.66049485799891","longitude":"-3.954939197043658"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.958264581105623,48.66351217516115]},"properties":{"nom":"AO","description":"Polygone 1","latitude":"48.66351217516115","longitude":"-3.958264581105623"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.954301077151103,48.665175330569724]},"properties":{"nom":"AP","description":"Polygone 1","latitude":"48.665175330569724","longitude":"-3.954301077151103"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.958113788215813,48.66678821578858]},"properties":{"nom":"AQ","description":"Polygone 1","latitude":"48.66678821578858","longitude":"-3.958113788215813"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.958288500972019,48.67004622329816]},"properties":{"nom":"AR","description":"Polygone 1","latitude":"48.67004622329816","longitude":"-3.958288500972019"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.953583216471425,48.67102223996598]},"properties":{"nom":"AS","description":"Polygone 1","latitude":"48.67102223996598","longitude":"-3.953583216471425"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.952154912225681,48.67280542236]},"properties":{"nom":"AT","description":"Polygone 1","latitude":"48.67280542236","longitude":"-3.952154912225681"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.954601922703807,48.67354649576719]},"properties":{"nom":"AU","description":"Polygone 1","latitude":"48.67354649576719","longitude":"-3.954601922703807"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.957150323952388,48.6728667311387]},"properties":{"nom":"AV","description":"Polygone 1","latitude":"48.6728667311387","longitude":"-3.957150323952388"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.962232217223142,48.674085603023535]},"properties":{"nom":"AW","description":"Polygone 1","latitude":"48.674085603023535","longitude":"-3.962232217223142"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.96509885038279,48.67647290565392]},"properties":{"nom":"AX","description":"Polygone 1","latitude":"48.67647290565392","longitude":"-3.96509885038279"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.968196892552599,48.67354977814375]},"properties":{"nom":"AY","description":"Polygone 1","latitude":"48.67354977814375","longitude":"-3.968196892552599"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.970552500285286,48.67336152037275]},"properties":{"nom":"AZ","description":"Polygone 1","latitude":"48.67336152037275","longitude":"-3.970552500285286"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.971907150463719,48.67429537178488]},"properties":{"nom":"BA","description":"Polygone 1","latitude":"48.67429537178488","longitude":"-3.971907150463719"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.971687730880199,48.67565139942766]},"properties":{"nom":"BB","description":"Polygone 1","latitude":"48.67565139942766","longitude":"-3.971687730880199"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.968925351937541,48.67998621214178]},"properties":{"nom":"BC","description":"Polygone 1","latitude":"48.67998621214178","longitude":"-3.968925351937541"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.97276835094199,48.68681279071675]},"properties":{"nom":"BD","description":"Polygone 1","latitude":"48.68681279071675","longitude":"-3.97276835094199"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.969905040239144,48.687617856017994]},"properties":{"nom":"BE","description":"Polygone 1","latitude":"48.687617856017994","longitude":"-3.969905040239144"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.967785856011854,48.69274164929216]},"properties":{"nom":"BF","description":"Polygone 1","latitude":"48.69274164929216","longitude":"-3.967785856011854"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.97050395358365,48.693904041872074]},"properties":{"nom":"BG","description":"Polygone 1","latitude":"48.693904041872074","longitude":"-3.97050395358365"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.974129066864182,48.69665141578885]},"properties":{"nom":"BH","description":"Polygone 1","latitude":"48.69665141578885","longitude":"-3.974129066864182"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.976827175680581,48.699084231748806]},"properties":{"nom":"BI","description":"Polygone 1","latitude":"48.699084231748806","longitude":"-3.976827175680581"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.973964059500176,48.70207052891004]},"properties":{"nom":"BJ","description":"Polygone 1","latitude":"48.70207052891004","longitude":"-3.973964059500176"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.97557715354335,48.70449012698265]},"properties":{"nom":"BK","description":"Polygone 1","latitude":"48.70449012698265","longitude":"-3.97557715354335"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.972337757698344,48.70582333762662]},"properties":{"nom":"BL","description":"Polygone 1","latitude":"48.70582333762662","longitude":"-3.972337757698344"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.974038535718974,48.710344199247295]},"properties":{"nom":"BM","description":"Polygone 1","latitude":"48.710344199247295","longitude":"-3.974038535718974"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.972061362590358,48.71168433267898]},"properties":{"nom":"BN","description":"Polygone 1","latitude":"48.71168433267898","longitude":"-3.972061362590358"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.969407494937729,48.71919463600953]},"properties":{"nom":"BO","description":"Polygone 1","latitude":"48.71919463600953","longitude":"-3.969407494937729"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.966114995158957,48.719188628020184]},"properties":{"nom":"BP","description":"Polygone 1","latitude":"48.719188628020184","longitude":"-3.966114995158957"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.964815895310649,48.72248973384656]},"properties":{"nom":"BQ","description":"Polygone 1","latitude":"48.72248973384656","longitude":"-3.964815895310649"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.968123622922862,48.72216808659624]},"properties":{"nom":"BR","description":"Polygone 1","latitude":"48.72216808659624","longitude":"-3.968123622922862"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.970117554054281,48.7239825094888]},"properties":{"nom":"BS","description":"Polygone 1","latitude":"48.7239825094888","longitude":"-3.970117554054281"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.971030085004171,48.72531725688056]},"properties":{"nom":"BT","description":"Polygone 1","latitude":"48.72531725688056","longitude":"-3.971030085004171"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.974105493634571,48.72442714535237]},"properties":{"nom":"BU","description":"Polygone 1","latitude":"48.72442714535237","longitude":"-3.974105493634571"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.977130032296356,48.72223266964199]},"properties":{"nom":"BV","description":"Polygone 1","latitude":"48.72223266964199","longitude":"-3.977130032296356"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.98038470744471,48.72282149601802]},"properties":{"nom":"BW","description":"Polygone 1","latitude":"48.72282149601802","longitude":"-3.98038470744471"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.98267568678471,48.72451484026706]},"properties":{"nom":"BX","description":"Polygone 1","latitude":"48.72451484026706","longitude":"-3.98267568678471"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.983159793997456,48.72623219482621]},"properties":{"nom":"BY","description":"Polygone 1","latitude":"48.72623219482621","longitude":"-3.983159793997456"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.985655519886893,48.726898196761965]},"properties":{"nom":"BZ","description":"Polygone 1","latitude":"48.726898196761965","longitude":"-3.985655519886893"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.988412331317411,48.727004809776105]},"properties":{"nom":"CA","description":"Polygone 1","latitude":"48.727004809776105","longitude":"-3.988412331317411"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.990251104366354,48.72588975599552]},"properties":{"nom":"CB","description":"Polygone 1","latitude":"48.72588975599552","longitude":"-3.990251104366354"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.992106999472123,48.723541171653366]},"properties":{"nom":"CC","description":"Polygone 1","latitude":"48.723541171653366","longitude":"-3.992106999472123"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.992308257471176,48.72204072794657]},"properties":{"nom":"CD","description":"Polygone 1","latitude":"48.72204072794657","longitude":"-3.992308257471176"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.990818477440011,48.71838055340067]},"properties":{"nom":"CE","description":"Polygone 1","latitude":"48.71838055340067","longitude":"-3.990818477440011"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.993241558794496,48.715311146944074]},"properties":{"nom":"CF","description":"Polygone 1","latitude":"48.715311146944074","longitude":"-3.993241558794496"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-3.99726181945054,48.71273584775902]},"properties":{"nom":"CG","description":"Polygone 1","latitude":"48.71273584775902","longitude":"-3.99726181945054"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.000886986292233,48.71141716999743]},"properties":{"nom":"CH","description":"Polygone 1","latitude":"48.71141716999743","longitude":"-4.000886986292233"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.005573266114372,48.715195490443925]},"properties":{"nom":"CI","description":"Polygone 1","latitude":"48.715195490443925","longitude":"-4.005573266114372"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.004640753163968,48.716989015759715]},"properties":{"nom":"CJ","description":"Polygone 1","latitude":"48.716989015759715","longitude":"-4.004640753163968"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.007861713401779,48.72044675798358]},"properties":{"nom":"CK","description":"Polygone 1","latitude":"48.72044675798358","longitude":"-4.007861713401779"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.009590286562232,48.72068101995395]},"properties":{"nom":"CL","description":"Polygone 1","latitude":"48.72068101995395","longitude":"-4.009590286562232"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.012907971574204,48.71865165832863]},"properties":{"nom":"CM","description":"Polygone 1","latitude":"48.71865165832863","longitude":"-4.012907971574204"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.010881803078078,48.716872551149415]},"properties":{"nom":"CN","description":"Polygone 1","latitude":"48.716872551149415","longitude":"-4.010881803078078"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.013298574720932,48.713765123429766]},"properties":{"nom":"CO","description":"Polygone 1","latitude":"48.713765123429766","longitude":"-4.013298574720932"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.018283788022766,48.71146515516518]},"properties":{"nom":"CP","description":"Polygone 1","latitude":"48.71146515516518","longitude":"-4.018283788022766"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.02502266800395,48.710486602386844]},"properties":{"nom":"CQ","description":"Polygone 1","latitude":"48.710486602386844","longitude":"-4.02502266800395"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.029102910364339,48.7109751516783]},"properties":{"nom":"CR","description":"Polygone 1","latitude":"48.7109751516783","longitude":"-4.029102910364339"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.032895375568785,48.712496949149184]},"properties":{"nom":"CS","description":"Polygone 1","latitude":"48.712496949149184","longitude":"-4.032895375568785"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.034013864663466,48.71364906002572]},"properties":{"nom":"CT","description":"Polygone 1","latitude":"48.71364906002572","longitude":"-4.034013864663466"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.035203599079426,48.71386049099469]},"properties":{"nom":"CU","description":"Polygone 1","latitude":"48.71386049099469","longitude":"-4.035203599079426"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.036426674181452,48.711761570746404]},"properties":{"nom":"CV","description":"Polygone 1","latitude":"48.711761570746404","longitude":"-4.036426674181452"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.035857818689737,48.70935978588029]},"properties":{"nom":"CW","description":"Polygone 1","latitude":"48.70935978588029","longitude":"-4.035857818689737"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.037836186006247,48.70536884991981]},"properties":{"nom":"CX","description":"Polygone 1","latitude":"48.70536884991981","longitude":"-4.037836186006247"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.040876440962449,48.70331706201061]},"properties":{"nom":"CY","description":"Polygone 1","latitude":"48.70331706201061","longitude":"-4.040876440962449"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.042661395770205,48.70267658451317]},"properties":{"nom":"CZ","description":"Polygone 1","latitude":"48.70267658451317","longitude":"-4.042661395770205"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.044522857875245,48.70264835316387]},"properties":{"nom":"DA","description":"Polygone 1","latitude":"48.70264835316387","longitude":"-4.044522857875245"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.048746772595955,48.70536952092104]},"properties":{"nom":"DB","description":"Polygone 1","latitude":"48.70536952092104","longitude":"-4.048746772595955"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.051782617787177,48.70458102418029]},"properties":{"nom":"DC","description":"Polygone 1","latitude":"48.70458102418029","longitude":"-4.051782617787177"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.053387641319855,48.70237110662314]},"properties":{"nom":"DD","description":"Polygone 1","latitude":"48.70237110662314","longitude":"-4.053387641319855"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.054960885021424,48.69887510664347]},"properties":{"nom":"DE","description":"Polygone 1","latitude":"48.69887510664347","longitude":"-4.054960885021424"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.057098904957046,48.688336149296134]},"properties":{"nom":"DF","description":"Polygone 1","latitude":"48.688336149296134","longitude":"-4.057098904957046"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.047492224129947,48.6881905546806]},"properties":{"nom":"DG","description":"Polygone 1","latitude":"48.6881905546806","longitude":"-4.047492224129947"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.04264615919883,48.688356681641565]},"properties":{"nom":"DH","description":"Polygone 1","latitude":"48.688356681641565","longitude":"-4.04264615919883"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.05570877851515,48.685187990084636]},"properties":{"nom":"DI","description":"Polygone 1","latitude":"48.685187990084636","longitude":"-4.05570877851515"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.061384711067841,48.687678086132514]},"properties":{"nom":"DJ","description":"Polygone 1","latitude":"48.687678086132514","longitude":"-4.061384711067841"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.063856568443375,48.68626486757381]},"properties":{"nom":"DK","description":"Polygone 1","latitude":"48.68626486757381","longitude":"-4.063856568443375"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.069006699782528,48.687977416990556]},"properties":{"nom":"DL","description":"Polygone 1","latitude":"48.687977416990556","longitude":"-4.069006699782528"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.066114156101222,48.68600063748565]},"properties":{"nom":"DM","description":"Polygone 1","latitude":"48.68600063748565","longitude":"-4.066114156101222"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.065917761777147,48.68383188367652]},"properties":{"nom":"DN","description":"Polygone 1","latitude":"48.68383188367652","longitude":"-4.065917761777147"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.06536435070835,48.68281963355705]},"properties":{"nom":"DO","description":"Polygone 1","latitude":"48.68281963355705","longitude":"-4.06536435070835"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.062811851052143,48.68243638561189]},"properties":{"nom":"DP","description":"Polygone 1","latitude":"48.68243638561189","longitude":"-4.062811851052143"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.063604286352126,48.680735563101265]},"properties":{"nom":"DQ","description":"Polygone 1","latitude":"48.680735563101265","longitude":"-4.063604286352126"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.061249339782617,48.68019915458731]},"properties":{"nom":"DR","description":"Polygone 1","latitude":"48.68019915458731","longitude":"-4.061249339782617"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.060491984152113,48.67893668983929]},"properties":{"nom":"DS","description":"Polygone 1","latitude":"48.67893668983929","longitude":"-4.060491984152113"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.056630622211962,48.67523642323898]},"properties":{"nom":"DT","description":"Polygone 1","latitude":"48.67523642323898","longitude":"-4.056630622211962"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.055350396131191,48.67179995101334]},"properties":{"nom":"DU","description":"Polygone 1","latitude":"48.67179995101334","longitude":"-4.055350396131191"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.057224936686009,48.670572879663034]},"properties":{"nom":"DV","description":"Polygone 1","latitude":"48.670572879663034","longitude":"-4.057224936686009"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.057969445321888,48.675068847630506]},"properties":{"nom":"DW","description":"Polygone 1","latitude":"48.675068847630506","longitude":"-4.057969445321888"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.059622862128396,48.675122344607715]},"properties":{"nom":"DX","description":"Polygone 1","latitude":"48.675122344607715","longitude":"-4.059622862128396"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.06024682153259,48.67613145254186]},"properties":{"nom":"DY","description":"Polygone 1","latitude":"48.67613145254186","longitude":"-4.06024682153259"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.063213863275964,48.67815002912692]},"properties":{"nom":"DZ","description":"Polygone 1","latitude":"48.67815002912692","longitude":"-4.063213863275964"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.064507934140134,48.677605925445725]},"properties":{"nom":"EA","description":"Polygone 1","latitude":"48.677605925445725","longitude":"-4.064507934140134"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.067195178609656,48.67891661518815]},"properties":{"nom":"EB","description":"Polygone 1","latitude":"48.67891661518815","longitude":"-4.067195178609656"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.068000601946539,48.68272446881325]},"properties":{"nom":"EC","description":"Polygone 1","latitude":"48.68272446881325","longitude":"-4.068000601946539"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.07116708376152,48.68462241191764]},"properties":{"nom":"ED","description":"Polygone 1","latitude":"48.68462241191764","longitude":"-4.07116708376152"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.080222240659125,48.689712089777736]},"properties":{"nom":"EE","description":"Polygone 1","latitude":"48.689712089777736","longitude":"-4.080222240659125"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.082890717412141,48.693212237422216]},"properties":{"nom":"EF","description":"Polygone 1","latitude":"48.693212237422216","longitude":"-4.082890717412141"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.0837341887691,48.69168549285934]},"properties":{"nom":"EG","description":"Polygone 1","latitude":"48.69168549285934","longitude":"-4.0837341887691"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.08645810312384,48.69005696722575]},"properties":{"nom":"EH","description":"Polygone 1","latitude":"48.69005696722575","longitude":"-4.08645810312384"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.08922980276701,48.69161527586137]},"properties":{"nom":"EI","description":"Polygone 1","latitude":"48.69161527586137","longitude":"-4.08922980276701"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.091651149022687,48.69171173600047]},"properties":{"nom":"EJ","description":"Polygone 1","latitude":"48.69171173600047","longitude":"-4.091651149022687"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.095188717132302,48.686965610139666]},"properties":{"nom":"EK","description":"Polygone 1","latitude":"48.686965610139666","longitude":"-4.095188717132302"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.097383839952319,48.69356464812578]},"properties":{"nom":"EL","description":"Polygone 1","latitude":"48.69356464812578","longitude":"-4.097383839952319"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.102536986221444,48.69351221259058]},"properties":{"nom":"EM","description":"Polygone 1","latitude":"48.69351221259058","longitude":"-4.102536986221444"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.106197887484285,48.692515838515405]},"properties":{"nom":"EN","description":"Polygone 1","latitude":"48.692515838515405","longitude":"-4.106197887484285"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.109568285925066,48.69472448012849]},"properties":{"nom":"EO","description":"Polygone 1","latitude":"48.69472448012849","longitude":"-4.109568285925066"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.115803404112282,48.69506791354793]},"properties":{"nom":"EP","description":"Polygone 1","latitude":"48.69506791354793","longitude":"-4.115803404112282"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.118098969264236,48.692778728280935]},"properties":{"nom":"EQ","description":"Polygone 1","latitude":"48.692778728280935","longitude":"-4.118098969264236"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.12511664716867,48.693877169595176]},"properties":{"nom":"ER","description":"Polygone 1","latitude":"48.693877169595176","longitude":"-4.12511664716867"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.127837461875522,48.69361476668908]},"properties":{"nom":"ES","description":"Polygone 1","latitude":"48.69361476668908","longitude":"-4.127837461875522"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.131236501370729,48.6960475956426]},"properties":{"nom":"ET","description":"Polygone 1","latitude":"48.6960475956426","longitude":"-4.131236501370729"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.136181126707938,48.69293107079426]},"properties":{"nom":"EU","description":"Polygone 1","latitude":"48.69293107079426","longitude":"-4.136181126707938"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.142132619722753,48.69237814384752]},"properties":{"nom":"EV","description":"Polygone 1","latitude":"48.69237814384752","longitude":"-4.142132619722753"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.150020162763907,48.69217377284019]},"properties":{"nom":"EW","description":"Polygone 1","latitude":"48.69217377284019","longitude":"-4.150020162763907"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.152170300893284,48.691487051119246]},"properties":{"nom":"EX","description":"Polygone 1","latitude":"48.691487051119246","longitude":"-4.152170300893284"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.162483098525137,48.68833023827453]},"properties":{"nom":"EY","description":"Polygone 1","latitude":"48.68833023827453","longitude":"-4.162483098525137"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.174170898732186,48.657628672506775]},"properties":{"nom":"EZ","description":"Polygone 1","latitude":"48.657628672506775","longitude":"-4.174170898732186"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-4.409843663429304,48.633874515395604]},"properties":{"nom":"FA","description":"Polygone 1","latitude":"48.633874515395604","longitude":"-4.409843663429304"}}]},"geojson_origine_geo_systeme_id":"4326","geojson4326_forages":null,"geojson_origine_forages":null,"surface":3}</perimetre>
+          <id>"test"</id>
           <titretypeid>"axm"</titretypeid>
           <style>
             {
@@ -325,7 +326,7 @@
         </div>
       </div>
     </div>
-    <div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-end" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
+    <div id="tabpanel-points-test-panel" class="fr-tabs__panel fr-tabs__panel--direction-end" role="tabpanel" aria-labelledby="tabpanel-points-test" tabindex="0">
       <!---->
     </div>
   </div>
diff --git a/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_CustomPoints.html b/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_CustomPoints.html
index e9a56880ec57f97bcfe8dd2443b9737262190610..fea3dfb42e9ab3806be9d64944779c3aab21f2f6 100644
--- a/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_CustomPoints.html
+++ b/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_CustomPoints.html
@@ -300,85 +300,85 @@
 <div>
   <div class="fr-tabs" style="--tabs-height: 0px;">
     <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-      <li role="presentation"><button id="tabpanel-carte-271" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-271-panel">Carte</button></li>
-      <li role="presentation"><button id="tabpanel-points-271" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-271-panel">Tableau</button></li>
+      <li role="presentation"><button id="tabpanel-carte-test" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-test-panel">Carte</button></li>
+      <li role="presentation"><button id="tabpanel-points-test" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-test-panel">Tableau</button></li>
     </ul>
-    <div id="tabpanel-carte-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-271" tabindex="0">
+    <div id="tabpanel-carte-test-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-test" tabindex="0">
       <!---->
     </div>
-    <div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
+    <div id="tabpanel-points-test-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-test" tabindex="0">
       <div style="display: flex; flex-direction: column;">
-        <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_670">Système géographique</label>
-          <div id="typeahead_geosysteme_670_wrapper" class="_typeahead_8eddf1">
-            <div class="flex"><input id="typeahead_geosysteme_670" type="text" title="" name="typeahead_geosysteme_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_670-control" aria-activedescendant="typeahead_geosysteme_670-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
-            <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_670-control" role="listbox">
-              <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_670-control-0">
+        <div class="fr-select-group"><label class="fr-label" for="4326">Système géographique</label>
+          <div id="4326_wrapper" class="_typeahead_8eddf1">
+            <div class="flex"><input id="4326" type="text" title="" name="4326" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="4326-control" aria-activedescendant="4326-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+            <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="4326-control" role="listbox">
+              <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="4326-control-0">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-1">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-1">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-2">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-2">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-3">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-3">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-4">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-4">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-5">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-5">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-6">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-6">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-7">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-7">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-8">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-8">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-9">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-9">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-10">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-10">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-11">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-11">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-12">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-12">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-13">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-13">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-14">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-14">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-15">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-15">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-16">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-16">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-17">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-17">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-18">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-18">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-19">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-19">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-20">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-20">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-21">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-21">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-22">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-22">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
               </li>
             </ul>
diff --git a/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_CustomPointsWithAnotherGeoSysteme.html b/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_CustomPointsWithAnotherGeoSysteme.html
index d982161f4754f485300ab5678b8e7b849aa41f8d..7dd2c1df39e4871eadcb9d2cd56a25b0677a7e1e 100644
--- a/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_CustomPointsWithAnotherGeoSysteme.html
+++ b/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_CustomPointsWithAnotherGeoSysteme.html
@@ -300,85 +300,85 @@
 <div>
   <div class="fr-tabs" style="--tabs-height: 0px;">
     <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-      <li role="presentation"><button id="tabpanel-carte-271" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-271-panel">Carte</button></li>
-      <li role="presentation"><button id="tabpanel-points-271" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-271-panel">Tableau</button></li>
+      <li role="presentation"><button id="tabpanel-carte-test" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-test-panel">Carte</button></li>
+      <li role="presentation"><button id="tabpanel-points-test" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-test-panel">Tableau</button></li>
     </ul>
-    <div id="tabpanel-carte-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-271" tabindex="0">
+    <div id="tabpanel-carte-test-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-test" tabindex="0">
       <!---->
     </div>
-    <div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
+    <div id="tabpanel-points-test-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-test" tabindex="0">
       <div style="display: flex; flex-direction: column;">
-        <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_670">Système géographique</label>
-          <div id="typeahead_geosysteme_670_wrapper" class="_typeahead_8eddf1">
-            <div class="flex"><input id="typeahead_geosysteme_670" type="text" title="" name="typeahead_geosysteme_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_670-control" aria-activedescendant="typeahead_geosysteme_670-control" aria-expanded="false" aria-autocomplete="list" value="RGF93 / Lambert-93 - (2154)"></div>
-            <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_670-control" role="listbox">
-              <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_670-control-0">
+        <div class="fr-select-group"><label class="fr-label" for="2154">Système géographique</label>
+          <div id="2154_wrapper" class="_typeahead_8eddf1">
+            <div class="flex"><input id="2154" type="text" title="" name="2154" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="2154-control" aria-activedescendant="2154-control" aria-expanded="false" aria-autocomplete="list" value="RGF93 / Lambert-93 - (2154)"></div>
+            <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="2154-control" role="listbox">
+              <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="2154-control-0">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-1">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2154-control-1">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-2">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2154-control-2">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-3">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2154-control-3">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-4">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2154-control-4">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-5">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2154-control-5">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">WGS84 - (4326)</span><span class="fr-text">Monde</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-6">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2154-control-6">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-7">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2154-control-7">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-8">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2154-control-8">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-9">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2154-control-9">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-10">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2154-control-10">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-11">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2154-control-11">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-12">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2154-control-12">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-13">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2154-control-13">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-14">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2154-control-14">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-15">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2154-control-15">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-16">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2154-control-16">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-17">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2154-control-17">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-18">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2154-control-18">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-19">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2154-control-19">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-20">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2154-control-20">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-21">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2154-control-21">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-22">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2154-control-22">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
               </li>
             </ul>
diff --git a/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_CustomPointsWithAnotherLegacyGeoSysteme.html b/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_CustomPointsWithAnotherLegacyGeoSysteme.html
index c5d508711ee63787f5d4001a4bf5081ef8dc7016..57cdd23db9b081d3203cf058bc71f3470f7688ea 100644
--- a/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_CustomPointsWithAnotherLegacyGeoSysteme.html
+++ b/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_CustomPointsWithAnotherLegacyGeoSysteme.html
@@ -300,85 +300,85 @@
 <div>
   <div class="fr-tabs" style="--tabs-height: 0px;">
     <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-      <li role="presentation"><button id="tabpanel-carte-271" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-271-panel">Carte</button></li>
-      <li role="presentation"><button id="tabpanel-points-271" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-271-panel">Tableau</button></li>
+      <li role="presentation"><button id="tabpanel-carte-test" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-test-panel">Carte</button></li>
+      <li role="presentation"><button id="tabpanel-points-test" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-test-panel">Tableau</button></li>
     </ul>
-    <div id="tabpanel-carte-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-271" tabindex="0">
+    <div id="tabpanel-carte-test-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-test" tabindex="0">
       <!---->
     </div>
-    <div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
+    <div id="tabpanel-points-test-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-test" tabindex="0">
       <div style="display: flex; flex-direction: column;">
-        <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_670">Système géographique</label>
-          <div id="typeahead_geosysteme_670_wrapper" class="_typeahead_8eddf1">
-            <div class="flex"><input id="typeahead_geosysteme_670" type="text" title="" name="typeahead_geosysteme_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_670-control" aria-activedescendant="typeahead_geosysteme_670-control" aria-expanded="false" aria-autocomplete="list" value="RGFG95 - (4624)"></div>
-            <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_670-control" role="listbox">
-              <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_670-control-0">
+        <div class="fr-select-group"><label class="fr-label" for="4624">Système géographique</label>
+          <div id="4624_wrapper" class="_typeahead_8eddf1">
+            <div class="flex"><input id="4624" type="text" title="" name="4624" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="4624-control" aria-activedescendant="4624-control" aria-expanded="false" aria-autocomplete="list" value="RGFG95 - (4624)"></div>
+            <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="4624-control" role="listbox">
+              <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="4624-control-0">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-1">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-1">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-2">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-2">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-3">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-3">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-4">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-4">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-5">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-5">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-6">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-6">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">WGS84 - (4326)</span><span class="fr-text">Monde</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-7">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-7">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-8">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-8">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-9">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-9">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-10">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-10">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-11">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-11">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-12">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-12">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-13">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-13">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-14">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-14">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-15">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-15">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-16">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-16">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-17">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-17">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-18">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-18">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-19">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-19">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-20">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-20">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-21">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-21">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-22">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-22">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
               </li>
             </ul>
diff --git a/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_CustomPointsWithoutNameAndDesc.html b/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_CustomPointsWithoutNameAndDesc.html
index 547a7a6696e73c6846b7b7cfdb3a42cf65dce901..f08b5a07433ec26d25a55ea1505329b33fde2db7 100644
--- a/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_CustomPointsWithoutNameAndDesc.html
+++ b/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_CustomPointsWithoutNameAndDesc.html
@@ -300,85 +300,85 @@
 <div>
   <div class="fr-tabs" style="--tabs-height: 0px;">
     <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-      <li role="presentation"><button id="tabpanel-carte-271" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-271-panel">Carte</button></li>
-      <li role="presentation"><button id="tabpanel-points-271" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-271-panel">Tableau</button></li>
+      <li role="presentation"><button id="tabpanel-carte-test" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-test-panel">Carte</button></li>
+      <li role="presentation"><button id="tabpanel-points-test" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-test-panel">Tableau</button></li>
     </ul>
-    <div id="tabpanel-carte-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-271" tabindex="0">
+    <div id="tabpanel-carte-test-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-test" tabindex="0">
       <!---->
     </div>
-    <div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
+    <div id="tabpanel-points-test-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-test" tabindex="0">
       <div style="display: flex; flex-direction: column;">
-        <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_670">Système géographique</label>
-          <div id="typeahead_geosysteme_670_wrapper" class="_typeahead_8eddf1">
-            <div class="flex"><input id="typeahead_geosysteme_670" type="text" title="" name="typeahead_geosysteme_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_670-control" aria-activedescendant="typeahead_geosysteme_670-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
-            <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_670-control" role="listbox">
-              <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_670-control-0">
+        <div class="fr-select-group"><label class="fr-label" for="4326">Système géographique</label>
+          <div id="4326_wrapper" class="_typeahead_8eddf1">
+            <div class="flex"><input id="4326" type="text" title="" name="4326" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="4326-control" aria-activedescendant="4326-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+            <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="4326-control" role="listbox">
+              <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="4326-control-0">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-1">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-1">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-2">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-2">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-3">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-3">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-4">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-4">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-5">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-5">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-6">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-6">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-7">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-7">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-8">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-8">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-9">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-9">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-10">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-10">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-11">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-11">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-12">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-12">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-13">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-13">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-14">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-14">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-15">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-15">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-16">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-16">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-17">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-17">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-18">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-18">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-19">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-19">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-20">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-20">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-21">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-21">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-22">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-22">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
               </li>
             </ul>
diff --git a/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_Default.html b/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_Default.html
index f66d97b7fe890bf9549876c488a6e9ef8982df6a..aa81f34ebf3895db2bf47753912d1b1621704132 100644
--- a/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_Default.html
+++ b/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_Default.html
@@ -300,13 +300,14 @@
 <div>
   <div class="fr-tabs" style="--tabs-height: 0px;">
     <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-      <li role="presentation"><button id="tabpanel-carte-271" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Carte" aria-selected="true" aria-controls="tabpanel-carte-271-panel">Carte</button></li>
-      <li role="presentation"><button id="tabpanel-points-271" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Tableau" aria-selected="false" aria-controls="tabpanel-points-271-panel">Tableau</button></li>
+      <li role="presentation"><button id="tabpanel-carte-test" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Carte" aria-selected="true" aria-controls="tabpanel-carte-test-panel">Carte</button></li>
+      <li role="presentation"><button id="tabpanel-points-test" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Tableau" aria-selected="false" aria-controls="tabpanel-points-test-panel">Tableau</button></li>
     </ul>
-    <div id="tabpanel-carte-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-carte-271" tabindex="0">
+    <div id="tabpanel-carte-test-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-carte-test" tabindex="0">
       <div style="display: flex; flex-direction: column;">
-        <mocked-map perimetre="[object Object]" titretypeid="axm" style="min-height: 400px;" class="fr-mb-1w" maxmarkers="20" neighbours="[object Object]">
+        <mocked-map perimetre="[object Object]" id="test" titretypeid="axm" style="min-height: 400px;" class="fr-mb-1w" maxmarkers="20" neighbours="[object Object]">
           <perimetre>{"geojson4326_perimetre":{"type":"Feature","properties":{},"geometry":{"type":"MultiPolygon","coordinates":[[[[-52.5660583466962,4.23944263425535],[-52.5591878553913,4.22269896902571],[-52.5550566725882,4.22438936251509],[-52.5619271168799,4.24113309117193],[-52.5660583466962,4.23944263425535]]]]}},"geojson4326_points":{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-52.5660583466962,4.23944263425535]},"properties":{"nom":"A","description":"Polygone 1","latitude":"4.23944263425535","longitude":"-52.5660583466962"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-52.5591878553913,4.22269896902571]},"properties":{"nom":"B","description":"Polygone 1","latitude":"4.22269896902571","longitude":"-52.5591878553913"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-52.5550566725882,4.22438936251509]},"properties":{"nom":"C","description":"Polygone 1","latitude":"4.22438936251509","longitude":"-52.5550566725882"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-52.5619271168799,4.24113309117193]},"properties":{"nom":"D","description":"Polygone 1","latitude":"4.24113309117193","longitude":"-52.5619271168799"}}]},"geojson_origine_perimetre":{"type":"Feature","properties":{},"geometry":{"type":"MultiPolygon","coordinates":[[[[-52.5660583466962,4.23944263425535],[-52.5591878553913,4.22269896902571],[-52.5550566725882,4.22438936251509],[-52.5619271168799,4.24113309117193],[-52.5660583466962,4.23944263425535]]]]}},"geojson_origine_points":{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-52.5660583466962,4.23944263425535]},"properties":{"nom":"A","description":"Polygone 1","latitude":"4.23944263425535","longitude":"-52.5660583466962"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-52.5591878553913,4.22269896902571]},"properties":{"nom":"B","description":"Polygone 1","latitude":"4.22269896902571","longitude":"-52.5591878553913"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-52.5550566725882,4.22438936251509]},"properties":{"nom":"C","description":"Polygone 1","latitude":"4.22438936251509","longitude":"-52.5550566725882"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-52.5619271168799,4.24113309117193]},"properties":{"nom":"D","description":"Polygone 1","latitude":"4.24113309117193","longitude":"-52.5619271168799"}}]},"geojson_origine_geo_systeme_id":"4326","geojson4326_forages":null,"geojson_origine_forages":null,"surface":3}</perimetre>
+          <id>"test"</id>
           <titretypeid>"axm"</titretypeid>
           <style>
             {
@@ -325,7 +326,7 @@
         </div>
       </div>
     </div>
-    <div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-end" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
+    <div id="tabpanel-points-test-panel" class="fr-tabs__panel fr-tabs__panel--direction-end" role="tabpanel" aria-labelledby="tabpanel-points-test" tabindex="0">
       <!---->
     </div>
   </div>
diff --git a/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_Multiple.html b/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_Multiple.html
index 726b915d227448bd12bf1638aeff923370d9d5b9..0660c4d1647a0bc085cfeb2636fc03cb579d138f 100644
--- a/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_Multiple.html
+++ b/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_Multiple.html
@@ -300,13 +300,14 @@
 <div>
   <div class="fr-tabs" style="--tabs-height: 0px;">
     <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-      <li role="presentation"><button id="tabpanel-carte-271" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Carte" aria-selected="true" aria-controls="tabpanel-carte-271-panel">Carte</button></li>
-      <li role="presentation"><button id="tabpanel-points-271" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Tableau" aria-selected="false" aria-controls="tabpanel-points-271-panel">Tableau</button></li>
+      <li role="presentation"><button id="tabpanel-carte-test" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Carte" aria-selected="true" aria-controls="tabpanel-carte-test-panel">Carte</button></li>
+      <li role="presentation"><button id="tabpanel-points-test" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Tableau" aria-selected="false" aria-controls="tabpanel-points-test-panel">Tableau</button></li>
     </ul>
-    <div id="tabpanel-carte-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-carte-271" tabindex="0">
+    <div id="tabpanel-carte-test-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-carte-test" tabindex="0">
       <div style="display: flex; flex-direction: column;">
-        <mocked-map perimetre="[object Object]" titretypeid="axm" style="min-height: 400px;" class="fr-mb-1w" maxmarkers="20" neighbours="[object Object]">
+        <mocked-map perimetre="[object Object]" id="test" titretypeid="axm" style="min-height: 400px;" class="fr-mb-1w" maxmarkers="20" neighbours="[object Object]">
           <perimetre>{"geojson4326_perimetre":{"properties":{},"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[-53.58181013905019,3.8309654861273],[-53.58178306390299,3.8219278216269807],[-53.572785590706495,3.82195493825841],[-53.57281257175149,3.8309926670647294],[-53.58181013905019,3.8309654861273]]],[[[-53.60031408473134,3.8224780986447566],[-53.59891645305842,3.8181831495446303],[-53.58181205656814,3.82379854768971],[-53.58320964990986,3.828093576227541],[-53.60031408473134,3.8224780986447566]]],[[[-53.583861926103765,3.8502114455117433],[-53.592379712320195,3.834289122043602],[-53.588417035915334,3.8321501920354253],[-53.57989914401643,3.8480725119510217],[-53.583861926103765,3.8502114455117433]]]]}},"geojson_origine_perimetre":{"properties":{},"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[-53.58181013905019,3.8309654861273],[-53.58178306390299,3.8219278216269807],[-53.572785590706495,3.82195493825841],[-53.57281257175149,3.8309926670647294],[-53.58181013905019,3.8309654861273]]],[[[-53.60031408473134,3.8224780986447566],[-53.59891645305842,3.8181831495446303],[-53.58181205656814,3.82379854768971],[-53.58320964990986,3.828093576227541],[-53.60031408473134,3.8224780986447566]]],[[[-53.583861926103765,3.8502114455117433],[-53.592379712320195,3.834289122043602],[-53.588417035915334,3.8321501920354253],[-53.57989914401643,3.8480725119510217],[-53.583861926103765,3.8502114455117433]]]]}},"geojson_origine_points":{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-53.58181013905019,3.8309654861273]},"properties":{"nom":"A","description":"Polygone 1","latitude":"3.8309654861273","longitude":"-53.58181013905019"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-53.58178306390299,3.8219278216269807]},"properties":{"nom":"B","description":"Polygone 1","latitude":"3.8219278216269807","longitude":"-53.58178306390299"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-53.572785590706495,3.82195493825841]},"properties":{"nom":"C","description":"Polygone 1","latitude":"3.82195493825841","longitude":"-53.572785590706495"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-53.57281257175149,3.8309926670647294]},"properties":{"nom":"D","description":"Polygone 1","latitude":"3.8309926670647294","longitude":"-53.57281257175149"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-53.60031408473134,3.8224780986447566]},"properties":{"nom":"E","description":"Polygone 2","latitude":"3.8224780986447566","longitude":"-53.60031408473134"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-53.59891645305842,3.8181831495446303]},"properties":{"nom":"F","description":"Polygone 2","latitude":"3.8181831495446303","longitude":"-53.59891645305842"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-53.58181205656814,3.82379854768971]},"properties":{"nom":"G","description":"Polygone 2","latitude":"3.82379854768971","longitude":"-53.58181205656814"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-53.58320964990986,3.828093576227541]},"properties":{"nom":"H","description":"Polygone 2","latitude":"3.828093576227541","longitude":"-53.58320964990986"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-53.583861926103765,3.8502114455117433]},"properties":{"nom":"I","description":"Polygone 3","latitude":"3.8502114455117433","longitude":"-53.583861926103765"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-53.592379712320195,3.834289122043602]},"properties":{"nom":"J","description":"Polygone 3","latitude":"3.834289122043602","longitude":"-53.592379712320195"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-53.588417035915334,3.8321501920354253]},"properties":{"nom":"K","description":"Polygone 3","latitude":"3.8321501920354253","longitude":"-53.588417035915334"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-53.57989914401643,3.8480725119510217]},"properties":{"nom":"L","description":"Polygone 3","latitude":"3.8480725119510217","longitude":"-53.57989914401643"}}]},"geojson_origine_geo_systeme_id":"4326","geojson4326_points":{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-53.58181013905019,3.8309654861273]},"properties":{"nom":"A","description":"Polygone 1","latitude":"3.8309654861273","longitude":"-53.58181013905019"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-53.58178306390299,3.8219278216269807]},"properties":{"nom":"B","description":"Polygone 1","latitude":"3.8219278216269807","longitude":"-53.58178306390299"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-53.572785590706495,3.82195493825841]},"properties":{"nom":"C","description":"Polygone 1","latitude":"3.82195493825841","longitude":"-53.572785590706495"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-53.57281257175149,3.8309926670647294]},"properties":{"nom":"D","description":"Polygone 1","latitude":"3.8309926670647294","longitude":"-53.57281257175149"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-53.60031408473134,3.8224780986447566]},"properties":{"nom":"E","description":"Polygone 2","latitude":"3.8224780986447566","longitude":"-53.60031408473134"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-53.59891645305842,3.8181831495446303]},"properties":{"nom":"F","description":"Polygone 2","latitude":"3.8181831495446303","longitude":"-53.59891645305842"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-53.58181205656814,3.82379854768971]},"properties":{"nom":"G","description":"Polygone 2","latitude":"3.82379854768971","longitude":"-53.58181205656814"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-53.58320964990986,3.828093576227541]},"properties":{"nom":"H","description":"Polygone 2","latitude":"3.828093576227541","longitude":"-53.58320964990986"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-53.583861926103765,3.8502114455117433]},"properties":{"nom":"I","description":"Polygone 3","latitude":"3.8502114455117433","longitude":"-53.583861926103765"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-53.592379712320195,3.834289122043602]},"properties":{"nom":"J","description":"Polygone 3","latitude":"3.834289122043602","longitude":"-53.592379712320195"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-53.588417035915334,3.8321501920354253]},"properties":{"nom":"K","description":"Polygone 3","latitude":"3.8321501920354253","longitude":"-53.588417035915334"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-53.57989914401643,3.8480725119510217]},"properties":{"nom":"L","description":"Polygone 3","latitude":"3.8480725119510217","longitude":"-53.57989914401643"}}]},"geojson4326_forages":null,"geojson_origine_forages":null,"surface":3}</perimetre>
+          <id>"test"</id>
           <titretypeid>"axm"</titretypeid>
           <style>
             {
@@ -325,7 +326,7 @@
         </div>
       </div>
     </div>
-    <div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-end" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
+    <div id="tabpanel-points-test-panel" class="fr-tabs__panel fr-tabs__panel--direction-end" role="tabpanel" aria-labelledby="tabpanel-points-test" tabindex="0">
       <!---->
     </div>
   </div>
diff --git a/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_MultiplePolygonWithLacuneTableau.html b/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_MultiplePolygonWithLacuneTableau.html
index 1f83794e0a3cc7e2453045e76a731ceb6277ac4b..b60546213cf90c5143a9fe7bfc07718c4df1d0d3 100644
--- a/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_MultiplePolygonWithLacuneTableau.html
+++ b/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_MultiplePolygonWithLacuneTableau.html
@@ -300,85 +300,85 @@
 <div>
   <div class="fr-tabs" style="--tabs-height: 0px;">
     <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-      <li role="presentation"><button id="tabpanel-carte-271" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-271-panel">Carte</button></li>
-      <li role="presentation"><button id="tabpanel-points-271" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-271-panel">Tableau</button></li>
+      <li role="presentation"><button id="tabpanel-carte-test" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-test-panel">Carte</button></li>
+      <li role="presentation"><button id="tabpanel-points-test" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-test-panel">Tableau</button></li>
     </ul>
-    <div id="tabpanel-carte-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-271" tabindex="0">
+    <div id="tabpanel-carte-test-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-test" tabindex="0">
       <!---->
     </div>
-    <div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
+    <div id="tabpanel-points-test-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-test" tabindex="0">
       <div style="display: flex; flex-direction: column;">
-        <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_670">Système géographique</label>
-          <div id="typeahead_geosysteme_670_wrapper" class="_typeahead_8eddf1">
-            <div class="flex"><input id="typeahead_geosysteme_670" type="text" title="" name="typeahead_geosysteme_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_670-control" aria-activedescendant="typeahead_geosysteme_670-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
-            <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_670-control" role="listbox">
-              <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_670-control-0">
+        <div class="fr-select-group"><label class="fr-label" for="4326">Système géographique</label>
+          <div id="4326_wrapper" class="_typeahead_8eddf1">
+            <div class="flex"><input id="4326" type="text" title="" name="4326" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="4326-control" aria-activedescendant="4326-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+            <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="4326-control" role="listbox">
+              <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="4326-control-0">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-1">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-1">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-2">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-2">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-3">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-3">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-4">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-4">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-5">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-5">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-6">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-6">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-7">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-7">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-8">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-8">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-9">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-9">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-10">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-10">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-11">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-11">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-12">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-12">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-13">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-13">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-14">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-14">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-15">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-15">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-16">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-16">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-17">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-17">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-18">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-18">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-19">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-19">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-20">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-20">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-21">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-21">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-22">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-22">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
               </li>
             </ul>
diff --git a/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_NoNeighbors.html b/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_NoNeighbors.html
index 663a0d8f9726329d43efbde7a521fc0cc752f9aa..f061e33e428e33715af9730254a6b99aae7ce288 100644
--- a/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_NoNeighbors.html
+++ b/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_NoNeighbors.html
@@ -300,13 +300,14 @@
 <div>
   <div class="fr-tabs" style="--tabs-height: 0px;">
     <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-      <li role="presentation"><button id="tabpanel-carte-271" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Carte" aria-selected="true" aria-controls="tabpanel-carte-271-panel">Carte</button></li>
-      <li role="presentation"><button id="tabpanel-points-271" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Tableau" aria-selected="false" aria-controls="tabpanel-points-271-panel">Tableau</button></li>
+      <li role="presentation"><button id="tabpanel-carte-test" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Carte" aria-selected="true" aria-controls="tabpanel-carte-test-panel">Carte</button></li>
+      <li role="presentation"><button id="tabpanel-points-test" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Tableau" aria-selected="false" aria-controls="tabpanel-points-test-panel">Tableau</button></li>
     </ul>
-    <div id="tabpanel-carte-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-carte-271" tabindex="0">
+    <div id="tabpanel-carte-test-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-carte-test" tabindex="0">
       <div style="display: flex; flex-direction: column;">
-        <mocked-map perimetre="[object Object]" titretypeid="axm" style="min-height: 400px;" class="fr-mb-1w" maxmarkers="20">
+        <mocked-map perimetre="[object Object]" id="test" titretypeid="axm" style="min-height: 400px;" class="fr-mb-1w" maxmarkers="20">
           <perimetre>{"geojson4326_perimetre":{"type":"Feature","properties":{},"geometry":{"type":"MultiPolygon","coordinates":[[[[-52.5660583466962,4.23944263425535],[-52.5591878553913,4.22269896902571],[-52.5550566725882,4.22438936251509],[-52.5619271168799,4.24113309117193],[-52.5660583466962,4.23944263425535]]]]}},"geojson4326_points":{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-52.5660583466962,4.23944263425535]},"properties":{"nom":"A","description":"Polygone 1","latitude":"4.23944263425535","longitude":"-52.5660583466962"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-52.5591878553913,4.22269896902571]},"properties":{"nom":"B","description":"Polygone 1","latitude":"4.22269896902571","longitude":"-52.5591878553913"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-52.5550566725882,4.22438936251509]},"properties":{"nom":"C","description":"Polygone 1","latitude":"4.22438936251509","longitude":"-52.5550566725882"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-52.5619271168799,4.24113309117193]},"properties":{"nom":"D","description":"Polygone 1","latitude":"4.24113309117193","longitude":"-52.5619271168799"}}]},"geojson_origine_perimetre":{"type":"Feature","properties":{},"geometry":{"type":"MultiPolygon","coordinates":[[[[-52.5660583466962,4.23944263425535],[-52.5591878553913,4.22269896902571],[-52.5550566725882,4.22438936251509],[-52.5619271168799,4.24113309117193],[-52.5660583466962,4.23944263425535]]]]}},"geojson_origine_points":{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-52.5660583466962,4.23944263425535]},"properties":{"nom":"A","description":"Polygone 1","latitude":"4.23944263425535","longitude":"-52.5660583466962"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-52.5591878553913,4.22269896902571]},"properties":{"nom":"B","description":"Polygone 1","latitude":"4.22269896902571","longitude":"-52.5591878553913"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-52.5550566725882,4.22438936251509]},"properties":{"nom":"C","description":"Polygone 1","latitude":"4.22438936251509","longitude":"-52.5550566725882"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-52.5619271168799,4.24113309117193]},"properties":{"nom":"D","description":"Polygone 1","latitude":"4.24113309117193","longitude":"-52.5619271168799"}}]},"geojson_origine_geo_systeme_id":"4326","geojson4326_forages":null,"geojson_origine_forages":null,"surface":3}</perimetre>
+          <id>"test"</id>
           <titretypeid>"axm"</titretypeid>
           <style>
             {
@@ -325,7 +326,7 @@
         </div>
       </div>
     </div>
-    <div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-end" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
+    <div id="tabpanel-points-test-panel" class="fr-tabs__panel fr-tabs__panel--direction-end" role="tabpanel" aria-labelledby="tabpanel-points-test" tabindex="0">
       <!---->
     </div>
   </div>
diff --git a/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_PolygonWithLacune.html b/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_PolygonWithLacune.html
index 94073aa31fe50b6b4fb8175a9c3936f0e5d6f13c..497fddec1c42b34f9574a49c80ddb30e4c84e364 100644
--- a/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_PolygonWithLacune.html
+++ b/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_PolygonWithLacune.html
@@ -300,13 +300,14 @@
 <div>
   <div class="fr-tabs" style="--tabs-height: 0px;">
     <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-      <li role="presentation"><button id="tabpanel-carte-271" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Carte" aria-selected="true" aria-controls="tabpanel-carte-271-panel">Carte</button></li>
-      <li role="presentation"><button id="tabpanel-points-271" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Tableau" aria-selected="false" aria-controls="tabpanel-points-271-panel">Tableau</button></li>
+      <li role="presentation"><button id="tabpanel-carte-test" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Carte" aria-selected="true" aria-controls="tabpanel-carte-test-panel">Carte</button></li>
+      <li role="presentation"><button id="tabpanel-points-test" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Tableau" aria-selected="false" aria-controls="tabpanel-points-test-panel">Tableau</button></li>
     </ul>
-    <div id="tabpanel-carte-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-carte-271" tabindex="0">
+    <div id="tabpanel-carte-test-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-carte-test" tabindex="0">
       <div style="display: flex; flex-direction: column;">
-        <mocked-map perimetre="[object Object]" titretypeid="axm" style="min-height: 400px;" class="fr-mb-1w" maxmarkers="20" neighbours="[object Object]">
+        <mocked-map perimetre="[object Object]" id="test" titretypeid="axm" style="min-height: 400px;" class="fr-mb-1w" maxmarkers="20" neighbours="[object Object]">
           <perimetre>{"geojson4326_perimetre":{"type":"Feature","properties":{},"geometry":{"type":"MultiPolygon","coordinates":[[[[-52.5660583466962,4.23944263425535],[-52.5591878553913,4.22269896902571],[-52.5550566725882,4.22438936251509],[-52.5619271168799,4.24113309117193],[-52.5660583466962,4.23944263425535]],[[-52.563,4.236],[-52.5591878553913,4.227],[-52.561,4.236],[-52.563,4.236]]]]}},"geojson4326_points":{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-52.5660583466962,4.23944263425535]},"properties":{"nom":"A","description":"Polygone 1","latitude":"4.23944263425535","longitude":"-52.5660583466962"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-52.5591878553913,4.22269896902571]},"properties":{"nom":"B","description":"Polygone 1","latitude":"4.22269896902571","longitude":"-52.5591878553913"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-52.5550566725882,4.22438936251509]},"properties":{"nom":"C","description":"Polygone 1","latitude":"4.22438936251509","longitude":"-52.5550566725882"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-52.5619271168799,4.24113309117193]},"properties":{"nom":"D","description":"Polygone 1","latitude":"4.24113309117193","longitude":"-52.5619271168799"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-52.563,4.236]},"properties":{"nom":"E","description":"Polygone 1 - Lacune 1","latitude":"4.236","longitude":"-52.563"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-52.5591878553913,4.227]},"properties":{"nom":"F","description":"Polygone 1 - Lacune 1","latitude":"4.227","longitude":"-52.5591878553913"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-52.561,4.236]},"properties":{"nom":"G","description":"Polygone 1 - Lacune 1","latitude":"4.236","longitude":"-52.561"}}]},"geojson_origine_perimetre":{"type":"Feature","properties":{},"geometry":{"type":"MultiPolygon","coordinates":[[[[-52.5660583466962,4.23944263425535],[-52.5591878553913,4.22269896902571],[-52.5550566725882,4.22438936251509],[-52.5619271168799,4.24113309117193],[-52.5660583466962,4.23944263425535]],[[-52.563,4.236],[-52.5591878553913,4.227],[-52.561,4.236],[-52.563,4.236]]]]}},"geojson_origine_points":{"type":"FeatureCollection","features":[{"type":"Feature","geometry":{"type":"Point","coordinates":[-52.5660583466962,4.23944263425535]},"properties":{"nom":"A","description":"Polygone 1","latitude":"4.23944263425535","longitude":"-52.5660583466962"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-52.5591878553913,4.22269896902571]},"properties":{"nom":"B","description":"Polygone 1","latitude":"4.22269896902571","longitude":"-52.5591878553913"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-52.5550566725882,4.22438936251509]},"properties":{"nom":"C","description":"Polygone 1","latitude":"4.22438936251509","longitude":"-52.5550566725882"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-52.5619271168799,4.24113309117193]},"properties":{"nom":"D","description":"Polygone 1","latitude":"4.24113309117193","longitude":"-52.5619271168799"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-52.563,4.236]},"properties":{"nom":"E","description":"Polygone 1 - Lacune 1","latitude":"4.236","longitude":"-52.563"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-52.5591878553913,4.227]},"properties":{"nom":"F","description":"Polygone 1 - Lacune 1","latitude":"4.227","longitude":"-52.5591878553913"}},{"type":"Feature","geometry":{"type":"Point","coordinates":[-52.561,4.236]},"properties":{"nom":"G","description":"Polygone 1 - Lacune 1","latitude":"4.236","longitude":"-52.561"}}]},"geojson_origine_geo_systeme_id":"4326","geojson4326_forages":null,"geojson_origine_forages":null,"surface":3}</perimetre>
+          <id>"test"</id>
           <titretypeid>"axm"</titretypeid>
           <style>
             {
@@ -325,7 +326,7 @@
         </div>
       </div>
     </div>
-    <div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-end" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
+    <div id="tabpanel-points-test-panel" class="fr-tabs__panel fr-tabs__panel--direction-end" role="tabpanel" aria-labelledby="tabpanel-points-test" tabindex="0">
       <!---->
     </div>
   </div>
diff --git a/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_WithForages.html b/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_WithForages.html
index 799caf5103dc7590e333ac7e47caf21a3155e77e..13072a7f9bdfa0559435e8bcb2ec3d7b4ca9b631 100644
--- a/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_WithForages.html
+++ b/packages/ui/src/components/_common/dsfr-perimetre.stories_snapshots_WithForages.html
@@ -1,85 +1,85 @@
 <div>
   <div class="fr-tabs" style="--tabs-height: 0px;">
     <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-      <li role="presentation"><button id="tabpanel-carte-271" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-271-panel">Carte</button></li>
-      <li role="presentation"><button id="tabpanel-points-271" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-271-panel">Tableau</button></li>
+      <li role="presentation"><button id="tabpanel-carte-test" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-test-panel">Carte</button></li>
+      <li role="presentation"><button id="tabpanel-points-test" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-test-panel">Tableau</button></li>
     </ul>
-    <div id="tabpanel-carte-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-271" tabindex="0">
+    <div id="tabpanel-carte-test-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-test" tabindex="0">
       <!---->
     </div>
-    <div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
+    <div id="tabpanel-points-test-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-test" tabindex="0">
       <div style="display: flex; flex-direction: column;">
-        <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_670">Système géographique</label>
-          <div id="typeahead_geosysteme_670_wrapper" class="_typeahead_8eddf1">
-            <div class="flex"><input id="typeahead_geosysteme_670" type="text" title="" name="typeahead_geosysteme_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_670-control" aria-activedescendant="typeahead_geosysteme_670-control" aria-expanded="false" aria-autocomplete="list" value="RGFG95 - (4624)"></div>
-            <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_670-control" role="listbox">
-              <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_670-control-0">
+        <div class="fr-select-group"><label class="fr-label" for="4624">Système géographique</label>
+          <div id="4624_wrapper" class="_typeahead_8eddf1">
+            <div class="flex"><input id="4624" type="text" title="" name="4624" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="4624-control" aria-activedescendant="4624-control" aria-expanded="false" aria-autocomplete="list" value="RGFG95 - (4624)"></div>
+            <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="4624-control" role="listbox">
+              <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="4624-control-0">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-1">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-1">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-2">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-2">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-3">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-3">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-4">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-4">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-5">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-5">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-6">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-6">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">WGS84 - (4326)</span><span class="fr-text">Monde</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-7">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-7">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-8">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-8">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-9">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-9">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-10">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-10">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-11">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-11">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-12">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-12">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-13">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-13">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-14">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-14">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-15">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-15">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-16">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-16">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-17">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-17">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-18">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-18">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-19">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-19">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-20">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-20">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-21">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-21">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
               </li>
-              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-22">
+              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-22">
                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
               </li>
             </ul>
diff --git a/packages/ui/src/components/_common/dsfr-perimetre.tsx b/packages/ui/src/components/_common/dsfr-perimetre.tsx
index dea55179eff54e1e92adc4d0c7db30b24376de0e..5fe77a1aa2ff5e966ecacc1b646697dfd311fe68 100644
--- a/packages/ui/src/components/_common/dsfr-perimetre.tsx
+++ b/packages/ui/src/components/_common/dsfr-perimetre.tsx
@@ -26,6 +26,7 @@ type Props = {
   }
   titreSlug: TitreSlug
   titreTypeId: TitreTypeId
+  id: string
   initTab?: TabId
   class?: HTMLAttributes['class']
 } & ({ calculateNeighbours: true; router: Pick<CaminoRouter, 'push'>; apiClient: Pick<ApiClient, 'getTitresWithPerimetreForCarte'> } | { calculateNeighbours: false })
@@ -76,7 +77,7 @@ export const DsfrPerimetre = defineComponent<Props>((props: Props) => {
     },
   ] as const satisfies readonly Tab<TabId>[]
 
-  return () => <Tabs initTab={props.initTab ?? 'carte'} tabs={vues} tabsTitle={'Affichage des titres en vue carte ou tableau'} tabClicked={_newTabId => {}} />
+  return () => <Tabs id={props.id} initTab={props.initTab ?? 'carte'} tabs={vues} tabsTitle={'Affichage des titres en vue carte ou tableau'} tabClicked={_newTabId => {}} />
 })
 
 type TabCaminoMapProps = OmitDistributive<Props, 'perimetre'> & {
@@ -115,7 +116,7 @@ const TabCaminoMap = defineComponent<TabCaminoMapProps>(props => {
 
   return () => (
     <div style={{ display: 'flex', flexDirection: 'column' }}>
-      <DemarcheMap perimetre={props.perimetre} titreTypeId={props.titreTypeId} style={{ minHeight: '400px' }} class="fr-mb-1w" maxMarkers={maxRows} neighbours={neighbours} />
+      <DemarcheMap perimetre={props.perimetre} id={props.id} titreTypeId={props.titreTypeId} style={{ minHeight: '400px' }} class="fr-mb-1w" maxMarkers={maxRows} neighbours={neighbours} />
       <div style={{ display: 'flex' }}>
         {isNotNullNorUndefined(props.perimetre.surface) ? <div class="fr-text--md">Surface : {props.perimetre.surface} Km²</div> : null}
         <div style={{ marginLeft: 'auto' }}>
@@ -145,7 +146,7 @@ const TabCaminoMap = defineComponent<TabCaminoMapProps>(props => {
 })
 
 // @ts-ignore waiting for https://github.com/vuejs/core/issues/7833
-DsfrPerimetre.props = ['perimetre', 'apiClient', 'titreSlug', 'titreTypeId', 'router', 'initTab', 'calculateNeighbours']
+DsfrPerimetre.props = ['id', 'perimetre', 'apiClient', 'titreSlug', 'titreTypeId', 'router', 'initTab', 'calculateNeighbours']
 
 // @ts-ignore waiting for https://github.com/vuejs/core/issues/7833
-TabCaminoMap.props = ['perimetre', 'apiClient', 'titreSlug', 'titreTypeId', 'router', 'initTab', 'calculateNeighbours']
+TabCaminoMap.props = ['id', 'perimetre', 'apiClient', 'titreSlug', 'titreTypeId', 'router', 'initTab', 'calculateNeighbours']
diff --git a/packages/ui/src/components/_common/geosysteme-typeahead.stories.tsx b/packages/ui/src/components/_common/geosysteme-typeahead.stories.tsx
index 9625f4b15263cdd1f0521f36f5bf2ceedf9a9635..34f59c5db6f7de03c9b7814188b3fdfe403bfe06 100644
--- a/packages/ui/src/components/_common/geosysteme-typeahead.stories.tsx
+++ b/packages/ui/src/components/_common/geosysteme-typeahead.stories.tsx
@@ -11,5 +11,5 @@ export default meta
 
 const geoSystemeSelected = action('geoSystemeSelected')
 
-export const Default: StoryFn = () => <GeoSystemeTypeahead geoSystemeSelected={geoSystemeSelected} disabled={false} alwaysOpen={true} />
-export const WithGeoSystemeAlreadySelected: StoryFn = () => <GeoSystemeTypeahead geoSystemeId="2154" disabled={true} />
+export const Default: StoryFn = () => <GeoSystemeTypeahead id="test" geoSystemeSelected={geoSystemeSelected} disabled={false} alwaysOpen={true} />
+export const WithGeoSystemeAlreadySelected: StoryFn = () => <GeoSystemeTypeahead id="test" geoSystemeId="2154" disabled={true} />
diff --git a/packages/ui/src/components/_common/geosysteme-typeahead.stories_snapshots_Default.html b/packages/ui/src/components/_common/geosysteme-typeahead.stories_snapshots_Default.html
index ba4bc8891315f903d16d96602fd44ea36536b92c..bb9a969d331d2d69a1b571da0dfb8f7b8dfb4a8b 100644
--- a/packages/ui/src/components/_common/geosysteme-typeahead.stories_snapshots_Default.html
+++ b/packages/ui/src/components/_common/geosysteme-typeahead.stories_snapshots_Default.html
@@ -1,74 +1,74 @@
-<div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_271">Système géographique</label>
-  <div id="typeahead_geosysteme_271_wrapper" class="_typeahead_8eddf1">
-    <div class="flex"><input id="typeahead_geosysteme_271" type="text" title="" name="typeahead_geosysteme_271" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_271-control" aria-activedescendant="typeahead_geosysteme_271-control-0" aria-expanded="true" aria-autocomplete="list" value="WGS84 - (4326)"></div>
-    <ul class="_typeahead-list_8eddf1 _typeahead-list--visible_8eddf1" tabindex="-1" id="typeahead_geosysteme_271-control" role="listbox">
-      <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="true" id="typeahead_geosysteme_271-control-0">
+<div class="fr-select-group"><label class="fr-label" for="test">Système géographique</label>
+  <div id="test_wrapper" class="_typeahead_8eddf1">
+    <div class="flex"><input id="test" type="text" title="" name="test" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="test-control" aria-activedescendant="test-control-0" aria-expanded="true" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+    <ul class="_typeahead-list_8eddf1 _typeahead-list--visible_8eddf1" tabindex="-1" id="test-control" role="listbox">
+      <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="true" id="test-control-0">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-1">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-1">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-2">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-2">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-3">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-3">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-4">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-4">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-5">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-5">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-6">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-6">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-7">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-7">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-8">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-8">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-9">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-9">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-10">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-10">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-11">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-11">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-12">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-12">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-13">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-13">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-14">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-14">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-15">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-15">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-16">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-16">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-17">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-17">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-18">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-18">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-19">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-19">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-20">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-20">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-21">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-21">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-22">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-22">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
       </li>
     </ul>
diff --git a/packages/ui/src/components/_common/geosysteme-typeahead.stories_snapshots_WithGeoSystemeAlreadySelected.html b/packages/ui/src/components/_common/geosysteme-typeahead.stories_snapshots_WithGeoSystemeAlreadySelected.html
index 5cc48bb39b4a3b40074dbc89342549ea0b85e176..f2f17f68145fae2724699466f43dfdd43bbe07b3 100644
--- a/packages/ui/src/components/_common/geosysteme-typeahead.stories_snapshots_WithGeoSystemeAlreadySelected.html
+++ b/packages/ui/src/components/_common/geosysteme-typeahead.stories_snapshots_WithGeoSystemeAlreadySelected.html
@@ -1,74 +1,74 @@
-<div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_271">Système géographique</label>
-  <div id="typeahead_geosysteme_271_wrapper" class="_typeahead_8eddf1">
-    <div class="flex"><input id="typeahead_geosysteme_271" type="text" title="" name="typeahead_geosysteme_271" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_271-control" aria-activedescendant="typeahead_geosysteme_271-control" aria-expanded="false" aria-autocomplete="list" value="RGF93 / Lambert-93 - (2154)"></div>
-    <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_271-control" role="listbox">
-      <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_271-control-0">
+<div class="fr-select-group"><label class="fr-label" for="test">Système géographique</label>
+  <div id="test_wrapper" class="_typeahead_8eddf1">
+    <div class="flex"><input id="test" type="text" title="" name="test" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="test-control" aria-activedescendant="test-control" aria-expanded="false" aria-autocomplete="list" value="RGF93 / Lambert-93 - (2154)"></div>
+    <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="test-control" role="listbox">
+      <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="test-control-0">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-1">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-1">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-2">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-2">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-3">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-3">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-4">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-4">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-5">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-5">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">WGS84 - (4326)</span><span class="fr-text">Monde</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-6">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-6">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-7">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-7">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-8">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-8">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-9">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-9">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-10">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-10">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-11">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-11">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-12">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-12">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-13">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-13">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-14">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-14">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-15">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-15">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-16">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-16">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-17">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-17">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-18">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-18">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-19">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-19">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-20">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-20">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-21">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-21">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
       </li>
-      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-22">
+      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-22">
         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
       </li>
     </ul>
diff --git a/packages/ui/src/components/_common/geosysteme-typeahead.tsx b/packages/ui/src/components/_common/geosysteme-typeahead.tsx
index 2f723a0a37a033ddd14d8af82290a3ed873857de..d412923690d9467c209410cba895c864108e11be 100644
--- a/packages/ui/src/components/_common/geosysteme-typeahead.tsx
+++ b/packages/ui/src/components/_common/geosysteme-typeahead.tsx
@@ -4,12 +4,11 @@ import { GeoSysteme, GeoSystemes, GeoSystemeId, sortedGeoSystemes } from 'camino
 import { capitalize } from 'camino-common/src/strings'
 import { isNotNullNorUndefined } from 'camino-common/src/typescript-tools'
 
-import { random } from '@/utils/vue-tsx-utils'
 // https://gitlab-forge.din.developpement-durable.gouv.fr/pub/pnm-public/camino/issues/917
 const mainGeoSystemeIds = ['4326', '2154', '5490', '2972', '2975', '4471', '4467'] as const satisfies readonly GeoSystemeId[]
 
 // TODO 2024-02-26, attention, vue rajoute tous les champs qui sont dans GeoSystemeTypeahead.props et les met à undefined, donc le typage n'est pas tout à fait correct par rapport à la réalité :(
-type Props = { alwaysOpen?: boolean } & (
+type Props = { id: string; alwaysOpen?: boolean } & (
   | {
       geoSystemeSelected: (geoSysteme: GeoSystemeId | null) => void
       disabled: false
@@ -41,7 +40,6 @@ const sortedByUs = [...sortedGeoSystemes].sort((a, b) => {
   return a.nom.localeCompare(b.nom)
 })
 export const GeoSystemeTypeahead = defineComponent<Props>(props => {
-  const id = `typeahead_geosysteme_${(random() * 1000).toFixed()}`
   const geoSystemSelected = ref<GeoSysteme<GeoSystemeId> | undefined>(GeoSystemes[4326])
   const geoSystemUpdate = async (geoSysteme: GeoSysteme<GeoSystemeId> | undefined) => {
     geoSystemSelected.value = geoSysteme
@@ -70,14 +68,14 @@ export const GeoSystemeTypeahead = defineComponent<Props>(props => {
 
   return () => (
     <div class="fr-select-group">
-      <label class="fr-label" for={id}>
+      <label class="fr-label" for={props.id}>
         Système géographique
       </label>
 
       <TypeAheadSingle
         overrideItem={defaultGeoSysteme}
         props={{
-          id,
+          id: props.id,
           items: geoSystemeFiltered.value,
           itemChipLabel: item => `${item.nom} - (${item.id})`,
           itemKey: 'id',
@@ -95,4 +93,4 @@ export const GeoSystemeTypeahead = defineComponent<Props>(props => {
 })
 
 // @ts-ignore waiting for https://github.com/vuejs/core/issues/7833
-GeoSystemeTypeahead.props = ['geoSystemeSelected', 'geoSystemeId', 'disabled', 'alwaysOpen']
+GeoSystemeTypeahead.props = ['id', 'geoSystemeSelected', 'geoSystemeId', 'disabled', 'alwaysOpen']
diff --git a/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_Checkboxes.html b/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_Checkboxes.html
index 487606366362e60f6910af682d11457cf026ba99..675b1e31546b81f569bced50034b1eb8a4952d8d 100644
--- a/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_Checkboxes.html
+++ b/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_Checkboxes.html
@@ -3,20 +3,20 @@
     <!---->
     <div class="fr-fieldset__element">
       <div>
-        <fieldset class="fr-fieldset" id="checkboxes_271" aria-labelledby="checkboxes_271-legend" style="flex-direction: column; align-items: flex-start;">
-          <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes_271-legend">Une checkbox<span class="fr-hint-text">Et quelle belle checkbox</span></legend>
+        <fieldset class="fr-fieldset" id="checkbox" aria-labelledby="checkbox-legend" style="flex-direction: column; align-items: flex-start;">
+          <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkbox-legend">Une checkbox<span class="fr-hint-text">Et quelle belle checkbox</span></legend>
           <div class="fr-fieldset__element">
-            <div class="fr-checkbox-group" itemid="1"><input name="archive" id="checkboxes_271_0" type="checkbox"><label class="fr-label" for="checkboxes_271_0">Nom
+            <div class="fr-checkbox-group" itemid="1"><input name="archive" id="checkbox_0" type="checkbox"><label class="fr-label" for="checkbox_0">Nom
                 <!---->
               </label></div>
           </div>
           <div class="fr-fieldset__element">
-            <div class="fr-checkbox-group" itemid="2"><input name="archive" id="checkboxes_271_1" type="checkbox"><label class="fr-label" for="checkboxes_271_1">Plop
+            <div class="fr-checkbox-group" itemid="2"><input name="archive" id="checkbox_1" type="checkbox"><label class="fr-label" for="checkbox_1">Plop
                 <!---->
               </label></div>
           </div>
           <div class="fr-fieldset__element">
-            <div class="fr-checkbox-group" itemid="3"><input name="archive" id="checkboxes_271_2" type="checkbox"><label class="fr-label" for="checkboxes_271_2">Plop 3
+            <div class="fr-checkbox-group" itemid="3"><input name="archive" id="checkbox_2" type="checkbox"><label class="fr-label" for="checkbox_2">Plop 3
                 <!---->
               </label></div>
           </div>
diff --git a/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_Date.html b/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_Date.html
index 664acb5e60b4fcea28bf14a1c607d5c879f67517..6965683f43c7e93d1042277fc6639cacb4a6d8b6 100644
--- a/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_Date.html
+++ b/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_Date.html
@@ -3,9 +3,9 @@
     <!---->
     <div class="fr-fieldset__element">
       <div>
-        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Une date
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="date">Une date
             <!----><span class="fr-hint-text">au format jj/mm/aaaa</span><span class="fr-hint-text">Et quelle belle date</span>
-          </label><input class="fr-input" name="input_271" id="input_271" required="" type="date">
+          </label><input class="fr-input" name="date" id="date" required="" type="date">
           <!---->
         </div>
       </div>
diff --git a/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_Default.html b/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_Default.html
index f664c737e37050043df263160f43bfae770504ab..8d837ab29e50e0c92d1cbfc11a2e30b45e9d56ce 100644
--- a/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_Default.html
+++ b/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_Default.html
@@ -3,40 +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)
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="orBrut">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">
+          </label><input class="fr-input" name="orBrut" id="orBrut" 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)
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="mercure">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">
+          </label><input class="fr-input" name="mercure" id="mercure" 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)
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="carburantDetaxe">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">
+          </label><input class="fr-input" name="carburantDetaxe" id="carburantDetaxe" 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)
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="carburantConventionnel">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">
+          </label><input class="fr-input" name="carburantConventionnel" id="carburantConventionnel" required="" type="number" min="0">
           <!---->
         </div>
       </div>
@@ -60,29 +60,29 @@
     </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
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="pelles">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">
+          </label><input class="fr-input" name="pelles" id="pelles" 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
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="effectifs">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">
+          </label><input class="fr-input" name="effectifs" id="effectifs" 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) (optionnel)
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="environnement">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">
+          </label><input class="fr-input" name="environnement" id="environnement" type="number" min="0">
           <!---->
         </div>
       </div>
diff --git a/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_ParticipationDuPublic.html b/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_ParticipationDuPublic.html
index 98c3f1a96a1ae2d441381760fd2ad4899f400295..75ba15e865be3a4b50ebc7953d119897ed66930a 100644
--- a/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_ParticipationDuPublic.html
+++ b/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_ParticipationDuPublic.html
@@ -3,11 +3,11 @@
     <!---->
     <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
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="duree">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>
+          </label><input class="fr-input" name="duree" id="duree" required="" type="number" min="0" aria-describedby="duree-info" value="12">
+          <p id="duree-info" class="fr-info-text">Du 12-01-2024 au 23-01-2024 (inclus)</p>
         </div>
       </div>
     </div>
diff --git a/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_TousLesElementsRemplis.html b/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_TousLesElementsRemplis.html
index 8979145da4c6804c341f76bbcc47bf48e01501b7..0f4b08bc4800efea5836b5cf198f1d004d725c29 100644
--- a/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_TousLesElementsRemplis.html
+++ b/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_TousLesElementsRemplis.html
@@ -3,56 +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
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="integer">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">
+          </label><input class="fr-input" name="integer" id="integer" 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
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="number">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">
+          </label><input class="fr-input" name="number" id="number" 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
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="date">date
             <!----><span class="fr-hint-text">au format jj/mm/aaaa</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">
+          </label><input class="fr-input" name="date" id="date" 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
+        <div class="fr-input-group"><label class="fr-label" for="textarea">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>
+          </label><textarea class="fr-input" name="textarea" id="textarea" 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
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="text">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">
+          </label><input class="fr-input" name="text" id="text" 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
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="url">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">
+          </label><input class="fr-input" name="url" id="url" required="" type="text" value="https://google.fr">
           <!---->
         </div>
       </div>
@@ -81,20 +81,20 @@
     </div>
     <div class="fr-fieldset__element">
       <div>
-        <fieldset class="fr-fieldset" id="checkboxes_128" aria-labelledby="checkboxes_128-legend" style="flex-direction: column; align-items: flex-start;">
-          <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes_128-legend">checkboxes<span class="fr-hint-text">Description pour checkboxes</span></legend>
+        <fieldset class="fr-fieldset" id="checkboxes" aria-labelledby="checkboxes-legend" style="flex-direction: column; align-items: flex-start;">
+          <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes-legend">checkboxes<span class="fr-hint-text">Description pour checkboxes</span></legend>
           <div class="fr-fieldset__element">
-            <div class="fr-checkbox-group" itemid="1"><input checked="" name="archive" id="checkboxes_128_0" type="checkbox"><label class="fr-label" for="checkboxes_128_0">Checkbox 1
+            <div class="fr-checkbox-group" itemid="1"><input checked="" name="archive" id="checkboxes_0" type="checkbox"><label class="fr-label" for="checkboxes_0">Checkbox 1
                 <!---->
               </label></div>
           </div>
           <div class="fr-fieldset__element">
-            <div class="fr-checkbox-group" itemid="2"><input checked="" name="archive" id="checkboxes_128_1" type="checkbox"><label class="fr-label" for="checkboxes_128_1">Checkbox2
+            <div class="fr-checkbox-group" itemid="2"><input checked="" name="archive" id="checkboxes_1" type="checkbox"><label class="fr-label" for="checkboxes_1">Checkbox2
                 <!---->
               </label></div>
           </div>
           <div class="fr-fieldset__element">
-            <div class="fr-checkbox-group" itemid="3"><input name="archive" id="checkboxes_128_2" type="checkbox"><label class="fr-label" for="checkboxes_128_2">Checkbox3
+            <div class="fr-checkbox-group" itemid="3"><input name="archive" id="checkboxes_2" type="checkbox"><label class="fr-label" for="checkboxes_2">Checkbox3
                 <!---->
               </label></div>
           </div>
@@ -103,7 +103,7 @@
     </div>
     <div class="fr-fieldset__element">
       <div>
-        <div class="fr-select-group"><label class="fr-label" for="select_772">select <span class="fr-hint-text">Description pour select</span></label><select class="fr-select" id="select_772" aria-label="select" name="select_772" value="deg">
+        <div class="fr-select-group"><label class="fr-label" for="select">select <span class="fr-hint-text">Description pour select</span></label><select class="fr-select" id="select" aria-label="select" name="select" value="deg">
             <option selected="" value="deg">degré</option>
             <option value="gon">grade</option>
             <option value="km3">kilomètre cube</option>
diff --git a/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_TousLesElementsRequis.html b/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_TousLesElementsRequis.html
index 3eb94909be41e001547df42d3b6bee43ee00385f..0b5c0b301203520553f250ee276c7fe7b6123047 100644
--- a/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_TousLesElementsRequis.html
+++ b/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_TousLesElementsRequis.html
@@ -3,56 +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
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="integer">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">
+          </label><input class="fr-input" name="integer" id="integer" 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
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="number">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">
+          </label><input class="fr-input" name="number" id="number" 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
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="date">date
             <!----><span class="fr-hint-text">au format jj/mm/aaaa</span><span class="fr-hint-text">Description pour date</span>
-          </label><input class="fr-input" name="input_74" id="input_74" required="" type="date">
+          </label><input class="fr-input" name="date" id="date" 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
+        <div class="fr-input-group"><label class="fr-label" for="textarea">textarea
             <!----><span class="fr-hint-text">Description pour textarea</span>
-          </label><textarea class="fr-input" name="textarea_878" id="textarea_878" required=""></textarea></div>
+          </label><textarea class="fr-input" name="textarea" id="textarea" 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
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="text">text
             <!---->
             <!----><span class="fr-hint-text">Description pour text</span>
-          </label><input class="fr-input" name="input_967" id="input_967" required="" type="text">
+          </label><input class="fr-input" name="text" id="text" 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
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="url">url
             <!---->
             <!----><span class="fr-hint-text">Description pour url</span>
-          </label><input class="fr-input" name="input_25" id="input_25" required="" type="text">
+          </label><input class="fr-input" name="url" id="url" required="" type="text">
           <!---->
         </div>
       </div>
@@ -81,15 +81,15 @@
     </div>
     <div class="fr-fieldset__element">
       <div>
-        <fieldset class="fr-fieldset" id="checkboxes_128" aria-labelledby="checkboxes_128-legend" style="flex-direction: column; align-items: flex-start;">
-          <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes_128-legend">checkboxes<span class="fr-hint-text">Description pour checkboxes</span></legend>
+        <fieldset class="fr-fieldset" id="checkboxes" aria-labelledby="checkboxes-legend" style="flex-direction: column; align-items: flex-start;">
+          <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes-legend">checkboxes<span class="fr-hint-text">Description pour checkboxes</span></legend>
           <div class="fr-fieldset__element">
-            <div class="fr-checkbox-group" itemid="1"><input name="archive" id="checkboxes_128_0" type="checkbox"><label class="fr-label" for="checkboxes_128_0">Checkbox 1
+            <div class="fr-checkbox-group" itemid="1"><input name="archive" id="checkboxes_0" type="checkbox"><label class="fr-label" for="checkboxes_0">Checkbox 1
                 <!---->
               </label></div>
           </div>
           <div class="fr-fieldset__element">
-            <div class="fr-checkbox-group" itemid="2"><input name="archive" id="checkboxes_128_1" type="checkbox"><label class="fr-label" for="checkboxes_128_1">Checkbox2
+            <div class="fr-checkbox-group" itemid="2"><input name="archive" id="checkboxes_1" type="checkbox"><label class="fr-label" for="checkboxes_1">Checkbox2
                 <!---->
               </label></div>
           </div>
@@ -98,7 +98,7 @@
     </div>
     <div class="fr-fieldset__element">
       <div>
-        <div class="fr-select-group"><label class="fr-label" for="select_772">select <span class="fr-hint-text">Description pour select</span></label><select class="fr-select" id="select_772" aria-label="select" name="select_772">
+        <div class="fr-select-group"><label class="fr-label" for="select">select <span class="fr-hint-text">Description pour select</span></label><select class="fr-select" id="select" aria-label="select" name="select">
             <option value="deg">degré</option>
             <option value="gon">grade</option>
             <option value="km3">kilomètre cube</option>
diff --git a/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_TousLesElementsVidesOptionnels.html b/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_TousLesElementsVidesOptionnels.html
index cd03008e6b86131fb966c3ddccc580c213d8dc7d..53c0fb585bc30c56123237759a4f2c024775b517 100644
--- a/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_TousLesElementsVidesOptionnels.html
+++ b/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_TousLesElementsVidesOptionnels.html
@@ -3,48 +3,48 @@
     <!---->
     <div class="fr-fieldset__element">
       <div>
-        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">integer (optionnel)
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="integer">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">
+          </label><input class="fr-input" name="integer" id="integer" 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 (optionnel)
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="number">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">
+          </label><input class="fr-input" name="number" id="number" 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 (optionnel)<span class="fr-hint-text">au format jj/mm/aaaa</span><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="date">date (optionnel)<span class="fr-hint-text">au format jj/mm/aaaa</span><span class="fr-hint-text">Description pour date</span></label><input class="fr-input" name="date" id="date" type="date">
           <!---->
         </div>
       </div>
     </div>
     <div class="fr-fieldset__element">
       <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 class="fr-input-group"><label class="fr-label" for="textarea">textarea (optionnel)<span class="fr-hint-text">Description pour textarea</span></label><textarea class="fr-input" name="textarea" id="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 (optionnel)
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="text">text (optionnel)
             <!----><span class="fr-hint-text">Description pour text</span>
-          </label><input class="fr-input" name="input_967" id="input_967" type="text">
+          </label><input class="fr-input" name="text" id="text" 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 (optionnel)
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="url">url (optionnel)
             <!----><span class="fr-hint-text">Description pour url</span>
-          </label><input class="fr-input" name="input_25" id="input_25" type="text">
+          </label><input class="fr-input" name="url" id="url" type="text">
           <!---->
         </div>
       </div>
@@ -73,15 +73,15 @@
     </div>
     <div class="fr-fieldset__element">
       <div>
-        <fieldset class="fr-fieldset" id="checkboxes_128" aria-labelledby="checkboxes_128-legend" style="flex-direction: column; align-items: flex-start;">
-          <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes_128-legend">checkboxes<span class="fr-hint-text">Description pour checkboxes</span></legend>
+        <fieldset class="fr-fieldset" id="checkboxes" aria-labelledby="checkboxes-legend" style="flex-direction: column; align-items: flex-start;">
+          <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes-legend">checkboxes<span class="fr-hint-text">Description pour checkboxes</span></legend>
           <div class="fr-fieldset__element">
-            <div class="fr-checkbox-group" itemid="1"><input name="archive" id="checkboxes_128_0" type="checkbox"><label class="fr-label" for="checkboxes_128_0">Checkbox 1
+            <div class="fr-checkbox-group" itemid="1"><input name="archive" id="checkboxes_0" type="checkbox"><label class="fr-label" for="checkboxes_0">Checkbox 1
                 <!---->
               </label></div>
           </div>
           <div class="fr-fieldset__element">
-            <div class="fr-checkbox-group" itemid="2"><input name="archive" id="checkboxes_128_1" type="checkbox"><label class="fr-label" for="checkboxes_128_1">Checkbox2
+            <div class="fr-checkbox-group" itemid="2"><input name="archive" id="checkboxes_1" type="checkbox"><label class="fr-label" for="checkboxes_1">Checkbox2
                 <!---->
               </label></div>
           </div>
@@ -90,7 +90,7 @@
     </div>
     <div class="fr-fieldset__element">
       <div>
-        <div class="fr-select-group"><label class="fr-label" for="select_772">select (optionnel)<span class="fr-hint-text">Description pour select</span></label><select class="fr-select" id="select_772" aria-label="select" name="select_772">
+        <div class="fr-select-group"><label class="fr-label" for="select">select (optionnel)<span class="fr-hint-text">Description pour select</span></label><select class="fr-select" id="select" aria-label="select" name="select">
             <option value="deg">degré</option>
             <option value="gon">grade</option>
             <option value="km3">kilomètre cube</option>
diff --git a/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_ToutesLesActivites.html b/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_ToutesLesActivites.html
index bc47c9b89b895f012d7177058736c902775ab0d6..49d3ce1065f5d1eea8ea4dd97bf29c0e0109355a 100644
--- a/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_ToutesLesActivites.html
+++ b/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_ToutesLesActivites.html
@@ -11,10 +11,10 @@
           <legend class="fr-fieldset__legend" id="substancesFiscales-legend">Production annuelle</legend>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">or
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="auru">or
                   <!---->
                   <!----><span class="fr-hint-text"><b>g (gramme)</b> contenu dans les minerais</span>
-                </label><input class="fr-input" name="input_271" id="input_271" required="" type="number" min="0">
+                </label><input class="fr-input" name="auru" id="auru" required="" type="number" min="0">
                 <!---->
               </div>
             </div>
@@ -24,7 +24,7 @@
           <legend class="fr-fieldset__legend" id="complement-legend">Informations complémentaires</legend>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group"><label class="fr-label" for="textarea_670"> Champ optionnel<span class="fr-hint-text">Toute information utile à la compréhension de la production déclarée.</span></label><textarea class="fr-input" name="textarea_670" id="textarea_670"></textarea></div>
+              <div class="fr-input-group"><label class="fr-label" for="texte"> Champ optionnel<span class="fr-hint-text">Toute information utile à la compréhension de la production déclarée.</span></label><textarea class="fr-input" name="texte" id="texte"></textarea></div>
             </div>
           </div>
         </fieldset>
@@ -39,110 +39,110 @@
           <!---->
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Or brut extrait (g)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="orBrut">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_74" id="input_74" required="" type="number" min="0">
+                </label><input class="fr-input" name="orBrut" id="orBrut" 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">Or extrait (g)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="orExtrait">Or extrait (g)
                   <!---->
                   <!----><span class="fr-hint-text">Masse d'or brut en sortie de mine, ou nette obtenue  après traitement métallurgique, extrait au cours du trimestre.</span>
-                </label><input class="fr-input" name="input_878" id="input_878" required="" type="number" min="0">
+                </label><input class="fr-input" name="orExtrait" id="orExtrait" 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_967">Minerai extrait (m3)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="volumeMinerai">Minerai extrait (m3)
                   <!---->
                   <!----><span class="fr-hint-text">Volume en mètre cube de minerai extrait au cours du trimestre.</span>
-                </label><input class="fr-input" name="input_967" id="input_967" required="" type="number" min="0">
+                </label><input class="fr-input" name="volumeMinerai" id="volumeMinerai" 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">Mercure récupéré (g)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="mercure">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_25" id="input_25" required="" type="number" min="0">
+                </label><input class="fr-input" name="mercure" id="mercure" 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">Carburant détaxé (l)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="carburantDetaxe">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_128" id="input_128" required="" type="number" min="0">
+                </label><input class="fr-input" name="carburantDetaxe" id="carburantDetaxe" 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_772">Carburant conventionnel (l)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="carburantConventionnel">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_772" id="input_772" required="" type="number" min="0">
+                </label><input class="fr-input" name="carburantConventionnel" id="carburantConventionnel" 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_453">Pompes actives
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="pompes">Pompes actives
                   <!---->
                   <!----><span class="fr-hint-text">Nombre moyen de pompes actives au cours du trimestre utilisées sur le chantier (pompe à gravier, pompe de relevage…).</span>
-                </label><input class="fr-input" name="input_453" id="input_453" required="" type="number" min="0">
+                </label><input class="fr-input" name="pompes" id="pompes" 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_556">Pelles actives
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="pelles">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_556" id="input_556" required="" type="number" min="0">
+                </label><input class="fr-input" name="pelles" id="pelles" 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_487">Effectifs
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="effectifs">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_487" id="input_487" required="" type="number" min="0">
+                </label><input class="fr-input" name="effectifs" id="effectifs" 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_796">Dépenses totales (euros)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="depensesTotales">Dépenses totales (euros)
                   <!---->
                   <!----><span class="fr-hint-text">Montant en euros des dépenses sur l'exploitation.</span>
-                </label><input class="fr-input" name="input_796" id="input_796" required="" type="number" min="0">
+                </label><input class="fr-input" name="depensesTotales" id="depensesTotales" 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_216">Dépenses relatives à la protection de l'environnement (euros)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="environnement">Dépenses relatives à la protection de l'environnement (euros)
                   <!---->
                   <!----><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" title="Page de l'article - site externe" 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_216" id="input_216" required="" type="number" min="0">
+                </label><input class="fr-input" name="environnement" id="environnement" required="" type="number" min="0">
                 <!---->
               </div>
             </div>
@@ -152,32 +152,32 @@
           <legend class="fr-fieldset__legend" id="travaux-legend">Statut des travaux</legend>
           <div class="fr-fieldset__element">
             <div>
-              <fieldset class="fr-fieldset" id="checkboxes_482" aria-labelledby="checkboxes_482-legend" style="flex-direction: column; align-items: flex-start;">
-                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes_482-legend">Janvier
+              <fieldset class="fr-fieldset" id="1" aria-labelledby="1-legend" style="flex-direction: column; align-items: flex-start;">
+                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="1-legend">Janvier
                   <!---->
                 </legend>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="checkboxes_482_0" type="checkbox"><label class="fr-label" for="checkboxes_482_0">Non débutés
+                  <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="1_0" type="checkbox"><label class="fr-label" for="1_0">Non débutés
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="checkboxes_482_1" type="checkbox"><label class="fr-label" for="checkboxes_482_1">Exploitation en cours
+                  <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="1_1" type="checkbox"><label class="fr-label" for="1_1">Exploitation en cours
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="checkboxes_482_2" type="checkbox"><label class="fr-label" for="checkboxes_482_2">Arrêt temporaire
+                  <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="1_2" type="checkbox"><label class="fr-label" for="1_2">Arrêt temporaire
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="checkboxes_482_3" type="checkbox"><label class="fr-label" for="checkboxes_482_3">Réhabilitation
+                  <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="1_3" type="checkbox"><label class="fr-label" for="1_3">Réhabilitation
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="checkboxes_482_4" type="checkbox"><label class="fr-label" for="checkboxes_482_4">Arrêt définitif (après réhabilitation)
+                  <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="1_4" type="checkbox"><label class="fr-label" for="1_4">Arrêt définitif (après réhabilitation)
                       <!---->
                     </label></div>
                 </div>
@@ -186,32 +186,32 @@
           </div>
           <div class="fr-fieldset__element">
             <div>
-              <fieldset class="fr-fieldset" id="checkboxes_585" aria-labelledby="checkboxes_585-legend" style="flex-direction: column; align-items: flex-start;">
-                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes_585-legend">Février
+              <fieldset class="fr-fieldset" id="2" aria-labelledby="2-legend" style="flex-direction: column; align-items: flex-start;">
+                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="2-legend">Février
                   <!---->
                 </legend>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="checkboxes_585_0" type="checkbox"><label class="fr-label" for="checkboxes_585_0">Non débutés
+                  <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="2_0" type="checkbox"><label class="fr-label" for="2_0">Non débutés
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="checkboxes_585_1" type="checkbox"><label class="fr-label" for="checkboxes_585_1">Exploitation en cours
+                  <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="2_1" type="checkbox"><label class="fr-label" for="2_1">Exploitation en cours
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="checkboxes_585_2" type="checkbox"><label class="fr-label" for="checkboxes_585_2">Arrêt temporaire
+                  <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="2_2" type="checkbox"><label class="fr-label" for="2_2">Arrêt temporaire
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="checkboxes_585_3" type="checkbox"><label class="fr-label" for="checkboxes_585_3">Réhabilitation
+                  <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="2_3" type="checkbox"><label class="fr-label" for="2_3">Réhabilitation
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="checkboxes_585_4" type="checkbox"><label class="fr-label" for="checkboxes_585_4">Arrêt définitif (après réhabilitation)
+                  <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="2_4" type="checkbox"><label class="fr-label" for="2_4">Arrêt définitif (après réhabilitation)
                       <!---->
                     </label></div>
                 </div>
@@ -220,32 +220,32 @@
           </div>
           <div class="fr-fieldset__element">
             <div>
-              <fieldset class="fr-fieldset" id="checkboxes_759" aria-labelledby="checkboxes_759-legend" style="flex-direction: column; align-items: flex-start;">
-                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes_759-legend">Mars
+              <fieldset class="fr-fieldset" id="3" aria-labelledby="3-legend" style="flex-direction: column; align-items: flex-start;">
+                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="3-legend">Mars
                   <!---->
                 </legend>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="checkboxes_759_0" type="checkbox"><label class="fr-label" for="checkboxes_759_0">Non débutés
+                  <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="3_0" type="checkbox"><label class="fr-label" for="3_0">Non débutés
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="checkboxes_759_1" type="checkbox"><label class="fr-label" for="checkboxes_759_1">Exploitation en cours
+                  <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="3_1" type="checkbox"><label class="fr-label" for="3_1">Exploitation en cours
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="checkboxes_759_2" type="checkbox"><label class="fr-label" for="checkboxes_759_2">Arrêt temporaire
+                  <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="3_2" type="checkbox"><label class="fr-label" for="3_2">Arrêt temporaire
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="checkboxes_759_3" type="checkbox"><label class="fr-label" for="checkboxes_759_3">Réhabilitation
+                  <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="3_3" type="checkbox"><label class="fr-label" for="3_3">Réhabilitation
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="checkboxes_759_4" type="checkbox"><label class="fr-label" for="checkboxes_759_4">Arrêt définitif (après réhabilitation)
+                  <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="3_4" type="checkbox"><label class="fr-label" for="3_4">Arrêt définitif (après réhabilitation)
                       <!---->
                     </label></div>
                 </div>
@@ -254,32 +254,32 @@
           </div>
           <div class="fr-fieldset__element">
             <div>
-              <fieldset class="fr-fieldset" id="checkboxes_58" aria-labelledby="checkboxes_58-legend" style="flex-direction: column; align-items: flex-start;">
-                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes_58-legend">Avril
+              <fieldset class="fr-fieldset" id="4" aria-labelledby="4-legend" style="flex-direction: column; align-items: flex-start;">
+                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="4-legend">Avril
                   <!---->
                 </legend>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="checkboxes_58_0" type="checkbox"><label class="fr-label" for="checkboxes_58_0">Non débutés
+                  <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="4_0" type="checkbox"><label class="fr-label" for="4_0">Non débutés
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="checkboxes_58_1" type="checkbox"><label class="fr-label" for="checkboxes_58_1">Exploitation en cours
+                  <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="4_1" type="checkbox"><label class="fr-label" for="4_1">Exploitation en cours
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="checkboxes_58_2" type="checkbox"><label class="fr-label" for="checkboxes_58_2">Arrêt temporaire
+                  <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="4_2" type="checkbox"><label class="fr-label" for="4_2">Arrêt temporaire
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="checkboxes_58_3" type="checkbox"><label class="fr-label" for="checkboxes_58_3">Réhabilitation
+                  <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="4_3" type="checkbox"><label class="fr-label" for="4_3">Réhabilitation
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="checkboxes_58_4" type="checkbox"><label class="fr-label" for="checkboxes_58_4">Arrêt définitif (après réhabilitation)
+                  <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="4_4" type="checkbox"><label class="fr-label" for="4_4">Arrêt définitif (après réhabilitation)
                       <!---->
                     </label></div>
                 </div>
@@ -288,32 +288,32 @@
           </div>
           <div class="fr-fieldset__element">
             <div>
-              <fieldset class="fr-fieldset" id="checkboxes_661" aria-labelledby="checkboxes_661-legend" style="flex-direction: column; align-items: flex-start;">
-                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes_661-legend">Mai
+              <fieldset class="fr-fieldset" id="5" aria-labelledby="5-legend" style="flex-direction: column; align-items: flex-start;">
+                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="5-legend">Mai
                   <!---->
                 </legend>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="checkboxes_661_0" type="checkbox"><label class="fr-label" for="checkboxes_661_0">Non débutés
+                  <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="5_0" type="checkbox"><label class="fr-label" for="5_0">Non débutés
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="checkboxes_661_1" type="checkbox"><label class="fr-label" for="checkboxes_661_1">Exploitation en cours
+                  <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="5_1" type="checkbox"><label class="fr-label" for="5_1">Exploitation en cours
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="checkboxes_661_2" type="checkbox"><label class="fr-label" for="checkboxes_661_2">Arrêt temporaire
+                  <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="5_2" type="checkbox"><label class="fr-label" for="5_2">Arrêt temporaire
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="checkboxes_661_3" type="checkbox"><label class="fr-label" for="checkboxes_661_3">Réhabilitation
+                  <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="5_3" type="checkbox"><label class="fr-label" for="5_3">Réhabilitation
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="checkboxes_661_4" type="checkbox"><label class="fr-label" for="checkboxes_661_4">Arrêt définitif (après réhabilitation)
+                  <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="5_4" type="checkbox"><label class="fr-label" for="5_4">Arrêt définitif (après réhabilitation)
                       <!---->
                     </label></div>
                 </div>
@@ -322,32 +322,32 @@
           </div>
           <div class="fr-fieldset__element">
             <div>
-              <fieldset class="fr-fieldset" id="checkboxes_684" aria-labelledby="checkboxes_684-legend" style="flex-direction: column; align-items: flex-start;">
-                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes_684-legend">Juin
+              <fieldset class="fr-fieldset" id="6" aria-labelledby="6-legend" style="flex-direction: column; align-items: flex-start;">
+                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="6-legend">Juin
                   <!---->
                 </legend>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="checkboxes_684_0" type="checkbox"><label class="fr-label" for="checkboxes_684_0">Non débutés
+                  <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="6_0" type="checkbox"><label class="fr-label" for="6_0">Non débutés
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="checkboxes_684_1" type="checkbox"><label class="fr-label" for="checkboxes_684_1">Exploitation en cours
+                  <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="6_1" type="checkbox"><label class="fr-label" for="6_1">Exploitation en cours
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="checkboxes_684_2" type="checkbox"><label class="fr-label" for="checkboxes_684_2">Arrêt temporaire
+                  <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="6_2" type="checkbox"><label class="fr-label" for="6_2">Arrêt temporaire
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="checkboxes_684_3" type="checkbox"><label class="fr-label" for="checkboxes_684_3">Réhabilitation
+                  <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="6_3" type="checkbox"><label class="fr-label" for="6_3">Réhabilitation
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="checkboxes_684_4" type="checkbox"><label class="fr-label" for="checkboxes_684_4">Arrêt définitif (après réhabilitation)
+                  <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="6_4" type="checkbox"><label class="fr-label" for="6_4">Arrêt définitif (après réhabilitation)
                       <!---->
                     </label></div>
                 </div>
@@ -356,32 +356,32 @@
           </div>
           <div class="fr-fieldset__element">
             <div>
-              <fieldset class="fr-fieldset" id="checkboxes_624" aria-labelledby="checkboxes_624-legend" style="flex-direction: column; align-items: flex-start;">
-                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes_624-legend">Juillet
+              <fieldset class="fr-fieldset" id="7" aria-labelledby="7-legend" style="flex-direction: column; align-items: flex-start;">
+                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="7-legend">Juillet
                   <!---->
                 </legend>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="checkboxes_624_0" type="checkbox"><label class="fr-label" for="checkboxes_624_0">Non débutés
+                  <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="7_0" type="checkbox"><label class="fr-label" for="7_0">Non débutés
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="checkboxes_624_1" type="checkbox"><label class="fr-label" for="checkboxes_624_1">Exploitation en cours
+                  <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="7_1" type="checkbox"><label class="fr-label" for="7_1">Exploitation en cours
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="checkboxes_624_2" type="checkbox"><label class="fr-label" for="checkboxes_624_2">Arrêt temporaire
+                  <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="7_2" type="checkbox"><label class="fr-label" for="7_2">Arrêt temporaire
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="checkboxes_624_3" type="checkbox"><label class="fr-label" for="checkboxes_624_3">Réhabilitation
+                  <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="7_3" type="checkbox"><label class="fr-label" for="7_3">Réhabilitation
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="checkboxes_624_4" type="checkbox"><label class="fr-label" for="checkboxes_624_4">Arrêt définitif (après réhabilitation)
+                  <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="7_4" type="checkbox"><label class="fr-label" for="7_4">Arrêt définitif (après réhabilitation)
                       <!---->
                     </label></div>
                 </div>
@@ -390,32 +390,32 @@
           </div>
           <div class="fr-fieldset__element">
             <div>
-              <fieldset class="fr-fieldset" id="checkboxes_267" aria-labelledby="checkboxes_267-legend" style="flex-direction: column; align-items: flex-start;">
-                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes_267-legend">Août
+              <fieldset class="fr-fieldset" id="8" aria-labelledby="8-legend" style="flex-direction: column; align-items: flex-start;">
+                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="8-legend">Août
                   <!---->
                 </legend>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="checkboxes_267_0" type="checkbox"><label class="fr-label" for="checkboxes_267_0">Non débutés
+                  <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="8_0" type="checkbox"><label class="fr-label" for="8_0">Non débutés
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="checkboxes_267_1" type="checkbox"><label class="fr-label" for="checkboxes_267_1">Exploitation en cours
+                  <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="8_1" type="checkbox"><label class="fr-label" for="8_1">Exploitation en cours
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="checkboxes_267_2" type="checkbox"><label class="fr-label" for="checkboxes_267_2">Arrêt temporaire
+                  <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="8_2" type="checkbox"><label class="fr-label" for="8_2">Arrêt temporaire
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="checkboxes_267_3" type="checkbox"><label class="fr-label" for="checkboxes_267_3">Réhabilitation
+                  <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="8_3" type="checkbox"><label class="fr-label" for="8_3">Réhabilitation
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="checkboxes_267_4" type="checkbox"><label class="fr-label" for="checkboxes_267_4">Arrêt définitif (après réhabilitation)
+                  <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="8_4" type="checkbox"><label class="fr-label" for="8_4">Arrêt définitif (après réhabilitation)
                       <!---->
                     </label></div>
                 </div>
@@ -424,32 +424,32 @@
           </div>
           <div class="fr-fieldset__element">
             <div>
-              <fieldset class="fr-fieldset" id="checkboxes_119" aria-labelledby="checkboxes_119-legend" style="flex-direction: column; align-items: flex-start;">
-                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes_119-legend">Septembre
+              <fieldset class="fr-fieldset" id="9" aria-labelledby="9-legend" style="flex-direction: column; align-items: flex-start;">
+                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="9-legend">Septembre
                   <!---->
                 </legend>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="checkboxes_119_0" type="checkbox"><label class="fr-label" for="checkboxes_119_0">Non débutés
+                  <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="9_0" type="checkbox"><label class="fr-label" for="9_0">Non débutés
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="checkboxes_119_1" type="checkbox"><label class="fr-label" for="checkboxes_119_1">Exploitation en cours
+                  <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="9_1" type="checkbox"><label class="fr-label" for="9_1">Exploitation en cours
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="checkboxes_119_2" type="checkbox"><label class="fr-label" for="checkboxes_119_2">Arrêt temporaire
+                  <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="9_2" type="checkbox"><label class="fr-label" for="9_2">Arrêt temporaire
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="checkboxes_119_3" type="checkbox"><label class="fr-label" for="checkboxes_119_3">Réhabilitation
+                  <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="9_3" type="checkbox"><label class="fr-label" for="9_3">Réhabilitation
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="checkboxes_119_4" type="checkbox"><label class="fr-label" for="checkboxes_119_4">Arrêt définitif (après réhabilitation)
+                  <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="9_4" type="checkbox"><label class="fr-label" for="9_4">Arrêt définitif (après réhabilitation)
                       <!---->
                     </label></div>
                 </div>
@@ -458,32 +458,32 @@
           </div>
           <div class="fr-fieldset__element">
             <div>
-              <fieldset class="fr-fieldset" id="checkboxes_827" aria-labelledby="checkboxes_827-legend" style="flex-direction: column; align-items: flex-start;">
-                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes_827-legend">Octobre
+              <fieldset class="fr-fieldset" id="10" aria-labelledby="10-legend" style="flex-direction: column; align-items: flex-start;">
+                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="10-legend">Octobre
                   <!---->
                 </legend>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="checkboxes_827_0" type="checkbox"><label class="fr-label" for="checkboxes_827_0">Non débutés
+                  <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="10_0" type="checkbox"><label class="fr-label" for="10_0">Non débutés
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="checkboxes_827_1" type="checkbox"><label class="fr-label" for="checkboxes_827_1">Exploitation en cours
+                  <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="10_1" type="checkbox"><label class="fr-label" for="10_1">Exploitation en cours
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="checkboxes_827_2" type="checkbox"><label class="fr-label" for="checkboxes_827_2">Arrêt temporaire
+                  <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="10_2" type="checkbox"><label class="fr-label" for="10_2">Arrêt temporaire
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="checkboxes_827_3" type="checkbox"><label class="fr-label" for="checkboxes_827_3">Réhabilitation
+                  <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="10_3" type="checkbox"><label class="fr-label" for="10_3">Réhabilitation
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="checkboxes_827_4" type="checkbox"><label class="fr-label" for="checkboxes_827_4">Arrêt définitif (après réhabilitation)
+                  <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="10_4" type="checkbox"><label class="fr-label" for="10_4">Arrêt définitif (après réhabilitation)
                       <!---->
                     </label></div>
                 </div>
@@ -492,32 +492,32 @@
           </div>
           <div class="fr-fieldset__element">
             <div>
-              <fieldset class="fr-fieldset" id="checkboxes_173" aria-labelledby="checkboxes_173-legend" style="flex-direction: column; align-items: flex-start;">
-                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes_173-legend">Novembre
+              <fieldset class="fr-fieldset" id="11" aria-labelledby="11-legend" style="flex-direction: column; align-items: flex-start;">
+                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="11-legend">Novembre
                   <!---->
                 </legend>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="checkboxes_173_0" type="checkbox"><label class="fr-label" for="checkboxes_173_0">Non débutés
+                  <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="11_0" type="checkbox"><label class="fr-label" for="11_0">Non débutés
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="checkboxes_173_1" type="checkbox"><label class="fr-label" for="checkboxes_173_1">Exploitation en cours
+                  <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="11_1" type="checkbox"><label class="fr-label" for="11_1">Exploitation en cours
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="checkboxes_173_2" type="checkbox"><label class="fr-label" for="checkboxes_173_2">Arrêt temporaire
+                  <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="11_2" type="checkbox"><label class="fr-label" for="11_2">Arrêt temporaire
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="checkboxes_173_3" type="checkbox"><label class="fr-label" for="checkboxes_173_3">Réhabilitation
+                  <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="11_3" type="checkbox"><label class="fr-label" for="11_3">Réhabilitation
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="checkboxes_173_4" type="checkbox"><label class="fr-label" for="checkboxes_173_4">Arrêt définitif (après réhabilitation)
+                  <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="11_4" type="checkbox"><label class="fr-label" for="11_4">Arrêt définitif (après réhabilitation)
                       <!---->
                     </label></div>
                 </div>
@@ -526,32 +526,32 @@
           </div>
           <div class="fr-fieldset__element">
             <div>
-              <fieldset class="fr-fieldset" id="checkboxes_211" aria-labelledby="checkboxes_211-legend" style="flex-direction: column; align-items: flex-start;">
-                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes_211-legend">Décembre
+              <fieldset class="fr-fieldset" id="12" aria-labelledby="12-legend" style="flex-direction: column; align-items: flex-start;">
+                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="12-legend">Décembre
                   <!---->
                 </legend>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="checkboxes_211_0" type="checkbox"><label class="fr-label" for="checkboxes_211_0">Non débutés
+                  <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="12_0" type="checkbox"><label class="fr-label" for="12_0">Non débutés
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="checkboxes_211_1" type="checkbox"><label class="fr-label" for="checkboxes_211_1">Exploitation en cours
+                  <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="12_1" type="checkbox"><label class="fr-label" for="12_1">Exploitation en cours
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="checkboxes_211_2" type="checkbox"><label class="fr-label" for="checkboxes_211_2">Arrêt temporaire
+                  <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="12_2" type="checkbox"><label class="fr-label" for="12_2">Arrêt temporaire
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="checkboxes_211_3" type="checkbox"><label class="fr-label" for="checkboxes_211_3">Réhabilitation
+                  <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="12_3" type="checkbox"><label class="fr-label" for="12_3">Réhabilitation
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="checkboxes_211_4" type="checkbox"><label class="fr-label" for="checkboxes_211_4">Arrêt définitif (après réhabilitation)
+                  <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="12_4" type="checkbox"><label class="fr-label" for="12_4">Arrêt définitif (après réhabilitation)
                       <!---->
                     </label></div>
                 </div>
@@ -563,7 +563,7 @@
           <legend class="fr-fieldset__legend" id="complement-legend">Informations complémentaires</legend>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group"><label class="fr-label" for="textarea_619"> Champ optionnel<span class="fr-hint-text">Toute information sur les événements marquants du trimestre (accident, incident, arrêt ou suspension d'activité en précisant les raisons, évolution de l'exploitation, difficultés rencontrées, etc.).</span></label><textarea class="fr-input" name="textarea_619" id="textarea_619"></textarea></div>
+              <div class="fr-input-group"><label class="fr-label" for="texte"> Champ optionnel<span class="fr-hint-text">Toute information sur les événements marquants du trimestre (accident, incident, arrêt ou suspension d'activité en précisant les raisons, évolution de l'exploitation, difficultés rencontrées, etc.).</span></label><textarea class="fr-input" name="texte" id="texte"></textarea></div>
             </div>
           </div>
         </fieldset>
@@ -578,10 +578,10 @@
           <legend class="fr-fieldset__legend" id="substancesFiscales-legend">Production annuelle</legend>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_686">or
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="auru">or
                   <!---->
                   <!----><span class="fr-hint-text"><b>g (gramme)</b> contenu dans les minerais</span>
-                </label><input class="fr-input" name="input_686" id="input_686" required="" type="number" min="0">
+                </label><input class="fr-input" name="auru" id="auru" required="" type="number" min="0">
                 <!---->
               </div>
             </div>
@@ -591,7 +591,7 @@
           <legend class="fr-fieldset__legend" id="complement-legend">Informations complémentaires</legend>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group"><label class="fr-label" for="textarea_954"> Champ optionnel<span class="fr-hint-text">Toute information utile à la compréhension de la production d'or net.</span></label><textarea class="fr-input" name="textarea_954" id="textarea_954"></textarea></div>
+              <div class="fr-input-group"><label class="fr-label" for="texte"> Champ optionnel<span class="fr-hint-text">Toute information utile à la compréhension de la production d'or net.</span></label><textarea class="fr-input" name="texte" id="texte"></textarea></div>
             </div>
           </div>
         </fieldset>
@@ -606,25 +606,25 @@
           <legend class="fr-fieldset__legend" id="levesTopographiques-legend">Levés topographiques</legend>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_132">Types de levés (optionnel)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="typeLevesTopo">Types de levés (optionnel)
                   <!----><span class="fr-hint-text">Exemples : LIDAR, géomètre…</span>
-                </label><input class="fr-input" name="input_132" id="input_132" type="text">
+                </label><input class="fr-input" name="typeLevesTopo" id="typeLevesTopo" 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_773">Surface des levés(km²) (optionnel)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="surfaceLevesTopo">Surface des levés(km²) (optionnel)
                   <!----><span class="fr-hint-text">Surface du titre couverte par des levés topographiques</span>
-                </label><input class="fr-input" name="input_773" id="input_773" type="number" min="0">
+                </label><input class="fr-input" name="surfaceLevesTopo" id="surfaceLevesTopo" type="number" min="0">
                 <!---->
               </div>
             </div>
           </div>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group"><label class="fr-label" for="textarea_785">Informations complémentaires (optionnel)<span class="fr-hint-text">Toute information complémentaire sur les levés topographiques</span></label><textarea class="fr-input" name="textarea_785" id="textarea_785"></textarea></div>
+              <div class="fr-input-group"><label class="fr-label" for="complementLevesTopo">Informations complémentaires (optionnel)<span class="fr-hint-text">Toute information complémentaire sur les levés topographiques</span></label><textarea class="fr-input" name="complementLevesTopo" id="complementLevesTopo"></textarea></div>
             </div>
           </div>
         </fieldset>
@@ -632,16 +632,16 @@
           <legend class="fr-fieldset__legend" id="cartographieGeologique-legend">Cartographie géologique</legend>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_253">Surface cartographiée (km²) (optionnel)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="surfaceCartographieGeologique">Surface cartographiée (km²) (optionnel)
                   <!----><span class="fr-hint-text">Surface du titre dont la cartographie géologique a été effectuée au cours de l'année</span>
-                </label><input class="fr-input" name="input_253" id="input_253" type="number" min="0">
+                </label><input class="fr-input" name="surfaceCartographieGeologique" id="surfaceCartographieGeologique" type="number" min="0">
                 <!---->
               </div>
             </div>
           </div>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group"><label class="fr-label" for="textarea_19">Informations complémentaires (optionnel)<span class="fr-hint-text">Toute information complémentaire sur les activités de cartographie</span></label><textarea class="fr-input" name="textarea_19" id="textarea_19"></textarea></div>
+              <div class="fr-input-group"><label class="fr-label" for="complementCartographie">Informations complémentaires (optionnel)<span class="fr-hint-text">Toute information complémentaire sur les activités de cartographie</span></label><textarea class="fr-input" name="complementCartographie" id="complementCartographie"></textarea></div>
             </div>
           </div>
         </fieldset>
@@ -649,25 +649,25 @@
           <legend class="fr-fieldset__legend" id="levesGeochimiques-legend">Levés géochimiques</legend>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_35">Surface des levés(km²) (optionnel)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="surfaceLevesGeochimie">Surface des levés(km²) (optionnel)
                   <!----><span class="fr-hint-text">Surface du titre couverte par des levés géochimiques</span>
-                </label><input class="fr-input" name="input_35" id="input_35" type="number" min="0">
+                </label><input class="fr-input" name="surfaceLevesGeochimie" id="surfaceLevesGeochimie" 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_883">Longueur de levés (km) (optionnel)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="lineaireLevesGeochimie">Longueur de levés (km) (optionnel)
                   <!----><span class="fr-hint-text">Longueur de layon couverte par des levés géochimiques</span>
-                </label><input class="fr-input" name="input_883" id="input_883" type="number" min="0">
+                </label><input class="fr-input" name="lineaireLevesGeochimie" id="lineaireLevesGeochimie" type="number" min="0">
                 <!---->
               </div>
             </div>
           </div>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group"><label class="fr-label" for="textarea_731">Informations complémentaires (optionnel)<span class="fr-hint-text">Toute information complémentaire sur les levés géochimiques</span></label><textarea class="fr-input" name="textarea_731" id="textarea_731"></textarea></div>
+              <div class="fr-input-group"><label class="fr-label" for="complementLevesGeochimie">Informations complémentaires (optionnel)<span class="fr-hint-text">Toute information complémentaire sur les levés géochimiques</span></label><textarea class="fr-input" name="complementLevesGeochimie" id="complementLevesGeochimie"></textarea></div>
             </div>
           </div>
         </fieldset>
@@ -675,35 +675,35 @@
           <legend class="fr-fieldset__legend" id="levesGeophysiques-legend">Levés géophysiques</legend>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_453">Surface des levés de magnétisme (km²) (optionnel)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="surfaceLevesMagnetisme">Surface des levés de magnétisme (km²) (optionnel)
                   <!----><span class="fr-hint-text">Surface du titre en kilomètre carré couverte par des levés de magnétisme </span>
-                </label><input class="fr-input" name="input_453" id="input_453" type="number" min="0">
+                </label><input class="fr-input" name="surfaceLevesMagnetisme" id="surfaceLevesMagnetisme" 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_473">Longueur des levés de magnétisme (km) (optionnel)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="lineaireLevesMagnetisme">Longueur des levés de magnétisme (km) (optionnel)
                   <!----><span class="fr-hint-text">Longueur de layon en kilomètre couverte par des levés de magnétisme</span>
-                </label><input class="fr-input" name="input_473" id="input_473" type="number" min="0">
+                </label><input class="fr-input" name="lineaireLevesMagnetisme" id="lineaireLevesMagnetisme" type="number" min="0">
                 <!---->
               </div>
             </div>
           </div>
           <div class="fr-fieldset__element">
             <div>
-              <fieldset class="fr-fieldset" id="checkboxes_251" aria-labelledby="checkboxes_251-legend" style="flex-direction: column; align-items: flex-start;">
-                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes_251-legend">Type de levés de magnétisme
+              <fieldset class="fr-fieldset" id="typeLevesMagnetisme" aria-labelledby="typeLevesMagnetisme-legend" style="flex-direction: column; align-items: flex-start;">
+                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="typeLevesMagnetisme-legend">Type de levés de magnétisme
                   <!---->
                 </legend>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="auSol"><input name="archive" id="checkboxes_251_0" type="checkbox"><label class="fr-label" for="checkboxes_251_0">Au sol
+                  <div class="fr-checkbox-group" itemid="auSol"><input name="archive" id="typeLevesMagnetisme_0" type="checkbox"><label class="fr-label" for="typeLevesMagnetisme_0">Au sol
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="aeroporte"><input name="archive" id="checkboxes_251_1" type="checkbox"><label class="fr-label" for="checkboxes_251_1">Aéroporté
+                  <div class="fr-checkbox-group" itemid="aeroporte"><input name="archive" id="typeLevesMagnetisme_1" type="checkbox"><label class="fr-label" for="typeLevesMagnetisme_1">Aéroporté
                       <!---->
                     </label></div>
                 </div>
@@ -712,35 +712,35 @@
           </div>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_292">Surface des levés de spectrométrie (km²) (optionnel)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="surfaceLevesSpectrometrie">Surface des levés de spectrométrie (km²) (optionnel)
                   <!----><span class="fr-hint-text">Surface du titre en kilomètre carré couverte par des levés de spectrométrie</span>
-                </label><input class="fr-input" name="input_292" id="input_292" type="number" min="0">
+                </label><input class="fr-input" name="surfaceLevesSpectrometrie" id="surfaceLevesSpectrometrie" 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_276">Longueur des levés de spectrométrie (km) (optionnel)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="lineaireLevesSpectrometrie">Longueur des levés de spectrométrie (km) (optionnel)
                   <!----><span class="fr-hint-text">Longueur de layon en kilomètre couverte par des levés de spectrométrie</span>
-                </label><input class="fr-input" name="input_276" id="input_276" type="number" min="0">
+                </label><input class="fr-input" name="lineaireLevesSpectrometrie" id="lineaireLevesSpectrometrie" type="number" min="0">
                 <!---->
               </div>
             </div>
           </div>
           <div class="fr-fieldset__element">
             <div>
-              <fieldset class="fr-fieldset" id="checkboxes_252" aria-labelledby="checkboxes_252-legend" style="flex-direction: column; align-items: flex-start;">
-                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes_252-legend">Type de levés de spectrométrie
+              <fieldset class="fr-fieldset" id="typeLevesSpectrometrie" aria-labelledby="typeLevesSpectrometrie-legend" style="flex-direction: column; align-items: flex-start;">
+                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="typeLevesSpectrometrie-legend">Type de levés de spectrométrie
                   <!---->
                 </legend>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="auSol"><input name="archive" id="checkboxes_252_0" type="checkbox"><label class="fr-label" for="checkboxes_252_0">Au sol
+                  <div class="fr-checkbox-group" itemid="auSol"><input name="archive" id="typeLevesSpectrometrie_0" type="checkbox"><label class="fr-label" for="typeLevesSpectrometrie_0">Au sol
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="aeroporte"><input name="archive" id="checkboxes_252_1" type="checkbox"><label class="fr-label" for="checkboxes_252_1">Aéroporté
+                  <div class="fr-checkbox-group" itemid="aeroporte"><input name="archive" id="typeLevesSpectrometrie_1" type="checkbox"><label class="fr-label" for="typeLevesSpectrometrie_1">Aéroporté
                       <!---->
                     </label></div>
                 </div>
@@ -749,35 +749,35 @@
           </div>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_110">Surface des levés de polarisation provoquée (km²) (optionnel)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="surfaceLevesPolarisationProvoquee">Surface des levés de polarisation provoquée (km²) (optionnel)
                   <!----><span class="fr-hint-text">Surface du titre en kilomètre carré couverte par des levés de polarisation provoquée</span>
-                </label><input class="fr-input" name="input_110" id="input_110" type="number" min="0">
+                </label><input class="fr-input" name="surfaceLevesPolarisationProvoquee" id="surfaceLevesPolarisationProvoquee" 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_448">Longueur des levés de polarisation provoquée (km) (optionnel)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="lineaireLevesPolarisationProvoquee">Longueur des levés de polarisation provoquée (km) (optionnel)
                   <!----><span class="fr-hint-text">Longueur de layon en kilomètre couverte par des levés de polarisation provoquée</span>
-                </label><input class="fr-input" name="input_448" id="input_448" type="number" min="0">
+                </label><input class="fr-input" name="lineaireLevesPolarisationProvoquee" id="lineaireLevesPolarisationProvoquee" type="number" min="0">
                 <!---->
               </div>
             </div>
           </div>
           <div class="fr-fieldset__element">
             <div>
-              <fieldset class="fr-fieldset" id="checkboxes_490" aria-labelledby="checkboxes_490-legend" style="flex-direction: column; align-items: flex-start;">
-                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes_490-legend">Type de levés de polarisation provoquée
+              <fieldset class="fr-fieldset" id="typeLevesPolarisationProvoquee" aria-labelledby="typeLevesPolarisationProvoquee-legend" style="flex-direction: column; align-items: flex-start;">
+                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="typeLevesPolarisationProvoquee-legend">Type de levés de polarisation provoquée
                   <!---->
                 </legend>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="auSol"><input name="archive" id="checkboxes_490_0" type="checkbox"><label class="fr-label" for="checkboxes_490_0">Au sol
+                  <div class="fr-checkbox-group" itemid="auSol"><input name="archive" id="typeLevesPolarisationProvoquee_0" type="checkbox"><label class="fr-label" for="typeLevesPolarisationProvoquee_0">Au sol
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="aeroporte"><input name="archive" id="checkboxes_490_1" type="checkbox"><label class="fr-label" for="checkboxes_490_1">Aéroporté
+                  <div class="fr-checkbox-group" itemid="aeroporte"><input name="archive" id="typeLevesPolarisationProvoquee_1" type="checkbox"><label class="fr-label" for="typeLevesPolarisationProvoquee_1">Aéroporté
                       <!---->
                     </label></div>
                 </div>
@@ -786,35 +786,35 @@
           </div>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_648">Surface des levés sismiques (km²) (optionnel)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="surfaceLevesSismiques">Surface des levés sismiques (km²) (optionnel)
                   <!----><span class="fr-hint-text">Surface du titre en kilomètre carré couverte par des levés sismiques</span>
-                </label><input class="fr-input" name="input_648" id="input_648" type="number" min="0">
+                </label><input class="fr-input" name="surfaceLevesSismiques" id="surfaceLevesSismiques" 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_726">Longueur des levés sismiques (km) (optionnel)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="lineaireLevesSismiques">Longueur des levés sismiques (km) (optionnel)
                   <!----><span class="fr-hint-text">Longueur de layon en kilomètre couverte par des levés sismiques</span>
-                </label><input class="fr-input" name="input_726" id="input_726" type="number" min="0">
+                </label><input class="fr-input" name="lineaireLevesSismiques" id="lineaireLevesSismiques" type="number" min="0">
                 <!---->
               </div>
             </div>
           </div>
           <div class="fr-fieldset__element">
             <div>
-              <fieldset class="fr-fieldset" id="checkboxes_380" aria-labelledby="checkboxes_380-legend" style="flex-direction: column; align-items: flex-start;">
-                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes_380-legend">Type de levés sismiques
+              <fieldset class="fr-fieldset" id="typeLevesSismiques" aria-labelledby="typeLevesSismiques-legend" style="flex-direction: column; align-items: flex-start;">
+                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="typeLevesSismiques-legend">Type de levés sismiques
                   <!---->
                 </legend>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="auSol"><input name="archive" id="checkboxes_380_0" type="checkbox"><label class="fr-label" for="checkboxes_380_0">Au sol
+                  <div class="fr-checkbox-group" itemid="auSol"><input name="archive" id="typeLevesSismiques_0" type="checkbox"><label class="fr-label" for="typeLevesSismiques_0">Au sol
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="aeroporte"><input name="archive" id="checkboxes_380_1" type="checkbox"><label class="fr-label" for="checkboxes_380_1">Aéroporté
+                  <div class="fr-checkbox-group" itemid="aeroporte"><input name="archive" id="typeLevesSismiques_1" type="checkbox"><label class="fr-label" for="typeLevesSismiques_1">Aéroporté
                       <!---->
                     </label></div>
                 </div>
@@ -823,35 +823,35 @@
           </div>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_894">Surface des levés de conductivité (km²) (optionnel)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="surfaceLevesConductivite">Surface des levés de conductivité (km²) (optionnel)
                   <!----><span class="fr-hint-text">Surface du titre en kilomètre carré couverte par des levés de conductivité</span>
-                </label><input class="fr-input" name="input_894" id="input_894" type="number" min="0">
+                </label><input class="fr-input" name="surfaceLevesConductivite" id="surfaceLevesConductivite" 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_822">Longueur des levés de conductivité (km) (optionnel)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="lineaireLevesConductivite">Longueur des levés de conductivité (km) (optionnel)
                   <!----><span class="fr-hint-text">Longueur de layon en kilomètre couverte par des levés de conductivité</span>
-                </label><input class="fr-input" name="input_822" id="input_822" type="number" min="0">
+                </label><input class="fr-input" name="lineaireLevesConductivite" id="lineaireLevesConductivite" type="number" min="0">
                 <!---->
               </div>
             </div>
           </div>
           <div class="fr-fieldset__element">
             <div>
-              <fieldset class="fr-fieldset" id="checkboxes_193" aria-labelledby="checkboxes_193-legend" style="flex-direction: column; align-items: flex-start;">
-                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes_193-legend">Type de levés de conductivité
+              <fieldset class="fr-fieldset" id="typeLevesConductivite" aria-labelledby="typeLevesConductivite-legend" style="flex-direction: column; align-items: flex-start;">
+                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="typeLevesConductivite-legend">Type de levés de conductivité
                   <!---->
                 </legend>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="auSol"><input name="archive" id="checkboxes_193_0" type="checkbox"><label class="fr-label" for="checkboxes_193_0">Au sol
+                  <div class="fr-checkbox-group" itemid="auSol"><input name="archive" id="typeLevesConductivite_0" type="checkbox"><label class="fr-label" for="typeLevesConductivite_0">Au sol
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="aeroporte"><input name="archive" id="checkboxes_193_1" type="checkbox"><label class="fr-label" for="checkboxes_193_1">Aéroporté
+                  <div class="fr-checkbox-group" itemid="aeroporte"><input name="archive" id="typeLevesConductivite_1" type="checkbox"><label class="fr-label" for="typeLevesConductivite_1">Aéroporté
                       <!---->
                     </label></div>
                 </div>
@@ -860,35 +860,35 @@
           </div>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_557">Surface des levés par d'autres méthodes (km²) (optionnel)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="surfaceLevesAutre">Surface des levés par d'autres méthodes (km²) (optionnel)
                   <!----><span class="fr-hint-text">Surface du titre en kilomètre carré couverte par des levés par d'autres méthodes</span>
-                </label><input class="fr-input" name="input_557" id="input_557" type="number" min="0">
+                </label><input class="fr-input" name="surfaceLevesAutre" id="surfaceLevesAutre" 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_260">Longueur des levés par d'autres méthodes (km) (optionnel)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="lineaireLevesAutre">Longueur des levés par d'autres méthodes (km) (optionnel)
                   <!----><span class="fr-hint-text">Longueur de layon en kilomètre couverte par des levés par d'autres méthodes</span>
-                </label><input class="fr-input" name="input_260" id="input_260" type="number" min="0">
+                </label><input class="fr-input" name="lineaireLevesAutre" id="lineaireLevesAutre" type="number" min="0">
                 <!---->
               </div>
             </div>
           </div>
           <div class="fr-fieldset__element">
             <div>
-              <fieldset class="fr-fieldset" id="checkboxes_287" aria-labelledby="checkboxes_287-legend" style="flex-direction: column; align-items: flex-start;">
-                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes_287-legend">Type de levés par d'autres méthodes
+              <fieldset class="fr-fieldset" id="typeLevesAutre" aria-labelledby="typeLevesAutre-legend" style="flex-direction: column; align-items: flex-start;">
+                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="typeLevesAutre-legend">Type de levés par d'autres méthodes
                   <!---->
                 </legend>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="auSol"><input name="archive" id="checkboxes_287_0" type="checkbox"><label class="fr-label" for="checkboxes_287_0">Au sol
+                  <div class="fr-checkbox-group" itemid="auSol"><input name="archive" id="typeLevesAutre_0" type="checkbox"><label class="fr-label" for="typeLevesAutre_0">Au sol
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="aeroporte"><input name="archive" id="checkboxes_287_1" type="checkbox"><label class="fr-label" for="checkboxes_287_1">Aéroporté
+                  <div class="fr-checkbox-group" itemid="aeroporte"><input name="archive" id="typeLevesAutre_1" type="checkbox"><label class="fr-label" for="typeLevesAutre_1">Aéroporté
                       <!---->
                     </label></div>
                 </div>
@@ -897,7 +897,7 @@
           </div>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group"><label class="fr-label" for="textarea_488">Informations complémentaires (optionnel)<span class="fr-hint-text">Toute information complémentaire sur les levés géophysique</span></label><textarea class="fr-input" name="textarea_488" id="textarea_488"></textarea></div>
+              <div class="fr-input-group"><label class="fr-label" for="complementLevesGeochimie">Informations complémentaires (optionnel)<span class="fr-hint-text">Toute information complémentaire sur les levés géophysique</span></label><textarea class="fr-input" name="complementLevesGeochimie" id="complementLevesGeochimie"></textarea></div>
             </div>
           </div>
         </fieldset>
@@ -905,25 +905,25 @@
           <legend class="fr-fieldset__legend" id="trancheesPuits-legend">Tranchées et puits</legend>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_800">Nombre de puits (optionnel)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="puits">Nombre de puits (optionnel)
                   <!----><span class="fr-hint-text">Nombre de puits forés</span>
-                </label><input class="fr-input" name="input_800" id="input_800" type="number" min="0">
+                </label><input class="fr-input" name="puits" id="puits" 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_723">Longueur de tranchée (km) (optionnel)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="lineaireTranchees">Longueur de tranchée (km) (optionnel)
                   <!----><span class="fr-hint-text">Longueur de tranchée de prospection ouverte</span>
-                </label><input class="fr-input" name="input_723" id="input_723" type="number" min="0">
+                </label><input class="fr-input" name="lineaireTranchees" id="lineaireTranchees" type="number" min="0">
                 <!---->
               </div>
             </div>
           </div>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group"><label class="fr-label" for="textarea_152">Informations complémentaires (optionnel)<span class="fr-hint-text">Toute information complémentaire sur les tranchées et puits</span></label><textarea class="fr-input" name="textarea_152" id="textarea_152"></textarea></div>
+              <div class="fr-input-group"><label class="fr-label" for="complementTrancheesPuits">Informations complémentaires (optionnel)<span class="fr-hint-text">Toute information complémentaire sur les tranchées et puits</span></label><textarea class="fr-input" name="complementTrancheesPuits" id="complementTrancheesPuits"></textarea></div>
             </div>
           </div>
         </fieldset>
@@ -931,115 +931,115 @@
           <legend class="fr-fieldset__legend" id="sondages-legend">Sondages</legend>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_907">Nombre de sondages tarière (optionnel)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="nombreSondagesTariere">Nombre de sondages tarière (optionnel)
                   <!----><span class="fr-hint-text">Nombre de sondages effectués à l'aide d'une tarière</span>
-                </label><input class="fr-input" name="input_907" id="input_907" type="number" min="0">
+                </label><input class="fr-input" name="nombreSondagesTariere" id="nombreSondagesTariere" 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_547">Profondeur maximale des sondages tarière (m) (optionnel)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="profondeurMaxSondagesTariere">Profondeur maximale des sondages tarière (m) (optionnel)
                   <!----><span class="fr-hint-text">Profondeur maximale atteinte par les sondages tarière</span>
-                </label><input class="fr-input" name="input_547" id="input_547" type="number" min="0">
+                </label><input class="fr-input" name="profondeurMaxSondagesTariere" id="profondeurMaxSondagesTariere" 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_234">Profondeur moyenne de sondages tarière (m) (optionnel)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="profondeurMoySondagesTariere">Profondeur moyenne de sondages tarière (m) (optionnel)
                   <!----><span class="fr-hint-text">Profondeur moyenne atteinte par les sondages tarière</span>
-                </label><input class="fr-input" name="input_234" id="input_234" type="number" min="0">
+                </label><input class="fr-input" name="profondeurMoySondagesTariere" id="profondeurMoySondagesTariere" 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_280">Longueur sondages tarière (m) (optionnel)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="lineaireSondagesTarieres">Longueur sondages tarière (m) (optionnel)
                   <!----><span class="fr-hint-text">Longueur du linéaire de sondages tarière</span>
-                </label><input class="fr-input" name="input_280" id="input_280" type="number" min="0">
+                </label><input class="fr-input" name="lineaireSondagesTarieres" id="lineaireSondagesTarieres" 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_537">Nombre de sondages destructifs (optionnel)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="nombreSondagesDestructifs">Nombre de sondages destructifs (optionnel)
                   <!----><span class="fr-hint-text">Nombre de sondages effectués à l'aide d'une destructifs</span>
-                </label><input class="fr-input" name="input_537" id="input_537" type="number" min="0">
+                </label><input class="fr-input" name="nombreSondagesDestructifs" id="nombreSondagesDestructifs" 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_184">Profondeur maximale des sondages destructifs (m) (optionnel)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="profondeurMaxSondagesDestructifs">Profondeur maximale des sondages destructifs (m) (optionnel)
                   <!----><span class="fr-hint-text">Profondeur maximale atteinte par les sondages destructifs</span>
-                </label><input class="fr-input" name="input_184" id="input_184" type="number" min="0">
+                </label><input class="fr-input" name="profondeurMaxSondagesDestructifs" id="profondeurMaxSondagesDestructifs" 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_76">Profondeur moyenne de sondages destructifs (m) (optionnel)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="profondeurMoySondagesDestructifs">Profondeur moyenne de sondages destructifs (m) (optionnel)
                   <!----><span class="fr-hint-text">Profondeur moyenne atteinte par les sondages destructifs</span>
-                </label><input class="fr-input" name="input_76" id="input_76" type="number" min="0">
+                </label><input class="fr-input" name="profondeurMoySondagesDestructifs" id="profondeurMoySondagesDestructifs" 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_202">Longueur sondages destructifs (m) (optionnel)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="lineaireSondagesDestructifss">Longueur sondages destructifs (m) (optionnel)
                   <!----><span class="fr-hint-text">Longueur du linéaire de sondages destructifs</span>
-                </label><input class="fr-input" name="input_202" id="input_202" type="number" min="0">
+                </label><input class="fr-input" name="lineaireSondagesDestructifss" id="lineaireSondagesDestructifss" 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_785">Nombre de sondages carottés (optionnel)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="nombreSondagesCarottes">Nombre de sondages carottés (optionnel)
                   <!----><span class="fr-hint-text">Nombre de sondages effectués à l'aide d'une carottés</span>
-                </label><input class="fr-input" name="input_785" id="input_785" type="number" min="0">
+                </label><input class="fr-input" name="nombreSondagesCarottes" id="nombreSondagesCarottes" 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_873">Profondeur maximale des sondages carottés (m) (optionnel)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="profondeurMaxSondagesCarottes">Profondeur maximale des sondages carottés (m) (optionnel)
                   <!----><span class="fr-hint-text">Profondeur maximale atteinte par les sondages carottés</span>
-                </label><input class="fr-input" name="input_873" id="input_873" type="number" min="0">
+                </label><input class="fr-input" name="profondeurMaxSondagesCarottes" id="profondeurMaxSondagesCarottes" 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_113">Profondeur moyenne de sondages carottés (m) (optionnel)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="profondeurMoySondagesCarottes">Profondeur moyenne de sondages carottés (m) (optionnel)
                   <!----><span class="fr-hint-text">Profondeur moyenne atteinte par les sondages carottés</span>
-                </label><input class="fr-input" name="input_113" id="input_113" type="number" min="0">
+                </label><input class="fr-input" name="profondeurMoySondagesCarottes" id="profondeurMoySondagesCarottes" 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_120">Longueur sondages carottés (m) (optionnel)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="lineaireSondagesCarottes">Longueur sondages carottés (m) (optionnel)
                   <!----><span class="fr-hint-text">Longueur du linéaire de sondages carottés</span>
-                </label><input class="fr-input" name="input_120" id="input_120" type="number" min="0">
+                </label><input class="fr-input" name="lineaireSondagesCarottes" id="lineaireSondagesCarottes" type="number" min="0">
                 <!---->
               </div>
             </div>
           </div>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group"><label class="fr-label" for="textarea_288">Informations complémentaires (optionnel)<span class="fr-hint-text">Toute information complémentaire sur les sondages</span></label><textarea class="fr-input" name="textarea_288" id="textarea_288"></textarea></div>
+              <div class="fr-input-group"><label class="fr-label" for="complementSondages">Informations complémentaires (optionnel)<span class="fr-hint-text">Toute information complémentaire sur les sondages</span></label><textarea class="fr-input" name="complementSondages" id="complementSondages"></textarea></div>
             </div>
           </div>
         </fieldset>
@@ -1047,61 +1047,61 @@
           <legend class="fr-fieldset__legend" id="Analyses-legend">Analyses</legend>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_645">Nombre d'analyses multi-éléments (optionnel)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="nombreAnalysesMultiElements">Nombre d'analyses multi-éléments (optionnel)
                   <!----><span class="fr-hint-text">Nombre d'analyses multi-éléments</span>
-                </label><input class="fr-input" name="input_645" id="input_645" type="number" min="0">
+                </label><input class="fr-input" name="nombreAnalysesMultiElements" id="nombreAnalysesMultiElements" type="number" min="0">
                 <!---->
               </div>
             </div>
           </div>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group"><label class="fr-label" for="textarea_903">Liste des éléments analysés (optionnel)<span class="fr-hint-text">Précisions sur les éléments analysés et méthodes analytiques utilisées</span></label><textarea class="fr-input" name="textarea_903" id="textarea_903"></textarea></div>
+              <div class="fr-input-group"><label class="fr-label" for="listeAnalysesMultiElements">Liste des éléments analysés (optionnel)<span class="fr-hint-text">Précisions sur les éléments analysés et méthodes analytiques utilisées</span></label><textarea class="fr-input" name="listeAnalysesMultiElements" id="listeAnalysesMultiElements"></textarea></div>
             </div>
           </div>
           <div class="fr-fieldset__element">
             <div>
-              <fieldset class="fr-fieldset" id="checkboxes_244" aria-labelledby="checkboxes_244-legend" style="flex-direction: column; align-items: flex-start;">
-                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes_244-legend">Nature des traitements minéralurgiques
+              <fieldset class="fr-fieldset" id="listeTraitementMineralurgiques" aria-labelledby="listeTraitementMineralurgiques-legend" style="flex-direction: column; align-items: flex-start;">
+                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="listeTraitementMineralurgiques-legend">Nature des traitements minéralurgiques
                   <!---->
                 </legend>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="analyseGranulometrie"><input name="archive" id="checkboxes_244_0" type="checkbox"><label class="fr-label" for="checkboxes_244_0">Analyse granulométrique
+                  <div class="fr-checkbox-group" itemid="analyseGranulometrie"><input name="archive" id="listeTraitementMineralurgiques_0" type="checkbox"><label class="fr-label" for="listeTraitementMineralurgiques_0">Analyse granulométrique
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="concassage"><input name="archive" id="checkboxes_244_1" type="checkbox"><label class="fr-label" for="checkboxes_244_1">Concassage
+                  <div class="fr-checkbox-group" itemid="concassage"><input name="archive" id="listeTraitementMineralurgiques_1" type="checkbox"><label class="fr-label" for="listeTraitementMineralurgiques_1">Concassage
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="broyage"><input name="archive" id="checkboxes_244_2" type="checkbox"><label class="fr-label" for="checkboxes_244_2">Broyage
+                  <div class="fr-checkbox-group" itemid="broyage"><input name="archive" id="listeTraitementMineralurgiques_2" type="checkbox"><label class="fr-label" for="listeTraitementMineralurgiques_2">Broyage
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="separationGravimetrique"><input name="archive" id="checkboxes_244_3" type="checkbox"><label class="fr-label" for="checkboxes_244_3">Séparation gravimétrique
+                  <div class="fr-checkbox-group" itemid="separationGravimetrique"><input name="archive" id="listeTraitementMineralurgiques_3" type="checkbox"><label class="fr-label" for="listeTraitementMineralurgiques_3">Séparation gravimétrique
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="flottation"><input name="archive" id="checkboxes_244_4" type="checkbox"><label class="fr-label" for="checkboxes_244_4">Flottation
+                  <div class="fr-checkbox-group" itemid="flottation"><input name="archive" id="listeTraitementMineralurgiques_4" type="checkbox"><label class="fr-label" for="listeTraitementMineralurgiques_4">Flottation
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="cyanuration"><input name="archive" id="checkboxes_244_5" type="checkbox"><label class="fr-label" for="checkboxes_244_5">Cyanuration
+                  <div class="fr-checkbox-group" itemid="cyanuration"><input name="archive" id="listeTraitementMineralurgiques_5" type="checkbox"><label class="fr-label" for="listeTraitementMineralurgiques_5">Cyanuration
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="testLixiviation"><input name="archive" id="checkboxes_244_6" type="checkbox"><label class="fr-label" for="checkboxes_244_6">Test de lixiviation
+                  <div class="fr-checkbox-group" itemid="testLixiviation"><input name="archive" id="listeTraitementMineralurgiques_6" type="checkbox"><label class="fr-label" for="listeTraitementMineralurgiques_6">Test de lixiviation
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="autre"><input name="archive" id="checkboxes_244_7" type="checkbox"><label class="fr-label" for="checkboxes_244_7">Autres
+                  <div class="fr-checkbox-group" itemid="autre"><input name="archive" id="listeTraitementMineralurgiques_7" type="checkbox"><label class="fr-label" for="listeTraitementMineralurgiques_7">Autres
                       <!---->
                     </label></div>
                 </div>
@@ -1110,7 +1110,7 @@
           </div>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group"><label class="fr-label" for="textarea_416">Informations complémentaires (optionnel)<span class="fr-hint-text">Toute information complémentaire sur les analyses (volumes traités, nombre de tests...)</span></label><textarea class="fr-input" name="textarea_416" id="textarea_416"></textarea></div>
+              <div class="fr-input-group"><label class="fr-label" for="complementAnalyses">Informations complémentaires (optionnel)<span class="fr-hint-text">Toute information complémentaire sur les analyses (volumes traités, nombre de tests...)</span></label><textarea class="fr-input" name="complementAnalyses" id="complementAnalyses"></textarea></div>
             </div>
           </div>
         </fieldset>
@@ -1118,35 +1118,35 @@
           <legend class="fr-fieldset__legend" id="etudes-legend">Etudes</legend>
           <div class="fr-fieldset__element">
             <div>
-              <fieldset class="fr-fieldset" id="checkboxes_822" aria-labelledby="checkboxes_822-legend" style="flex-direction: column; align-items: flex-start;">
-                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes_822-legend">Nature des études effectués<span class="fr-hint-text">Nature des études effectuées</span></legend>
+              <fieldset class="fr-fieldset" id="listeEtudes" aria-labelledby="listeEtudes-legend" style="flex-direction: column; align-items: flex-start;">
+                <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="listeEtudes-legend">Nature des études effectués<span class="fr-hint-text">Nature des études effectuées</span></legend>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="environnementale"><input name="archive" id="checkboxes_822_0" type="checkbox"><label class="fr-label" for="checkboxes_822_0">Environnementale
+                  <div class="fr-checkbox-group" itemid="environnementale"><input name="archive" id="listeEtudes_0" type="checkbox"><label class="fr-label" for="listeEtudes_0">Environnementale
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="economiquePreliminaire"><input name="archive" id="checkboxes_822_1" type="checkbox"><label class="fr-label" for="checkboxes_822_1">Économique préliminaire
+                  <div class="fr-checkbox-group" itemid="economiquePreliminaire"><input name="archive" id="listeEtudes_1" type="checkbox"><label class="fr-label" for="listeEtudes_1">Économique préliminaire
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="economiquePreFaisabilite"><input name="archive" id="checkboxes_822_2" type="checkbox"><label class="fr-label" for="checkboxes_822_2">Économique pré-faisabilité
+                  <div class="fr-checkbox-group" itemid="economiquePreFaisabilite"><input name="archive" id="listeEtudes_2" type="checkbox"><label class="fr-label" for="listeEtudes_2">Économique pré-faisabilité
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="economiqueFaisabilité"><input name="archive" id="checkboxes_822_3" type="checkbox"><label class="fr-label" for="checkboxes_822_3">Économique faisabilité
+                  <div class="fr-checkbox-group" itemid="economiqueFaisabilité"><input name="archive" id="listeEtudes_3" type="checkbox"><label class="fr-label" for="listeEtudes_3">Économique faisabilité
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="sociale"><input name="archive" id="checkboxes_822_4" type="checkbox"><label class="fr-label" for="checkboxes_822_4">Sociale
+                  <div class="fr-checkbox-group" itemid="sociale"><input name="archive" id="listeEtudes_4" type="checkbox"><label class="fr-label" for="listeEtudes_4">Sociale
                       <!---->
                     </label></div>
                 </div>
                 <div class="fr-fieldset__element">
-                  <div class="fr-checkbox-group" itemid="autre"><input name="archive" id="checkboxes_822_5" type="checkbox"><label class="fr-label" for="checkboxes_822_5">Autres
+                  <div class="fr-checkbox-group" itemid="autre"><input name="archive" id="listeEtudes_5" type="checkbox"><label class="fr-label" for="listeEtudes_5">Autres
                       <!---->
                     </label></div>
                 </div>
@@ -1155,7 +1155,7 @@
           </div>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group"><label class="fr-label" for="textarea_983">Informations complémentaires (optionnel)<span class="fr-hint-text">Toute information complémentaire sur les études effectuées</span></label><textarea class="fr-input" name="textarea_983" id="textarea_983"></textarea></div>
+              <div class="fr-input-group"><label class="fr-label" for="complementEtudes">Informations complémentaires (optionnel)<span class="fr-hint-text">Toute information complémentaire sur les études effectuées</span></label><textarea class="fr-input" name="complementEtudes" id="complementEtudes"></textarea></div>
             </div>
           </div>
         </fieldset>
@@ -1170,10 +1170,10 @@
           <legend class="fr-fieldset__legend" id="indicateursFinanciersDepensesTotales-legend">Indicateur financier global</legend>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_694">Dépenses totales de prospection
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="depensesTotales">Dépenses totales de prospection
                   <!---->
                   <!----><span class="fr-hint-text">Montant en euros de l'ensemble des dépenses effectuées au cours de l'année</span>
-                </label><input class="fr-input" name="input_694" id="input_694" required="" type="number" min="0">
+                </label><input class="fr-input" name="depensesTotales" id="depensesTotales" required="" type="number" min="0">
                 <!---->
               </div>
             </div>
@@ -1183,10 +1183,10 @@
           <legend class="fr-fieldset__legend" id="indicateursFinanciersLevesTopographiques-legend">Levés topographiques</legend>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_967">Dépenses de levés topographiques (euros)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="depensesLevesTopographiques">Dépenses de levés topographiques (euros)
                   <!---->
                   <!----><span class="fr-hint-text">Montant en euros des dépenses de levés topographiques au cours de l'année</span>
-                </label><input class="fr-input" name="input_967" id="input_967" required="" type="number" min="0">
+                </label><input class="fr-input" name="depensesLevesTopographiques" id="depensesLevesTopographiques" required="" type="number" min="0">
                 <!---->
               </div>
             </div>
@@ -1196,10 +1196,10 @@
           <legend class="fr-fieldset__legend" id="indicateursFinanciersCartographieGeologique-legend">Cartographie géologique</legend>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_875">Dépenses de cartographie géologique (euros)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="depensesCartographie">Dépenses de cartographie géologique (euros)
                   <!---->
                   <!----><span class="fr-hint-text">Montant en euros des dépenses de cartographie géologique au cours de l'année</span>
-                </label><input class="fr-input" name="input_875" id="input_875" required="" type="number" min="0">
+                </label><input class="fr-input" name="depensesCartographie" id="depensesCartographie" required="" type="number" min="0">
                 <!---->
               </div>
             </div>
@@ -1209,10 +1209,10 @@
           <legend class="fr-fieldset__legend" id="indicateursFinanciersLevesGeochimie-legend">Levés géochimiques</legend>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_339">Dépenses de levés géochimiques (euros)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="depensesLevesGeochimie">Dépenses de levés géochimiques (euros)
                   <!---->
                   <!----><span class="fr-hint-text">Montant en euros des dépenses de levés géochimiques au cours de l'année</span>
-                </label><input class="fr-input" name="input_339" id="input_339" required="" type="number" min="0">
+                </label><input class="fr-input" name="depensesLevesGeochimie" id="depensesLevesGeochimie" required="" type="number" min="0">
                 <!---->
               </div>
             </div>
@@ -1222,10 +1222,10 @@
           <legend class="fr-fieldset__legend" id="indicateursFinanciersLevesGeophysique-legend">Levés géophysique</legend>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_179">Dépenses de levés géophysique (euros)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="depensesLevesGeophysique">Dépenses de levés géophysique (euros)
                   <!---->
                   <!----><span class="fr-hint-text">Montant en euros des dépenses de levés géophysique au cours de l'année</span>
-                </label><input class="fr-input" name="input_179" id="input_179" required="" type="number" min="0">
+                </label><input class="fr-input" name="depensesLevesGeophysique" id="depensesLevesGeophysique" required="" type="number" min="0">
                 <!---->
               </div>
             </div>
@@ -1235,10 +1235,10 @@
           <legend class="fr-fieldset__legend" id="indicateursFinanciersLevesTrancheesPuits-legend">Tranchées et puits</legend>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_480">Dépenses de tranchées et puits (euros)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="depensesLevesTrancheesPuits">Dépenses de tranchées et puits (euros)
                   <!---->
                   <!----><span class="fr-hint-text">Montant en euros des dépenses de tranchées et puits au cours de l'année</span>
-                </label><input class="fr-input" name="input_480" id="input_480" required="" type="number" min="0">
+                </label><input class="fr-input" name="depensesLevesTrancheesPuits" id="depensesLevesTrancheesPuits" required="" type="number" min="0">
                 <!---->
               </div>
             </div>
@@ -1248,30 +1248,30 @@
           <legend class="fr-fieldset__legend" id="indicateursFinanciersSondages-legend">Sondages</legend>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_617">Dépenses de sondages tarières (euros)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="depensesLevesSondagesTarieres">Dépenses de sondages tarières (euros)
                   <!---->
                   <!----><span class="fr-hint-text">Montant en euros des dépenses de sondages tarières au cours de l'année</span>
-                </label><input class="fr-input" name="input_617" id="input_617" required="" type="number" min="0">
+                </label><input class="fr-input" name="depensesLevesSondagesTarieres" id="depensesLevesSondagesTarieres" 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_877">Dépenses de sondages destructifs (euros)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="depensesLevesSondagesDestructifs">Dépenses de sondages destructifs (euros)
                   <!---->
                   <!----><span class="fr-hint-text">Montant en euros des dépenses de sondages destructifs au cours de l'année</span>
-                </label><input class="fr-input" name="input_877" id="input_877" required="" type="number" min="0">
+                </label><input class="fr-input" name="depensesLevesSondagesDestructifs" id="depensesLevesSondagesDestructifs" 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_77">Dépenses de sondages carottés (euros)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="depensesLevesSondagesCarottés">Dépenses de sondages carottés (euros)
                   <!---->
                   <!----><span class="fr-hint-text">Montant en euros des dépenses de sondages carottés au cours de l'année</span>
-                </label><input class="fr-input" name="input_77" id="input_77" required="" type="number" min="0">
+                </label><input class="fr-input" name="depensesLevesSondagesCarottés" id="depensesLevesSondagesCarottés" required="" type="number" min="0">
                 <!---->
               </div>
             </div>
@@ -1281,20 +1281,20 @@
           <legend class="fr-fieldset__legend" id="indicateursFinanciersAnalysesMultiElements-legend">Analyses</legend>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_181">Dépenses d'analyses multi-éléments (euros)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="depensesAnalysesMultiElements">Dépenses d'analyses multi-éléments (euros)
                   <!---->
                   <!----><span class="fr-hint-text">Montant en euros des dépenses d'analyses multi-éléments au cours de l'année</span>
-                </label><input class="fr-input" name="input_181" id="input_181" required="" type="number" min="0">
+                </label><input class="fr-input" name="depensesAnalysesMultiElements" id="depensesAnalysesMultiElements" 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_932">Dépenses de traitements minéralurgiques (euros)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="depensesTraitementMineralurgiques">Dépenses de traitements minéralurgiques (euros)
                   <!---->
                   <!----><span class="fr-hint-text">Montant en euros des dépenses de traitements minéralurgiques au cours de l'année</span>
-                </label><input class="fr-input" name="input_932" id="input_932" required="" type="number" min="0">
+                </label><input class="fr-input" name="depensesTraitementMineralurgiques" id="depensesTraitementMineralurgiques" required="" type="number" min="0">
                 <!---->
               </div>
             </div>
@@ -1304,60 +1304,60 @@
           <legend class="fr-fieldset__legend" id="indicateursFinanciersEtudes-legend">Etudes</legend>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_344">Dépenses d'étude environnementale (euros)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="depensesEtudeEnvironnementale">Dépenses d'étude environnementale (euros)
                   <!---->
                   <!----><span class="fr-hint-text">Montant en euros des dépenses d'études environnementales au cours de l'année</span>
-                </label><input class="fr-input" name="input_344" id="input_344" required="" type="number" min="0">
+                </label><input class="fr-input" name="depensesEtudeEnvironnementale" id="depensesEtudeEnvironnementale" 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_258">Dépenses d'étude économique préliminaire (euros)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="depensesEtudeEconomiquePreliminaire">Dépenses d'étude économique préliminaire (euros)
                   <!---->
                   <!----><span class="fr-hint-text">Montant en euros des dépenses d'étude économique préliminaire au cours de l'année</span>
-                </label><input class="fr-input" name="input_258" id="input_258" required="" type="number" min="0">
+                </label><input class="fr-input" name="depensesEtudeEconomiquePreliminaire" id="depensesEtudeEconomiquePreliminaire" 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_268">Dépenses d'étude économique pré-faisabilité (euros)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="depensesEtudeEconomiquePreFaisabilite">Dépenses d'étude économique pré-faisabilité (euros)
                   <!---->
                   <!----><span class="fr-hint-text">Montant en euros des dépenses d'étude économique pré-faisabilité au cours de l'année</span>
-                </label><input class="fr-input" name="input_268" id="input_268" required="" type="number" min="0">
+                </label><input class="fr-input" name="depensesEtudeEconomiquePreFaisabilite" id="depensesEtudeEconomiquePreFaisabilite" 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_886">Dépenses d'étude économique faisabilité (euros)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="depensesEtudeEconomiqueFaisabilité">Dépenses d'étude économique faisabilité (euros)
                   <!---->
                   <!----><span class="fr-hint-text">Montant en euros des dépenses d'étude économique faisabilité au cours de l'année</span>
-                </label><input class="fr-input" name="input_886" id="input_886" required="" type="number" min="0">
+                </label><input class="fr-input" name="depensesEtudeEconomiqueFaisabilité" id="depensesEtudeEconomiqueFaisabilité" 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_776">Dépenses d'étude sociale (euros)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="depensesEtudeSociale">Dépenses d'étude sociale (euros)
                   <!---->
                   <!----><span class="fr-hint-text">Montant en euros des dépenses d'étude environnementales au cours de l'année</span>
-                </label><input class="fr-input" name="input_776" id="input_776" required="" type="number" min="0">
+                </label><input class="fr-input" name="depensesEtudeSociale" id="depensesEtudeSociale" 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_647">Dépenses d'études autres (euros)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="depensesEtudessautres">Dépenses d'études autres (euros)
                   <!---->
                   <!----><span class="fr-hint-text">Montant en euros des dépenses d'études autres au cours de l'année</span>
-                </label><input class="fr-input" name="input_647" id="input_647" required="" type="number" min="0">
+                </label><input class="fr-input" name="depensesEtudessautres" id="depensesEtudessautres" required="" type="number" min="0">
                 <!---->
               </div>
             </div>
@@ -1367,10 +1367,10 @@
           <legend class="fr-fieldset__legend" id="indicateursFinanciersEnvironnement-legend">Environnement</legend>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_575">Dépenses relatives à la protection de l'environnement (euros)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="environnement">Dépenses relatives à la protection de l'environnement (euros)
                   <!---->
                   <!----><span class="fr-hint-text">Montant en euros des investissements consentis au cours de l'année listés à l'<a href="https://www.legifrance.gouv.fr/affichCodeArticle.do?idArticle=LEGIARTI000021850940&amp;cidTexte=LEGITEXT000006069569" target="_blank" title="Page de l'article - site externe" 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 être demandés par l'administration.</span>
-                </label><input class="fr-input" name="input_575" id="input_575" required="" type="number" min="0">
+                </label><input class="fr-input" name="environnement" id="environnement" required="" type="number" min="0">
                 <!---->
               </div>
             </div>
@@ -1380,10 +1380,10 @@
           <legend class="fr-fieldset__legend" id="indicateursFinanciersCommunication-legend">Communication</legend>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_817">Dépenses de communication et d'information du public (euros)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="depensesCommunication">Dépenses de communication et d'information du public (euros)
                   <!---->
                   <!----><span class="fr-hint-text">Montant en euros des dépenses de communication et frais d'organisation de réunions publiques au cours de l'année</span>
-                </label><input class="fr-input" name="input_817" id="input_817" required="" type="number" min="0">
+                </label><input class="fr-input" name="depensesCommunication" id="depensesCommunication" required="" type="number" min="0">
                 <!---->
               </div>
             </div>
@@ -1393,17 +1393,17 @@
           <legend class="fr-fieldset__legend" id="complementFinancier-legend">Informations complémentaires</legend>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_185">Autres dépenses (euros)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="depensesAutres">Autres dépenses (euros)
                   <!---->
                   <!----><span class="fr-hint-text">Montant en euros des autres dépenses au cours de l'année</span>
-                </label><input class="fr-input" name="input_185" id="input_185" required="" type="number" min="0">
+                </label><input class="fr-input" name="depensesAutres" id="depensesAutres" required="" type="number" min="0">
                 <!---->
               </div>
             </div>
           </div>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group"><label class="fr-label" for="textarea_426"> Champ optionnel<span class="fr-hint-text">Toute information sur les événements financiers marquants de l'année.</span></label><textarea class="fr-input" name="textarea_426" id="textarea_426"></textarea></div>
+              <div class="fr-input-group"><label class="fr-label" for="texte"> Champ optionnel<span class="fr-hint-text">Toute information sur les événements financiers marquants de l'année.</span></label><textarea class="fr-input" name="texte" id="texte"></textarea></div>
             </div>
           </div>
         </fieldset>
@@ -1418,60 +1418,60 @@
           <legend class="fr-fieldset__legend" id="indicateursEnvironnement-legend">Indicateurs environnementaux</legend>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_573">Carburant détaxé (l)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="carburantDetaxe">Carburant détaxé (l)
                   <!---->
                   <!----><span class="fr-hint-text">Volume total en litre de carburant détaxé consommé au cours de l'année par les travaux réalisés sur le chantier.</span>
-                </label><input class="fr-input" name="input_573" id="input_573" required="" type="number" min="0">
+                </label><input class="fr-input" name="carburantDetaxe" id="carburantDetaxe" 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_486">Carburant conventionnel (l)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="carburantConventionnel">Carburant conventionnel (l)
                   <!---->
                   <!----><span class="fr-hint-text">Volume total en litre de carburant conventionnel consommé au cours de l'année par les travaux réalisés sur le chantier.</span>
-                </label><input class="fr-input" name="input_486" id="input_486" required="" type="number" min="0">
+                </label><input class="fr-input" name="carburantConventionnel" id="carburantConventionnel" 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_44">Pompes actives
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="pompes">Pompes actives
                   <!---->
                   <!----><span class="fr-hint-text"><b>Dans le cas d'un chantier alluvionnaire</b>, nombre d'heure de fonctionnement de pompes au cours de l'année sur le chantier (pompe à gravier, pompe de relevage…).</span>
-                </label><input class="fr-input" name="input_44" id="input_44" required="" type="number" min="0">
+                </label><input class="fr-input" name="pompes" id="pompes" 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_181">Pelles actives
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="pelles">Pelles actives
                   <!---->
                   <!----><span class="fr-hint-text"><b>Dans le cas d'un chantier alluvionnaire</b>, nombre d'heure de fonctionnement de pelles mécaniques au cours de l'année sur le chantier (aménagement, exploitation, réhabilitation).</span>
-                </label><input class="fr-input" name="input_181" id="input_181" required="" type="number" min="0">
+                </label><input class="fr-input" name="pelles" id="pelles" 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_804">Mercure récupéré (g)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="mercure">Mercure récupéré (g)
                   <!---->
                   <!----><span class="fr-hint-text"><b>En Guyane</b>, masse en gramme de l'ensemble des produits contaminés au mercure envoyés en traitement au cours de l'année.</span>
-                </label><input class="fr-input" name="input_804" id="input_804" required="" type="number" min="0">
+                </label><input class="fr-input" name="mercure" id="mercure" 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_353">Surface déforestée (km²)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="surfaceDeforestee">Surface déforestée (km²)
                   <!---->
                   <!----><span class="fr-hint-text">Surface déforestée en kilomètre carré au cours de l'année.</span>
-                </label><input class="fr-input" name="input_353" id="input_353" required="" type="number" min="0">
+                </label><input class="fr-input" name="surfaceDeforestee" id="surfaceDeforestee" required="" type="number" min="0">
                 <!---->
               </div>
             </div>
@@ -1481,7 +1481,7 @@
           <legend class="fr-fieldset__legend" id="complementEnvironnement-legend">Informations complémentaires</legend>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group"><label class="fr-label" for="textarea_614"> Champ optionnel<span class="fr-hint-text">Toute information sur les événements marquants l'année en matière de protection de l'environnement dont les actions entreprises pour réduire l'empreinte environnementale du projet.</span></label><textarea class="fr-input" name="textarea_614" id="textarea_614"></textarea></div>
+              <div class="fr-input-group"><label class="fr-label" for="texte"> Champ optionnel<span class="fr-hint-text">Toute information sur les événements marquants l'année en matière de protection de l'environnement dont les actions entreprises pour réduire l'empreinte environnementale du projet.</span></label><textarea class="fr-input" name="texte" id="texte"></textarea></div>
             </div>
           </div>
         </fieldset>
@@ -1496,60 +1496,60 @@
           <legend class="fr-fieldset__legend" id="indicateursSocialEconomiqueDirect-legend">Indicateurs sociaux et économiques sur les emplois directs</legend>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_21">Emplois directs salariés
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="emploisDirectsTotal">Emplois directs salariés
                   <!---->
                   <!----><span class="fr-hint-text">Nombre total de salariés de l'entreprise affectés aux activités sur le titre minier.</span>
-                </label><input class="fr-input" name="input_21" id="input_21" required="" type="number" min="0">
+                </label><input class="fr-input" name="emploisDirectsTotal" id="emploisDirectsTotal" 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_478">Equivalents temps plein salariés
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="etpDirectsTotal">Equivalents temps plein salariés
                   <!---->
                   <!----><span class="fr-hint-text">Nombre total d'équivalents temps plein salariés de l'entreprise affectés aux activités sur le titre minier.</span>
-                </label><input class="fr-input" name="input_478" id="input_478" required="" type="number" min="0">
+                </label><input class="fr-input" name="etpDirectsTotal" id="etpDirectsTotal" 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_959">Emplois directs salariés occupés par des résidents du département
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="emploisDirectsResidents">Emplois directs salariés occupés par des résidents du département
                   <!---->
                   <!----><span class="fr-hint-text">Nombre de salariés de l'entreprise, <b>français ou étrangers, résidant fiscalement dans le département</b>, affectés aux activités sur le titre minier.</span>
-                </label><input class="fr-input" name="input_959" id="input_959" required="" type="number" min="0">
+                </label><input class="fr-input" name="emploisDirectsResidents" id="emploisDirectsResidents" 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_112">Equivalents temps plein salariés occupés par des résidents du département
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="etpDirectsResidents">Equivalents temps plein salariés occupés par des résidents du département
                   <!---->
                   <!----><span class="fr-hint-text">Nombre d'équivalents temps plein salariés de l'entreprise, occupés par des <b>français ou étrangers, résidant fiscalement dans le département</b>, affectés aux activités sur le titre minier.</span>
-                </label><input class="fr-input" name="input_112" id="input_112" required="" type="number" min="0">
+                </label><input class="fr-input" name="etpDirectsResidents" id="etpDirectsResidents" 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_152">Emplois directs salariés de nationalité française
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="emploisDirectsFr">Emplois directs salariés de nationalité française
                   <!---->
                   <!----><span class="fr-hint-text">Nombre d'employés de <b>nationalité française</b> salariés de l'entreprise affectés aux activités sur le titre minier.</span>
-                </label><input class="fr-input" name="input_152" id="input_152" required="" type="number" min="0">
+                </label><input class="fr-input" name="emploisDirectsFr" id="emploisDirectsFr" 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_132">Equivalents temps plein salariés de nationalité française
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="etpDirectsFr">Equivalents temps plein salariés de nationalité française
                   <!---->
                   <!----><span class="fr-hint-text">Nombre d'équivalents temps plein salariés de l'entreprise occupés par des personnes de <b>nationalité française</b> affectés aux activités sur le titre minier.</span>
-                </label><input class="fr-input" name="input_132" id="input_132" required="" type="number" min="0">
+                </label><input class="fr-input" name="etpDirectsFr" id="etpDirectsFr" required="" type="number" min="0">
                 <!---->
               </div>
             </div>
@@ -1559,60 +1559,60 @@
           <legend class="fr-fieldset__legend" id="indicateursSocialEconomiqueInirects-legend">Indicateurs sociaux et économiques sur la sous-traitance</legend>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_965">Emplois salariés des sous-traitants
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="emploisIndirectsTotal">Emplois salariés des sous-traitants
                   <!---->
                   <!----><span class="fr-hint-text">Nombre total d'emplois salariés des sous-traitants et prestataires affectés aux activités sur le titre minier.</span>
-                </label><input class="fr-input" name="input_965" id="input_965" required="" type="number" min="0">
+                </label><input class="fr-input" name="emploisIndirectsTotal" id="emploisIndirectsTotal" 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_130">Equivalents temps plein salariés des sous-traitants
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="etpIndirectsTotal">Equivalents temps plein salariés des sous-traitants
                   <!---->
                   <!----><span class="fr-hint-text">Nombre total d'équivalents temps plein salariés des sous-traitants et prestataires, affectés aux activités sur le titre minier.</span>
-                </label><input class="fr-input" name="input_130" id="input_130" required="" type="number" min="0">
+                </label><input class="fr-input" name="etpIndirectsTotal" id="etpIndirectsTotal" 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_595">Emplois salariés résidents du département des sous-traitants
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="emploisIndirectsResidents">Emplois salariés résidents du département des sous-traitants
                   <!---->
                   <!----><span class="fr-hint-text">Nombre de salariés des sous-traitants et prestataires, <b>résidant fiscalement dans le département</b>, affectés aux activités sur le titre minier.</span>
-                </label><input class="fr-input" name="input_595" id="input_595" required="" type="number" min="0">
+                </label><input class="fr-input" name="emploisIndirectsResidents" id="emploisIndirectsResidents" 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_908">Equivalents temps plein des salariés des sous-traitants résidents du département
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="etpIndirectsResidents">Equivalents temps plein des salariés des sous-traitants résidents du département
                   <!---->
                   <!----><span class="fr-hint-text">Nombre d'équivalents temps plein des sous-traitants et prestataires, <b>résidant fiscalement dans le département</b>, affectés aux activités sur le titre minier.</span>
-                </label><input class="fr-input" name="input_908" id="input_908" required="" type="number" min="0">
+                </label><input class="fr-input" name="etpIndirectsResidents" id="etpIndirectsResidents" 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_301">Emplois salariés de nationalité française des sous-traitants
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="emploisIndirectsFr">Emplois salariés de nationalité française des sous-traitants
                   <!---->
                   <!----><span class="fr-hint-text">Nombre d'employés de <b>nationalité française</b> salariés des sous-traitants et prestataires de l'entreprise, affectés aux activités sur le titre minier.</span>
-                </label><input class="fr-input" name="input_301" id="input_301" required="" type="number" min="0">
+                </label><input class="fr-input" name="emploisIndirectsFr" id="emploisIndirectsFr" 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_377">Equivalents temps plein salariés de nationalité française des sous-traitants
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="etpIndirectsFr">Equivalents temps plein salariés de nationalité française des sous-traitants
                   <!---->
                   <!----><span class="fr-hint-text">Nombre d'équivalents temps plein occupés par des personnes de <b>nationalité française</b> salariées des sous-traitants et prestataires de l'entreprise, affectées aux activités sur le titre minier.</span>
-                </label><input class="fr-input" name="input_377" id="input_377" required="" type="number" min="0">
+                </label><input class="fr-input" name="etpIndirectsFr" id="etpIndirectsFr" required="" type="number" min="0">
                 <!---->
               </div>
             </div>
@@ -1622,30 +1622,30 @@
           <legend class="fr-fieldset__legend" id="indicateursConcertationAcceptabilite-legend">Indicateurs de concertation et d'acceptabilité du projet</legend>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_266">Réunions publiques
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="reunionPublique">Réunions publiques
                   <!---->
                   <!----><span class="fr-hint-text">Nombre de réunions publiques consacrées aux projets sur le titre minier organisées au cours de l'année</span>
-                </label><input class="fr-input" name="input_266" id="input_266" required="" type="number" min="0">
+                </label><input class="fr-input" name="reunionPublique" id="reunionPublique" 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_940">Rendez-vous
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="priseContact">Rendez-vous
                   <!---->
                   <!----><span class="fr-hint-text">Nombre de rendez-vous avec les parties prenantes concernées par le titre minier organisés au cours de l'année</span>
-                </label><input class="fr-input" name="input_940" id="input_940" required="" type="number" min="0">
+                </label><input class="fr-input" name="priseContact" id="priseContact" 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_966">Actions de communication à destination du public
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="communicationLocale">Actions de communication à destination du public
                   <!---->
                   <!----><span class="fr-hint-text">Nombre d'actions de communication menées par le titulaire du titre à destination du public (hors publication et communication à destination des marchés) au cours de l'année</span>
-                </label><input class="fr-input" name="input_966" id="input_966" required="" type="number" min="0">
+                </label><input class="fr-input" name="communicationLocale" id="communicationLocale" required="" type="number" min="0">
                 <!---->
               </div>
             </div>
@@ -1655,7 +1655,7 @@
           <legend class="fr-fieldset__legend" id="complementSocialEconomique-legend">Informations complémentaires</legend>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group"><label class="fr-label" for="textarea_836"> Champ optionnel<span class="fr-hint-text">Toute information sur les événements marquants de nature sociale ou économique de l'année.</span></label><textarea class="fr-input" name="textarea_836" id="textarea_836"></textarea></div>
+              <div class="fr-input-group"><label class="fr-label" for="texte"> Champ optionnel<span class="fr-hint-text">Toute information sur les événements marquants de nature sociale ou économique de l'année.</span></label><textarea class="fr-input" name="texte" id="texte"></textarea></div>
             </div>
           </div>
         </fieldset>
@@ -1670,10 +1670,10 @@
           <legend class="fr-fieldset__legend" id="renseignementsProduction-legend">Production annuelle</legend>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_658">Volume de granulats marins extrait (m3)
+              <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="volumeGranulatsExtrait">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_658" id="input_658" required="" type="number" min="0">
+                </label><input class="fr-input" name="volumeGranulatsExtrait" id="volumeGranulatsExtrait" required="" type="number" min="0">
                 <!---->
               </div>
             </div>
@@ -1683,7 +1683,7 @@
           <legend class="fr-fieldset__legend" id="complementInformation-legend">Informations complémentaires</legend>
           <div class="fr-fieldset__element">
             <div>
-              <div class="fr-input-group"><label class="fr-label" for="textarea_248"> Champ optionnel<span class="fr-hint-text">Toute information sur les événements marquants de l'année (arrêt ou suspension d'activité en précisant les raisons, évolution de l'exploitation, difficultés rencontrées, accident, incident, etc.).</span></label><textarea class="fr-input" name="textarea_248" id="textarea_248"></textarea></div>
+              <div class="fr-input-group"><label class="fr-label" for="texte"> Champ optionnel<span class="fr-hint-text">Toute information sur les événements marquants de l'année (arrêt ou suspension d'activité en précisant les raisons, évolution de l'exploitation, difficultés rencontrées, accident, incident, etc.).</span></label><textarea class="fr-input" name="texte" id="texte"></textarea></div>
             </div>
           </div>
         </fieldset>
diff --git a/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_VolumeGranulatsExtrait.html b/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_VolumeGranulatsExtrait.html
index 8e57d4bc66943c976a6fdd19c1b2d912134574d8..24f18c2b272de5ebb3faa664a49c3dfec9fe62ce 100644
--- a/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_VolumeGranulatsExtrait.html
+++ b/packages/ui/src/components/_common/new-sections-edit.stories_snapshots_VolumeGranulatsExtrait.html
@@ -3,11 +3,11 @@
     <!---->
     <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)
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="volumeGranulatsExtrait">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>
+          </label><input class="fr-input" name="volumeGranulatsExtrait" id="volumeGranulatsExtrait" required="" type="number" min="0" aria-describedby="volumeGranulatsExtrait-info" value="12">
+          <p id="volumeGranulatsExtrait-info" class="fr-info-text">Soit l’équivalent de 18 tonnes</p>
         </div>
       </div>
     </div>
diff --git a/packages/ui/src/components/_common/new-sections-edit.tsx b/packages/ui/src/components/_common/new-sections-edit.tsx
index ce8d12a7155f721a17fd75ba5880e4a3a3c445ff..a76bf560dab269c8f53791f287da987b69bbefcb 100644
--- a/packages/ui/src/components/_common/new-sections-edit.tsx
+++ b/packages/ui/src/components/_common/new-sections-edit.tsx
@@ -126,6 +126,7 @@ const InnerComponent: FunctionalComponent<SectionElementEditProps> = props => {
       return (
         <div>
           <DsfrInput
+            id={element.id}
             type={{ type: 'number', min: 0 }}
             required={required}
             initialValue={element.value}
@@ -138,6 +139,7 @@ const InnerComponent: FunctionalComponent<SectionElementEditProps> = props => {
       return (
         <div>
           <DsfrInput
+            id={element.id}
             type={{ type: 'date' }}
             required={required}
             initialValue={element.value}
@@ -152,6 +154,7 @@ const InnerComponent: FunctionalComponent<SectionElementEditProps> = props => {
       return (
         <div>
           <DsfrTextarea
+            id={element.id}
             required={required}
             initialValue={element.value ?? undefined}
             valueChanged={(e: string) => props.onValueChange({ ...element, value: e })}
@@ -165,6 +168,7 @@ const InnerComponent: FunctionalComponent<SectionElementEditProps> = props => {
       return (
         <div>
           <DsfrInput
+            id={element.id}
             required={required}
             type={{ type: 'text' }}
             initialValue={element.value}
@@ -207,6 +211,7 @@ const InnerComponent: FunctionalComponent<SectionElementEditProps> = props => {
       return (
         <div>
           <DsfrInputCheckboxes
+            id={element.id}
             legend={{ main: element.nom ?? '', description: element.description }}
             elements={element.options.map(option => {
               return { itemId: option.id, legend: { main: capitalize(option.nom) } }
@@ -222,6 +227,7 @@ const InnerComponent: FunctionalComponent<SectionElementEditProps> = props => {
         return (
           <div>
             <DsfrSelect
+              id={element.id}
               required={required}
               legend={{ main: element.nom ?? '', description: element.description }}
               items={options}
diff --git a/packages/ui/src/components/_common/storybook.spec.ts b/packages/ui/src/components/_common/storybook.spec.ts
index 6e87947bfb719d45e1953ee53e48fc0c0a8f6749..f41a74054cceacd91b935d16ac22a966c7528111 100644
--- a/packages/ui/src/components/_common/storybook.spec.ts
+++ b/packages/ui/src/components/_common/storybook.spec.ts
@@ -3,7 +3,6 @@ import type { Meta, StoryFn } from '@storybook/vue3'
 import { render } from '@testing-library/vue'
 import { composeStories } from '@storybook/vue3'
 import { h } from 'vue'
-import { setSeed } from '@/utils/vue-tsx-utils'
 import { sleep } from 'camino-common/src/typescript-tools'
 
 type StoryFile = {
@@ -46,7 +45,6 @@ describe('Common Storybook Tests', async () => {
         .map(([name, story]) => ({ name, story }))
         .filter(env => (name ?? '').includes('NoStoryshots') || !(env.name ?? '').includes('NoSnapshot'))
     )('$name', async value => {
-      setSeed(12)
       let html: string | undefined = undefined
       try {
         // @ts-ignore
diff --git a/packages/ui/src/components/_common/substance-legale-typeahead.stories.tsx b/packages/ui/src/components/_common/substance-legale-typeahead.stories.tsx
index 2d6f4fcfa76c9101596703ec633c5b125c5c33c1..ecc23cfcda6d1b9627b9543ed79ff9ad40ca2365 100644
--- a/packages/ui/src/components/_common/substance-legale-typeahead.stories.tsx
+++ b/packages/ui/src/components/_common/substance-legale-typeahead.stories.tsx
@@ -11,5 +11,7 @@ export default meta
 
 const substanceLegaleSelected = action('substanceLegaleSelected')
 
-export const Default: StoryFn = () => <SubstanceLegaleTypeahead substanceLegaleIds={['auru', 'aloh']} substanceLegaleSelected={substanceLegaleSelected} alwaysOpen={true} />
-export const WithSubstanceTypeAlreadySelected: StoryFn = () => <SubstanceLegaleTypeahead substanceLegaleIds={['auru', 'aloh']} initialValue="auru" substanceLegaleSelected={substanceLegaleSelected} />
+export const Default: StoryFn = () => <SubstanceLegaleTypeahead id="test" substanceLegaleIds={['auru', 'aloh']} substanceLegaleSelected={substanceLegaleSelected} alwaysOpen={true} />
+export const WithSubstanceTypeAlreadySelected: StoryFn = () => (
+  <SubstanceLegaleTypeahead id="test" substanceLegaleIds={['auru', 'aloh']} initialValue="auru" substanceLegaleSelected={substanceLegaleSelected} />
+)
diff --git a/packages/ui/src/components/_common/substance-legale-typeahead.stories_snapshots_Default.html b/packages/ui/src/components/_common/substance-legale-typeahead.stories_snapshots_Default.html
index a9d1ad4044c19367a646ecaa162155a049381cee..7b208030cc8a8785b326a6fe5bd406704da758c7 100644
--- a/packages/ui/src/components/_common/substance-legale-typeahead.stories_snapshots_Default.html
+++ b/packages/ui/src/components/_common/substance-legale-typeahead.stories_snapshots_Default.html
@@ -1,7 +1,7 @@
-<div id="typeahead_substances_271_wrapper" class="_typeahead_8eddf1">
-  <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>
+<div id="test_wrapper" class="_typeahead_8eddf1">
+  <div class="flex"><input id="test" type="text" title="" name="test" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="test-control" aria-activedescendant="test-control-0" aria-expanded="true" aria-autocomplete="list" value=""></div>
+  <ul class="_typeahead-list_8eddf1 _typeahead-list--visible_8eddf1" tabindex="-1" id="test-control" role="listbox">
+    <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="true" id="test-control-0"><span>bauxite</span></li>
+    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="test-control-1"><span>or</span></li>
   </ul>
 </div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_common/substance-legale-typeahead.stories_snapshots_WithSubstanceTypeAlreadySelected.html b/packages/ui/src/components/_common/substance-legale-typeahead.stories_snapshots_WithSubstanceTypeAlreadySelected.html
index f6dd81c078504f4ac86bb720325bcf0396ba1ead..3855927949b66b3b25c46a02d53580e7d3db557b 100644
--- a/packages/ui/src/components/_common/substance-legale-typeahead.stories_snapshots_WithSubstanceTypeAlreadySelected.html
+++ b/packages/ui/src/components/_common/substance-legale-typeahead.stories_snapshots_WithSubstanceTypeAlreadySelected.html
@@ -1,6 +1,6 @@
-<div id="typeahead_substances_271_wrapper" class="_typeahead_8eddf1">
-  <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>
+<div id="test_wrapper" class="_typeahead_8eddf1">
+  <div class="flex"><input id="test" type="text" title="" name="test" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="test-control" aria-activedescendant="test-control" aria-expanded="false" aria-autocomplete="list" value="or"></div>
+  <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="test-control" role="listbox">
+    <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="test-control-0"><span>bauxite</span></li>
   </ul>
 </div>
\ No newline at end of file
diff --git a/packages/ui/src/components/_common/substance-legale-typeahead.tsx b/packages/ui/src/components/_common/substance-legale-typeahead.tsx
index ff10e2cba4f139e648359d9e4c4932d43c815dce..a50eb2910d3a79bb3a699e1e14e46e9a5f0eccbc 100644
--- a/packages/ui/src/components/_common/substance-legale-typeahead.tsx
+++ b/packages/ui/src/components/_common/substance-legale-typeahead.tsx
@@ -2,10 +2,9 @@ import { Ref, computed, defineComponent, ref } from 'vue'
 import { TypeAheadSingle } from '../_ui/typeahead-single'
 import { isNotNullNorUndefined } from 'camino-common/src/typescript-tools'
 import { SubstanceLegaleId, SubstancesLegale } from 'camino-common/src/static/substancesLegales'
-import { random } from '@/utils/vue-tsx-utils'
 
 type Props = {
-  id?: string
+  id: string
   alwaysOpen?: boolean
   substanceLegaleIds: SubstanceLegaleId[]
   initialValue?: SubstanceLegaleId
@@ -19,8 +18,6 @@ export const SubstanceLegaleTypeahead = defineComponent((props: Props) => {
     props.substanceLegaleSelected(isNotNullNorUndefined(substance) ? substance.id : null)
   }
 
-  const id = props.id ?? `typeahead_substances_${(random() * 1000).toFixed()}`
-
   const sortedByUs = computed<{ id: SubstanceLegaleId; nom: string }[]>(() => [...props.substanceLegaleIds].map(sId => SubstancesLegale[sId]).sort((a, b) => a.nom.localeCompare(b.nom)))
 
   const substancesFiltered = ref<{ id: SubstanceLegaleId; nom: string }[]>(sortedByUs.value) as Ref<{ id: SubstanceLegaleId; nom: string }[]>
@@ -39,7 +36,7 @@ export const SubstanceLegaleTypeahead = defineComponent((props: Props) => {
       overrideItem={substanceSelected.value}
       props={{
         alwaysOpen: props.alwaysOpen,
-        id,
+        id: props.id,
         items: substancesFiltered.value,
         itemChipLabel: item => item.nom,
         itemKey: 'id',
diff --git a/packages/ui/src/components/_common/titre-type-select.stories_snapshots_AlreadySelected.html b/packages/ui/src/components/_common/titre-type-select.stories_snapshots_AlreadySelected.html
index ee802b4a37485649dd7c57f3e6637ba7f3feecc3..f773c9a531e47e8b0766c9de0efd07434aa92c33 100644
--- a/packages/ui/src/components/_common/titre-type-select.stories_snapshots_AlreadySelected.html
+++ b/packages/ui/src/components/_common/titre-type-select.stories_snapshots_AlreadySelected.html
@@ -1,12 +1,12 @@
-<div class="fr-select-group"><label class="fr-label" for="select_271">Domaine
+<div class="fr-select-group"><label class="fr-label" for="titre_domaine">Domaine
     <!---->
-  </label><select class="fr-select" id="select_271" aria-label="Domaine" name="select_271" value="m">
+  </label><select class="fr-select" id="titre_domaine" aria-label="Domaine" name="titre_domaine" 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="titre_type">Type
     <!---->
-  </label><select class="fr-select" id="select_670" aria-label="Type" name="select_670" value="ar">
+  </label><select class="fr-select" id="titre_type" aria-label="Type" name="titre_type" value="ar">
     <option selected="" value="ar">autorisation de recherches</option>
     <option value="ax">autorisation d'exploitation</option>
     <option disabled="" hidden="" value="">Selectionnez une option</option>
diff --git a/packages/ui/src/components/_common/titre-type-select.stories_snapshots_Default.html b/packages/ui/src/components/_common/titre-type-select.stories_snapshots_Default.html
index 57d271a7a00176c69e6749946752b7da3568ea4a..9a42e60809ff9af119c1ace73c49e34fca5a3e3a 100644
--- a/packages/ui/src/components/_common/titre-type-select.stories_snapshots_Default.html
+++ b/packages/ui/src/components/_common/titre-type-select.stories_snapshots_Default.html
@@ -1,6 +1,6 @@
-<div class="fr-select-group"><label class="fr-label" for="select_271">Domaine
+<div class="fr-select-group"><label class="fr-label" for="titre_domaine">Domaine
     <!---->
-  </label><select class="fr-select" id="select_271" aria-label="Domaine" name="select_271">
+  </label><select class="fr-select" id="titre_domaine" aria-label="Domaine" name="titre_domaine">
     <option value="c">carrières</option>
     <option value="f">combustibles fossiles</option>
     <option value="r">éléments radioactifs</option>
diff --git a/packages/ui/src/components/_common/titre-type-select.stories_snapshots_Entreprise.html b/packages/ui/src/components/_common/titre-type-select.stories_snapshots_Entreprise.html
index f58a9ffae4fb3950c699b685aba6fb4db2b77e40..57eeb7933a456738da16bfc308d664a513eed7b2 100644
--- a/packages/ui/src/components/_common/titre-type-select.stories_snapshots_Entreprise.html
+++ b/packages/ui/src/components/_common/titre-type-select.stories_snapshots_Entreprise.html
@@ -1,12 +1,12 @@
-<div class="fr-select-group"><label class="fr-label" for="select_670">Domaine
+<div class="fr-select-group"><label class="fr-label" for="titre_domaine">Domaine
     <!---->
-  </label><select class="fr-select" id="select_670" aria-label="Domaine" name="select_670" value="m">
+  </label><select class="fr-select" id="titre_domaine" aria-label="Domaine" name="titre_domaine" 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="titre_type">Type
     <!---->
-  </label><select class="fr-select" id="select_74" aria-label="Type" name="select_74">
+  </label><select class="fr-select" id="titre_type" aria-label="Type" name="titre_type">
     <option value="ar">autorisation de recherches</option>
     <option value="ax">autorisation d'exploitation</option>
     <option selected="" disabled="" hidden="" value="">Selectionnez une option</option>
diff --git a/packages/ui/src/components/_common/titre-type-select.tsx b/packages/ui/src/components/_common/titre-type-select.tsx
index 5e36a410a040e7db25654584f4dfe53cb0d48356..727e40bcf10ddb39d0a495379c01cfac22039b9a 100644
--- a/packages/ui/src/components/_common/titre-type-select.tsx
+++ b/packages/ui/src/components/_common/titre-type-select.tsx
@@ -70,11 +70,11 @@ export const TitreTypeSelect = defineComponent<Props>(props => {
   return () => (
     <>
       {isNotNullNorUndefined(domainesFiltered.value) ? (
-        <DsfrSelect required={true} initialValue={domaineRef.value} items={domainesFiltered.value} valueChanged={domaineUpdate} legend={{ main: 'Domaine' }} />
+        <DsfrSelect id="titre_domaine" required={true} initialValue={domaineRef.value} items={domainesFiltered.value} valueChanged={domaineUpdate} legend={{ main: 'Domaine' }} />
       ) : null}
 
       {isNotNullNorUndefined(titresTypeTypes.value) ? (
-        <DsfrSelect required={true} initialValue={titreTypeType.value} items={titresTypeTypes.value} legend={{ main: 'Type' }} valueChanged={titreTypeTypeUpdate} />
+        <DsfrSelect id="titre_type" required={true} initialValue={titreTypeType.value} items={titresTypeTypes.value} legend={{ main: 'Type' }} valueChanged={titreTypeTypeUpdate} />
       ) : null}
     </>
   )
diff --git a/packages/ui/src/components/_ui/dsfr-accordion.stories.tsx b/packages/ui/src/components/_ui/dsfr-accordion.stories.tsx
index 5dde52ab7e0f1793e4c3069a879d98f96bad377e..56e5556d174f6260c6ecb58befd0bc95a798776c 100644
--- a/packages/ui/src/components/_ui/dsfr-accordion.stories.tsx
+++ b/packages/ui/src/components/_ui/dsfr-accordion.stories.tsx
@@ -9,6 +9,7 @@ export default meta
 
 export const Default: StoryFn = () => (
   <DsfrAccordion
+    id="test"
     expandedByDefault={false}
     title="Un accordéon"
     content={
@@ -20,6 +21,7 @@ export const Default: StoryFn = () => (
 )
 export const Expanded: StoryFn = () => (
   <DsfrAccordion
+    id="test"
     expandedByDefault
     title="Un accordéon"
     content={
diff --git a/packages/ui/src/components/_ui/dsfr-accordion.stories_snapshots_Default.html b/packages/ui/src/components/_ui/dsfr-accordion.stories_snapshots_Default.html
index 3ede1721d060241732bc4e2d197aab6b310b2ab2..0bab9615b42e50b601455a245569dbb2aa9b4f6c 100644
--- a/packages/ui/src/components/_ui/dsfr-accordion.stories_snapshots_Default.html
+++ b/packages/ui/src/components/_ui/dsfr-accordion.stories_snapshots_Default.html
@@ -1,6 +1,6 @@
 <section class="fr-accordion">
-  <div class="fr-accordion__title"><button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-271">Un accordéon</button></div>
-  <div class="fr-collapse" id="accordion-271">
+  <div class="fr-accordion__title"><button class="fr-accordion__btn" aria-expanded="false" aria-controls="test">Un accordéon</button></div>
+  <div class="fr-collapse" id="test">
     <h3>Un contenu</h3>
   </div>
 </section>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/dsfr-accordion.stories_snapshots_Expanded.html b/packages/ui/src/components/_ui/dsfr-accordion.stories_snapshots_Expanded.html
index 9a7559555991ae81ac0c2e3660926cd091bb8488..7ab0bcfe02647238f8241d8e32f68029610ca291 100644
--- a/packages/ui/src/components/_ui/dsfr-accordion.stories_snapshots_Expanded.html
+++ b/packages/ui/src/components/_ui/dsfr-accordion.stories_snapshots_Expanded.html
@@ -1,6 +1,6 @@
 <section class="fr-accordion">
-  <div class="fr-accordion__title"><button class="fr-accordion__btn" aria-expanded="true" aria-controls="accordion-271">Un accordéon</button></div>
-  <div class="fr-collapse" id="accordion-271">
+  <div class="fr-accordion__title"><button class="fr-accordion__btn" aria-expanded="true" aria-controls="test">Un accordéon</button></div>
+  <div class="fr-collapse" id="test">
     <h3>Un contenu</h3>
   </div>
 </section>
\ No newline at end of file
diff --git a/packages/ui/src/components/_ui/dsfr-accordion.tsx b/packages/ui/src/components/_ui/dsfr-accordion.tsx
index 67dc4645444d3ff0fc4fd39a7453ef0151630907..f7f436f09b1927905478c678d2c4e578865260c2 100644
--- a/packages/ui/src/components/_ui/dsfr-accordion.tsx
+++ b/packages/ui/src/components/_ui/dsfr-accordion.tsx
@@ -1,24 +1,23 @@
-import { random } from '@/utils/vue-tsx-utils'
 import { fr } from '@codegouvfr/react-dsfr'
 import { FunctionalComponent } from 'vue'
 import { JSX } from 'vue/jsx-runtime'
 
 interface Props {
+  id: string
   title: string
   content: JSX.Element
   expandedByDefault: boolean
 }
 
 export const DsfrAccordion: FunctionalComponent<Props> = (props: Props) => {
-  const id = `accordion-${(random() * 1000).toFixed()}`
   return (
     <section class={fr.cx('fr-accordion')}>
       <div class={fr.cx('fr-accordion__title')}>
-        <button class={fr.cx('fr-accordion__btn')} aria-expanded={props.expandedByDefault} aria-controls={id}>
+        <button class={fr.cx('fr-accordion__btn')} aria-expanded={props.expandedByDefault} aria-controls={props.id}>
           {props.title}
         </button>
       </div>
-      <div class={fr.cx('fr-collapse')} id={id}>
+      <div class={fr.cx('fr-collapse')} id={props.id}>
         {props.content}
       </div>
     </section>
diff --git a/packages/ui/src/components/_ui/dsfr-input-checkboxes.stories.tsx b/packages/ui/src/components/_ui/dsfr-input-checkboxes.stories.tsx
index 930f55e909f24504d9e95be4d7eb32ccac19c7e6..59d5e1e05b02adb81e7e0984759d837d18070da1 100644
--- a/packages/ui/src/components/_ui/dsfr-input-checkboxes.stories.tsx
+++ b/packages/ui/src/components/_ui/dsfr-input-checkboxes.stories.tsx
@@ -13,6 +13,7 @@ const valueChangedAction = action('valueChanged')
 
 export const Checked: StoryFn = () => (
   <DsfrInputCheckboxes
+    id="test"
     legend={{ main: 'Label', description: 'Description' }}
     valueChanged={valueChangedAction}
     elements={
@@ -27,6 +28,7 @@ export const Checked: StoryFn = () => (
 )
 export const NotChecked: StoryFn = () => (
   <DsfrInputCheckboxes
+    id="test"
     legend={{ main: 'Label' }}
     valueChanged={valueChangedAction}
     elements={
@@ -41,6 +43,7 @@ export const NotChecked: StoryFn = () => (
 )
 export const Small: StoryFn = () => (
   <DsfrInputCheckboxes
+    id="test"
     legend={{ main: 'Label' }}
     valueChanged={valueChangedAction}
     size="sm"
@@ -56,6 +59,7 @@ export const Small: StoryFn = () => (
 )
 export const Disabled: StoryFn = () => (
   <DsfrInputCheckboxes
+    id="test"
     legend={{ main: 'C’est désactivé' }}
     disabled={true}
     valueChanged={valueChangedAction}
diff --git a/packages/ui/src/components/_ui/dsfr-input-checkboxes.stories_snapshots_Checked.html b/packages/ui/src/components/_ui/dsfr-input-checkboxes.stories_snapshots_Checked.html
index 20e1cfd28102895fe39a62fff06444ab5d46da05..6e7423a9fbc46a90b3aaaf87dbf55ba366b6d5be 100644
--- a/packages/ui/src/components/_ui/dsfr-input-checkboxes.stories_snapshots_Checked.html
+++ b/packages/ui/src/components/_ui/dsfr-input-checkboxes.stories_snapshots_Checked.html
@@ -1,15 +1,15 @@
-<fieldset class="fr-fieldset" id="checkboxes_271" aria-labelledby="checkboxes_271-legend" style="flex-direction: column; align-items: flex-start;">
-  <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes_271-legend">Label<span class="fr-hint-text">Description</span></legend>
+<fieldset class="fr-fieldset" id="test" aria-labelledby="test-legend" style="flex-direction: column; align-items: flex-start;">
+  <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="test-legend">Label<span class="fr-hint-text">Description</span></legend>
   <div class="fr-fieldset__element">
-    <div class="fr-checkbox-group" itemid="1"><input checked="" name="archive" id="checkboxes_271_0" type="checkbox"><label class="fr-label" for="checkboxes_271_0">checkbox1<span class="fr-hint-text">avec description</span></label></div>
+    <div class="fr-checkbox-group" itemid="1"><input checked="" name="archive" id="test_0" type="checkbox"><label class="fr-label" for="test_0">checkbox1<span class="fr-hint-text">avec description</span></label></div>
   </div>
   <div class="fr-fieldset__element">
-    <div class="fr-checkbox-group" itemid="2"><input checked="" name="archive" id="checkboxes_271_1" type="checkbox"><label class="fr-label" for="checkboxes_271_1">checkbox2
+    <div class="fr-checkbox-group" itemid="2"><input checked="" name="archive" id="test_1" type="checkbox"><label class="fr-label" for="test_1">checkbox2
         <!---->
       </label></div>
   </div>
   <div class="fr-fieldset__element">
-    <div class="fr-checkbox-group" itemid="3"><input checked="" name="archive" id="checkboxes_271_2" type="checkbox"><label class="fr-label" for="checkboxes_271_2">checkbox3
+    <div class="fr-checkbox-group" itemid="3"><input checked="" name="archive" id="test_2" type="checkbox"><label class="fr-label" for="test_2">checkbox3
         <!---->
       </label></div>
   </div>
diff --git a/packages/ui/src/components/_ui/dsfr-input-checkboxes.stories_snapshots_Disabled.html b/packages/ui/src/components/_ui/dsfr-input-checkboxes.stories_snapshots_Disabled.html
index 764ba5ce77f73b500613ba1051a0fd7b829ec3c8..4b1cb96928bb6b6db6c399545269953a7469ef96 100644
--- a/packages/ui/src/components/_ui/dsfr-input-checkboxes.stories_snapshots_Disabled.html
+++ b/packages/ui/src/components/_ui/dsfr-input-checkboxes.stories_snapshots_Disabled.html
@@ -1,19 +1,19 @@
-<fieldset class="fr-fieldset" id="checkboxes_271" aria-labelledby="checkboxes_271-legend" disabled="" style="flex-direction: column; align-items: flex-start;">
-  <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes_271-legend">C’est désactivé
+<fieldset class="fr-fieldset" id="test" aria-labelledby="test-legend" disabled="" style="flex-direction: column; align-items: flex-start;">
+  <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="test-legend">C’est désactivé
     <!---->
   </legend>
   <div class="fr-fieldset__element">
-    <div class="fr-checkbox-group" itemid="1"><input checked="" name="archive" id="checkboxes_271_0" type="checkbox"><label class="fr-label" for="checkboxes_271_0">checkbox1
+    <div class="fr-checkbox-group" itemid="1"><input checked="" name="archive" id="test_0" type="checkbox"><label class="fr-label" for="test_0">checkbox1
         <!---->
       </label></div>
   </div>
   <div class="fr-fieldset__element">
-    <div class="fr-checkbox-group" itemid="2"><input name="archive" id="checkboxes_271_1" type="checkbox"><label class="fr-label" for="checkboxes_271_1">checkbox2
+    <div class="fr-checkbox-group" itemid="2"><input name="archive" id="test_1" type="checkbox"><label class="fr-label" for="test_1">checkbox2
         <!---->
       </label></div>
   </div>
   <div class="fr-fieldset__element">
-    <div class="fr-checkbox-group" itemid="3"><input checked="" name="archive" id="checkboxes_271_2" type="checkbox"><label class="fr-label" for="checkboxes_271_2">checkbox3
+    <div class="fr-checkbox-group" itemid="3"><input checked="" name="archive" id="test_2" type="checkbox"><label class="fr-label" for="test_2">checkbox3
         <!---->
       </label></div>
   </div>
diff --git a/packages/ui/src/components/_ui/dsfr-input-checkboxes.stories_snapshots_NotChecked.html b/packages/ui/src/components/_ui/dsfr-input-checkboxes.stories_snapshots_NotChecked.html
index 87955bd692423c6e8d646e13b98ee4d01f3668e5..c3b57230b9a00f9000f4105b10a37e6b4211b48a 100644
--- a/packages/ui/src/components/_ui/dsfr-input-checkboxes.stories_snapshots_NotChecked.html
+++ b/packages/ui/src/components/_ui/dsfr-input-checkboxes.stories_snapshots_NotChecked.html
@@ -1,19 +1,19 @@
-<fieldset class="fr-fieldset" id="checkboxes_271" aria-labelledby="checkboxes_271-legend" style="flex-direction: column; align-items: flex-start;">
-  <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes_271-legend">Label
+<fieldset class="fr-fieldset" id="test" aria-labelledby="test-legend" style="flex-direction: column; align-items: flex-start;">
+  <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="test-legend">Label
     <!---->
   </legend>
   <div class="fr-fieldset__element">
-    <div class="fr-checkbox-group" itemid="1"><input name="archive" id="checkboxes_271_0" type="checkbox"><label class="fr-label" for="checkboxes_271_0">checkbox1
+    <div class="fr-checkbox-group" itemid="1"><input name="archive" id="test_0" type="checkbox"><label class="fr-label" for="test_0">checkbox1
         <!---->
       </label></div>
   </div>
   <div class="fr-fieldset__element">
-    <div class="fr-checkbox-group" itemid="2"><input name="archive" id="checkboxes_271_1" type="checkbox"><label class="fr-label" for="checkboxes_271_1">checkbox2
+    <div class="fr-checkbox-group" itemid="2"><input name="archive" id="test_1" type="checkbox"><label class="fr-label" for="test_1">checkbox2
         <!---->
       </label></div>
   </div>
   <div class="fr-fieldset__element">
-    <div class="fr-checkbox-group" itemid="3"><input name="archive" id="checkboxes_271_2" type="checkbox"><label class="fr-label" for="checkboxes_271_2">checkbox3
+    <div class="fr-checkbox-group" itemid="3"><input name="archive" id="test_2" type="checkbox"><label class="fr-label" for="test_2">checkbox3
         <!---->
       </label></div>
   </div>
diff --git a/packages/ui/src/components/_ui/dsfr-input-checkboxes.stories_snapshots_Small.html b/packages/ui/src/components/_ui/dsfr-input-checkboxes.stories_snapshots_Small.html
index f194f594fed86cff51853cf0bc3e80c6ffb22d6b..4e6d9717f078e59a5f5d2ac62b371ad8d4beba64 100644
--- a/packages/ui/src/components/_ui/dsfr-input-checkboxes.stories_snapshots_Small.html
+++ b/packages/ui/src/components/_ui/dsfr-input-checkboxes.stories_snapshots_Small.html
@@ -1,19 +1,19 @@
-<fieldset class="fr-fieldset" id="checkboxes_271" aria-labelledby="checkboxes_271-legend" style="flex-direction: column; align-items: flex-start;">
-  <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes_271-legend">Label
+<fieldset class="fr-fieldset" id="test" aria-labelledby="test-legend" style="flex-direction: column; align-items: flex-start;">
+  <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="test-legend">Label
     <!---->
   </legend>
   <div class="fr-fieldset__element fr-mb-1v">
-    <div class="fr-checkbox-group fr-checkbox-group--sm" itemid="1"><input name="archive" id="checkboxes_271_0" type="checkbox"><label class="fr-label" for="checkboxes_271_0">checkbox1
+    <div class="fr-checkbox-group fr-checkbox-group--sm" itemid="1"><input name="archive" id="test_0" type="checkbox"><label class="fr-label" for="test_0">checkbox1
         <!---->
       </label></div>
   </div>
   <div class="fr-fieldset__element fr-mb-1v">
-    <div class="fr-checkbox-group fr-checkbox-group--sm" itemid="2"><input name="archive" id="checkboxes_271_1" type="checkbox"><label class="fr-label" for="checkboxes_271_1">checkbox2
+    <div class="fr-checkbox-group fr-checkbox-group--sm" itemid="2"><input name="archive" id="test_1" type="checkbox"><label class="fr-label" for="test_1">checkbox2
         <!---->
       </label></div>
   </div>
   <div class="fr-fieldset__element fr-mb-1v">
-    <div class="fr-checkbox-group fr-checkbox-group--sm" itemid="3"><input name="archive" id="checkboxes_271_2" type="checkbox"><label class="fr-label" for="checkboxes_271_2">checkbox3
+    <div class="fr-checkbox-group fr-checkbox-group--sm" itemid="3"><input name="archive" id="test_2" type="checkbox"><label class="fr-label" for="test_2">checkbox3
         <!---->
       </label></div>
   </div>
diff --git a/packages/ui/src/components/_ui/dsfr-input-checkboxes.tsx b/packages/ui/src/components/_ui/dsfr-input-checkboxes.tsx
index 039b96e6b144d42e66c3bf07bce869914201d7ef..f1a4abd39a272e1f693cdb92ab38e2c895527b15 100644
--- a/packages/ui/src/components/_ui/dsfr-input-checkboxes.tsx
+++ b/packages/ui/src/components/_ui/dsfr-input-checkboxes.tsx
@@ -1,21 +1,18 @@
-import { random } from '@/utils/vue-tsx-utils'
 import { DsfrInputCheckbox, Props as InputCheckboxProps } from './dsfr-input-checkbox'
 import { Ref, defineComponent, ref, watch } from 'vue'
 import { isNotNullNorUndefinedNorEmpty } from 'camino-common/src/typescript-tools'
 
 type Props<T extends string> = {
-  id?: string
+  id: string
   legend: { main: string; description?: string }
   disabled?: boolean
-  valueChanged: (values: T[]) => void
+  valueChanged: (values: NoInfer<T>[]) => void
   size?: 'sm' | 'md'
   elements: (Omit<InputCheckboxProps, 'disabled' | 'id' | 'valueChanged' | 'initialValue'> & { itemId: T })[]
-  initialCheckedValue: NoInfer<T[]>
+  initialCheckedValue: NoInfer<T>[]
 }
 
 export const DsfrInputCheckboxes = defineComponent(<T extends string>(props: Props<T>) => {
-  const id = props.id ?? `checkboxes_${(random() * 1000).toFixed()}`
-
   const values = ref<T[]>(props.elements.filter(element => props.initialCheckedValue.includes(element.itemId)).map(({ itemId }) => itemId)) as Ref<T[]>
   watch(
     () => props.elements,
@@ -47,9 +44,9 @@ export const DsfrInputCheckboxes = defineComponent(<T extends string>(props: Pro
   }
 
   return () => (
-    <fieldset class="fr-fieldset" id={id} aria-labelledby={`${id}-legend`} disabled={props.disabled ?? false} style={{ flexDirection: 'column', alignItems: 'flex-start' }}>
+    <fieldset class="fr-fieldset" id={props.id} aria-labelledby={`${props.id}-legend`} disabled={props.disabled ?? false} style={{ flexDirection: 'column', alignItems: 'flex-start' }}>
       {isNotNullNorUndefinedNorEmpty(props.legend.main) ? (
-        <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id={`${id}-legend`}>
+        <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id={`${props.id}-legend`}>
           {props.legend.main}
           {isNotNullNorUndefinedNorEmpty(props.legend.description) ? <span class="fr-hint-text">{props.legend.description}</span> : null}
         </legend>
@@ -57,7 +54,13 @@ export const DsfrInputCheckboxes = defineComponent(<T extends string>(props: Pro
 
       {props.elements.map((element, index) => (
         <div key={index} class={['fr-fieldset__element', props.size === 'sm' ? 'fr-mb-1v' : null]}>
-          <DsfrInputCheckbox {...element} initialValue={props.initialCheckedValue.includes(element.itemId)} size={props.size} id={`${id}_${index}`} valueChanged={updateCheckbox(element.itemId)} />
+          <DsfrInputCheckbox
+            {...element}
+            initialValue={props.initialCheckedValue.includes(element.itemId)}
+            size={props.size}
+            id={`${props.id}_${index}`}
+            valueChanged={updateCheckbox(element.itemId)}
+          />
         </div>
       ))}
     </fieldset>
diff --git a/packages/ui/src/components/_ui/dsfr-input-radio.tsx b/packages/ui/src/components/_ui/dsfr-input-radio.tsx
index 875ec28e7faf6eaf3dfd85e498eb3172b0aa2057..4e63141b0bf9dc4a4a54f1c9b761be904b2d57e7 100644
--- a/packages/ui/src/components/_ui/dsfr-input-radio.tsx
+++ b/packages/ui/src/components/_ui/dsfr-input-radio.tsx
@@ -1,4 +1,4 @@
-import { isEventWithTarget, random } from '@/utils/vue-tsx-utils'
+import { isEventWithTarget } from '@/utils/vue-tsx-utils'
 import { isNotNullNorUndefined, isNotNullNorUndefinedNorEmpty } from 'camino-common/src/typescript-tools'
 import { defineComponent } from 'vue'
 
@@ -9,7 +9,7 @@ export interface RadioElement<T extends string> {
 }
 
 interface Props<T extends string> {
-  id?: string
+  id: string
   legend: { main: string; description?: string }
   disabled?: boolean
   required: boolean
@@ -21,8 +21,6 @@ interface Props<T extends string> {
 }
 
 export const DsfrInputRadio = defineComponent(<T extends string>(props: Props<T>) => {
-  const id = props.id ?? `radio_${(random() * 1000).toFixed()}`
-
   const onChangeRadio = (itemId: T) => (e: Event) => {
     if (isEventWithTarget(e) && Boolean(e.target.value)) {
       props.valueChanged(itemId)
@@ -32,13 +30,13 @@ export const DsfrInputRadio = defineComponent(<T extends string>(props: Props<T>
   return () => (
     <fieldset
       class="fr-fieldset"
-      id={id}
-      aria-labelledby={`${id}-legend`}
+      id={props.id}
+      aria-labelledby={`${props.id}-legend`}
       style={{ flexDirection: props.orientation === 'horizontal' ? 'row' : 'column', alignItems: 'flex-start' }}
       disabled={props.disabled ?? false}
     >
       {isNotNullNorUndefinedNorEmpty(props.legend.main) ? (
-        <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id={`${id}-legend`}>
+        <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id={`${props.id}-legend`}>
           {props.legend.main} {isNotNullNorUndefined(props.required) && props.required ? '' : ' (optionnel)'}
           {isNotNullNorUndefined(props.legend.description) && props.legend.description !== '' ? <span class="fr-hint-text">{props.legend.description}</span> : null}
         </legend>
@@ -47,8 +45,15 @@ export const DsfrInputRadio = defineComponent(<T extends string>(props: Props<T>
       {props.elements.map((element, index) => (
         <div key={element.itemId} class={['fr-fieldset__element', props.orientation === 'horizontal' ? 'fr-fieldset__element--inline' : null, props.size === 'sm' ? 'fr-mb-1v' : null]}>
           <div class={['fr-radio-group', props.size === 'sm' ? 'fr-radio-group--sm' : null]}>
-            <input disabled={element.disabled ?? false} type="radio" id={`${id}-${index}`} checked={props.initialValue === element.itemId} name={id} onChange={onChangeRadio(element.itemId)} />
-            <label class="fr-label" for={`${id}-${index}`}>
+            <input
+              disabled={element.disabled ?? false}
+              type="radio"
+              id={`${props.id}-${index}`}
+              checked={props.initialValue === element.itemId}
+              name={props.id}
+              onChange={onChangeRadio(element.itemId)}
+            />
+            <label class="fr-label" for={`${props.id}-${index}`}>
               {element.legend.main}
               {isNotNullNorUndefined(element.legend.description) && element.legend.description !== '' ? <span class="fr-hint-text">{element.legend.description}</span> : null}
             </label>
diff --git a/packages/ui/src/components/_ui/dsfr-input.tsx b/packages/ui/src/components/_ui/dsfr-input.tsx
index 7e48ec9fc794f5fd4ec7b7b024e3b14eebe3a202..c8bdf62c4f47b19e42e344fb26f2f7e401a52c81 100644
--- a/packages/ui/src/components/_ui/dsfr-input.tsx
+++ b/packages/ui/src/components/_ui/dsfr-input.tsx
@@ -1,5 +1,5 @@
 import { createDebounce } from '@/utils/debounce'
-import { isEventWithTarget, random } from '@/utils/vue-tsx-utils'
+import { isEventWithTarget } from '@/utils/vue-tsx-utils'
 import { CaminoDate, caminoDateValidator } from 'camino-common/src/date'
 import { isNotNullNorUndefined } from 'camino-common/src/typescript-tools'
 import { defineComponent, ref } from 'vue'
@@ -18,7 +18,7 @@ type NumberInputType = {
   max?: number
 }
 type BaseProps = {
-  id?: string
+  id: string
   legend: { main: string; visible?: boolean; description?: string; placeholder?: string; info?: { type: 'info' | 'error'; value: string } }
   disabled?: boolean
   required: boolean
@@ -49,8 +49,6 @@ const isNumberProps = (props: Props): props is BaseProps & NumberProps => props.
 const isDateProps = (props: Props): props is BaseProps & DateProps => props.type.type === 'date'
 
 export const DsfrInput = defineComponent<Props>(props => {
-  const id = props.id ?? `input_${(random() * 1000).toFixed()}`
-
   const debounce = createDebounce()
 
   const value = ref(props.initialValue)
@@ -82,7 +80,7 @@ export const DsfrInput = defineComponent<Props>(props => {
       style={{ marginBottom: 0 }}
     >
       {(props.legend.visible ?? true) ? (
-        <label class="fr-label" for={id}>
+        <label class="fr-label" for={props.id}>
           {props.legend.main}
           {!props.required ? ' (optionnel)' : null}
           {props.type.type === 'date' ? <span class="fr-hint-text">au format jj/mm/aaaa</span> : null}
@@ -94,15 +92,15 @@ export const DsfrInput = defineComponent<Props>(props => {
         placeholder={props.legend.placeholder}
         value={value.value}
         class={['fr-input', isNotNullNorUndefined(props.legend.info) && props.legend.info.type === 'error' ? 'fr-input--error' : null]}
-        name={id}
-        id={id}
+        name={props.id}
+        id={props.id}
         disabled={props.disabled ?? false}
         required={props.required}
         {...(props.type ?? { type: 'text' })}
-        aria-describedby={isNotNullNorUndefined(props.legend.info) && props.legend.info.value !== '' ? `${id}-info` : undefined}
+        aria-describedby={isNotNullNorUndefined(props.legend.info) && props.legend.info.value !== '' ? `${props.id}-info` : undefined}
       />
       {isNotNullNorUndefined(props.legend.info) && props.legend.info.value !== '' ? (
-        <p id={`${id}-info`} class={`fr-${props.legend.info.type}-text`}>
+        <p id={`${props.id}-info`} class={`fr-${props.legend.info.type}-text`}>
           {props.legend.info.value}
         </p>
       ) : null}
diff --git a/packages/ui/src/components/_ui/dsfr-select.tsx b/packages/ui/src/components/_ui/dsfr-select.tsx
index f54a3ba0f7e880684a977c43442dc7d419548222..20a7a73260533a42be2666d4730e2cfae4a36c13 100644
--- a/packages/ui/src/components/_ui/dsfr-select.tsx
+++ b/packages/ui/src/components/_ui/dsfr-select.tsx
@@ -1,10 +1,10 @@
 import { NonEmptyArray, isNotNullNorUndefinedNorEmpty } from 'camino-common/src/typescript-tools'
-import { isEventWithTarget, random } from '../../utils/vue-tsx-utils'
+import { isEventWithTarget } from '../../utils/vue-tsx-utils'
 import { HTMLAttributes } from 'vue'
 import type { JSX } from 'vue/jsx-runtime'
 export type Item<T> = { id: T; label: string; disabled?: boolean }
 type Props<T, Items extends Readonly<NonEmptyArray<Item<T>>>> = {
-  id?: string
+  id: string
   items: Items
   legend: { main: string; visible?: boolean; description?: string; placeholder?: string }
   initialValue: Items[number]['id'] | null
@@ -14,12 +14,10 @@ type Props<T, Items extends Readonly<NonEmptyArray<Item<T>>>> = {
 } & HTMLAttributes
 
 export const DsfrSelect = <T, Items extends Readonly<NonEmptyArray<Item<T>>>>(props: Props<T, Items>): JSX.Element => {
-  const id = props.id ?? `select_${(random() * 1000).toFixed()}`
-
   return (
     <div class={['fr-select-group', (props.disabled ?? false) ? 'fr-select-group--disabled' : null]}>
       {(props.legend.visible ?? true) ? (
-        <label class="fr-label" for={id}>
+        <label class="fr-label" for={props.id}>
           {props.legend.main} {props.required ? '' : ' (optionnel)'}
           {isNotNullNorUndefinedNorEmpty(props.legend.description) ? <span class="fr-hint-text">{props.legend.description}</span> : null}
         </label>
@@ -27,10 +25,10 @@ export const DsfrSelect = <T, Items extends Readonly<NonEmptyArray<Item<T>>>>(pr
 
       <select
         class="fr-select"
-        id={id}
+        id={props.id}
         aria-label={props.legend.main ?? undefined}
         disabled={props.disabled ?? false}
-        name={id}
+        name={props.id}
         value={props.initialValue}
         onChange={event => (isEventWithTarget(event) ? props.valueChanged(event.target.value as Items[number]['id']) : null)}
       >
diff --git a/packages/ui/src/components/_ui/dsfr-textarea.tsx b/packages/ui/src/components/_ui/dsfr-textarea.tsx
index 23ea2ad77002f35f25591e84b746aae6b2a9f9a9..3a96853dc591f76a1563f7177eb931eec15126e3 100644
--- a/packages/ui/src/components/_ui/dsfr-textarea.tsx
+++ b/packages/ui/src/components/_ui/dsfr-textarea.tsx
@@ -1,9 +1,9 @@
-import { isEventWithTarget, random } from '@/utils/vue-tsx-utils'
+import { isEventWithTarget } from '@/utils/vue-tsx-utils'
 import { isNotNullNorUndefinedNorEmpty } from 'camino-common/src/typescript-tools'
 import { defineComponent } from 'vue'
 
 type Props = {
-  id?: string
+  id: string
   legend: { main: string; description?: string }
   valueChanged: (value: string) => void
   initialValue?: string | null
@@ -11,8 +11,6 @@ type Props = {
 }
 
 export const DsfrTextarea = defineComponent<Props>(props => {
-  const id = props.id ?? `textarea_${(random() * 1000).toFixed()}`
-
   const updateFromEvent = (e: Event) => {
     if (isEventWithTarget(e)) {
       props.valueChanged(e.target.value)
@@ -21,11 +19,11 @@ export const DsfrTextarea = defineComponent<Props>(props => {
 
   return () => (
     <div class="fr-input-group">
-      <label class="fr-label" for={id}>
+      <label class="fr-label" for={props.id}>
         {props.legend.main} {!props.required ? (isNotNullNorUndefinedNorEmpty(props.legend.main) ? ' (optionnel)' : 'Champ optionnel') : null}
         {isNotNullNorUndefinedNorEmpty(props.legend.description) ? <span class="fr-hint-text" v-html={props.legend.description}></span> : null}
       </label>
-      <textarea onInput={updateFromEvent} value={props.initialValue ?? undefined} class="fr-input" name={id} id={id} required={props.required} />
+      <textarea onInput={updateFromEvent} value={props.initialValue ?? undefined} class="fr-input" name={props.id} id={props.id} required={props.required} />
     </div>
   )
 })
diff --git a/packages/ui/src/components/_ui/dsfr-toggle.tsx b/packages/ui/src/components/_ui/dsfr-toggle.tsx
index 17d8f00ba0d66f302cc43575639df91ac3390a2b..dcef5f254e5a4d5d92f602630b928add439ff9f7 100644
--- a/packages/ui/src/components/_ui/dsfr-toggle.tsx
+++ b/packages/ui/src/components/_ui/dsfr-toggle.tsx
@@ -1,10 +1,9 @@
-import { random } from '@/utils/vue-tsx-utils'
 import { fr } from '@codegouvfr/react-dsfr'
 import { isNotNullNorUndefined } from 'camino-common/src/typescript-tools'
 import { defineComponent, ref } from 'vue'
 
 type Props = {
-  id?: string
+  id: string
   legendLabel: string
   legendHint?: string
   valueChanged: (value: boolean) => void
@@ -12,8 +11,6 @@ type Props = {
 }
 
 export const DsfrToggle = defineComponent<Props>(props => {
-  const id = props.id ?? `toggle_${(random() * 1000).toFixed()}`
-
   const toggled = ref<boolean>(props.initialValue)
 
   const updateFromEvent = () => {
@@ -21,14 +18,14 @@ export const DsfrToggle = defineComponent<Props>(props => {
     props.valueChanged(toggled.value)
   }
 
-  const hintId = `toggle-${id}-hint-text`
+  const hintId = `toggle-${props.id}-hint-text`
 
   const extraInputProps = isNotNullNorUndefined(props.legendHint) ? { 'aria-describedby': hintId } : {}
 
   return () => (
     <div class={[fr.cx('fr-toggle')]}>
-      <input type="checkbox" class={[fr.cx('fr-toggle__input')]} checked={toggled.value} {...extraInputProps} id={id} onClick={updateFromEvent} />
-      <label class={[fr.cx('fr-toggle__label')]} for={id} data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">
+      <input type="checkbox" class={[fr.cx('fr-toggle__input')]} checked={toggled.value} {...extraInputProps} id={props.id} onClick={updateFromEvent} />
+      <label class={[fr.cx('fr-toggle__label')]} for={props.id} data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé">
         <span class=" fr-ml-4w">{props.legendLabel}</span>
       </label>
       {isNotNullNorUndefined(props.legendHint) ? (
diff --git a/packages/ui/src/components/_ui/functional-loader.stories_snapshots_All.html b/packages/ui/src/components/_ui/functional-loader.stories_snapshots_All.html
index 167aa0d917f617400c6a043276861e9c9db52c13..3ff1a74d5125dd630850c71be591fa14b22ee586 100644
--- a/packages/ui/src/components/_ui/functional-loader.stories_snapshots_All.html
+++ b/packages/ui/src/components/_ui/functional-loader.stories_snapshots_All.html
@@ -1,9 +1,9 @@
 <div>
-  <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+  <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
     <!---->
     <!---->
     <div class="_spinner_3306d0"></div>
-  </div>La valeur de l’item est : chargé<div class=" undefined" style="display: flex; justify-content: center;">
+  </div>La valeur de l’item est : chargé<div class="" style="display: flex; justify-content: center;">
     <div class="fr-alert fr-alert--error fr-alert--sm">
       <p>Erreur</p>
     </div>
diff --git a/packages/ui/src/components/_ui/functional-loader.tsx b/packages/ui/src/components/_ui/functional-loader.tsx
index 0908aa567ac192f8feee1fddff6574ee2c26200d..73a6a2c55c0ce60027322f9dedc1b8b7c47c8f7d 100644
--- a/packages/ui/src/components/_ui/functional-loader.tsx
+++ b/packages/ui/src/components/_ui/functional-loader.tsx
@@ -14,7 +14,7 @@ export const LoadingElement = <T,>(props: Props<T>): JSX.Element => {
       {props.data.status === 'LOADED' ? (
         props.renderItem(props.data.value)
       ) : (
-        <div class={`${props.data.status === 'LOADING' ? styles['top-level'] : ''} ${props.class}`} style={'display: flex; justify-content: center'}>
+        <div class={[props.data.status === 'LOADING' ? styles['top-level'] : '', props.class ?? '']} style={'display: flex; justify-content: center'}>
           {props.data.status === 'ERROR' ? <Alert small={true} title={props.data.message} type="error" /> : null}
           {props.data.status === 'NEW_ERROR' ? <CaminoApiAlert caminoApiError={props.data.error} /> : null}
           {props.data.status === 'LOADING' ? <div class={styles.spinner}></div> : null}
diff --git a/packages/ui/src/components/_ui/storybook.spec.ts b/packages/ui/src/components/_ui/storybook.spec.ts
index ec2dadcc57da1552472126d118637c7a8e029997..0a87bf435a2ed056c9bf6cde1ba0a03e373bbc20 100644
--- a/packages/ui/src/components/_ui/storybook.spec.ts
+++ b/packages/ui/src/components/_ui/storybook.spec.ts
@@ -3,7 +3,6 @@ import type { Meta, StoryFn } from '@storybook/vue3'
 import { render } from '@testing-library/vue'
 import { composeStories } from '@storybook/vue3'
 import { h } from 'vue'
-import { setSeed } from '@/utils/vue-tsx-utils'
 import { sleep } from 'camino-common/src/typescript-tools'
 
 type StoryFile = {
@@ -44,7 +43,6 @@ describe('UI Storybook Tests', async () => {
         .map(([name, story]) => ({ name, story }))
         .filter(env => (name ?? '').includes('NoStoryshots') || !(env.name ?? '').includes('NoSnapshot'))
     )('$name', async value => {
-      setSeed(12)
       let html: string | undefined = undefined
       try {
         // @ts-ignore
diff --git a/packages/ui/src/components/_ui/table-pagination.stories_snapshots_Loading.html b/packages/ui/src/components/_ui/table-pagination.stories_snapshots_Loading.html
index e74c3605cc33302c2a01b215154148349e4dfdad..d62d702fe203d3264f106996c27c8b4d879463d7 100644
--- a/packages/ui/src/components/_ui/table-pagination.stories_snapshots_Loading.html
+++ b/packages/ui/src/components/_ui/table-pagination.stories_snapshots_Loading.html
@@ -93,7 +93,7 @@
       </div>
     </div>
   </div>
-  <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+  <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
     <!---->
     <!---->
     <div class="_spinner_3306d0"></div>
diff --git a/packages/ui/src/components/_ui/table-pagination.stories_snapshots_WithError.html b/packages/ui/src/components/_ui/table-pagination.stories_snapshots_WithError.html
index 251c0c7e69d129d69d43d0298d8555cf992ff565..810d1ab725b858f882034c5d000466593eada7eb 100644
--- a/packages/ui/src/components/_ui/table-pagination.stories_snapshots_WithError.html
+++ b/packages/ui/src/components/_ui/table-pagination.stories_snapshots_WithError.html
@@ -93,7 +93,7 @@
       </div>
     </div>
   </div>
-  <div class=" undefined" style="display: flex; justify-content: center;">
+  <div class="" style="display: flex; justify-content: center;">
     <div class="fr-alert fr-alert--error fr-alert--sm">
       <p>Une erreur</p>
     </div>
diff --git a/packages/ui/src/components/_ui/tabs.stories.tsx b/packages/ui/src/components/_ui/tabs.stories.tsx
index 05a2e15ccea3fa43068c19ac1986b03e92cf960c..0980f5643852c6b0c306f3292acec7c98886a3e4 100644
--- a/packages/ui/src/components/_ui/tabs.stories.tsx
+++ b/packages/ui/src/components/_ui/tabs.stories.tsx
@@ -26,6 +26,6 @@ const tabs = [
     icon: 'fr-icon-earth-fill',
   },
 ] as const satisfies Readonly<NonEmptyArray<Tab<string>>>
-export const Simple: StoryFn = () => <Tabs initTab={tabs[0].id} tabs={tabs} tabsTitle="Titre d’accessibilité des onglets" tabClicked={update} />
-export const SecondTabInit: StoryFn = () => <Tabs initTab={tabs[1].id} tabs={tabs} tabsTitle="Titre d’accessibilité des onglets" tabClicked={update} />
-export const WithoutIcon: StoryFn = () => <Tabs initTab={tabs[0].id} tabs={[{ ...tabs[0], icon: null }, tabs[1]]} tabsTitle="Titre d’accessibilité des onglets" tabClicked={update} />
+export const Simple: StoryFn = () => <Tabs id="test" initTab={tabs[0].id} tabs={tabs} tabsTitle="Titre d’accessibilité des onglets" tabClicked={update} />
+export const SecondTabInit: StoryFn = () => <Tabs id="test" initTab={tabs[1].id} tabs={tabs} tabsTitle="Titre d’accessibilité des onglets" tabClicked={update} />
+export const WithoutIcon: StoryFn = () => <Tabs id="test" initTab={tabs[0].id} tabs={[{ ...tabs[0], icon: null }, tabs[1]]} tabsTitle="Titre d’accessibilité des onglets" tabClicked={update} />
diff --git a/packages/ui/src/components/_ui/tabs.stories_snapshots_SecondTabInit.html b/packages/ui/src/components/_ui/tabs.stories_snapshots_SecondTabInit.html
index 801f46884db086633dfc9bea739dcbd059046b40..b1450b86763c2e92541a6064aa2c1ddb6052e06e 100644
--- a/packages/ui/src/components/_ui/tabs.stories_snapshots_SecondTabInit.html
+++ b/packages/ui/src/components/_ui/tabs.stories_snapshots_SecondTabInit.html
@@ -1,13 +1,13 @@
 <div>
   <div class="fr-tabs" style="--tabs-height: 0px;">
     <ul class="fr-tabs__list" role="tablist" aria-label="Titre d’accessibilité des onglets">
-      <li role="presentation"><button id="tabpanel-tabId1-271" class="fr-tabs__tab fr-icon-tiktok-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="titreTab 1" aria-selected="false" aria-controls="tabpanel-tabId1-271-panel">titreTab 1</button></li>
-      <li role="presentation"><button id="tabpanel-tabId2-271" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="titreTab 2" aria-selected="true" aria-controls="tabpanel-tabId2-271-panel">titreTab 2</button></li>
+      <li role="presentation"><button id="tabpanel-tabId1-test" class="fr-tabs__tab fr-icon-tiktok-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="titreTab 1" aria-selected="false" aria-controls="tabpanel-tabId1-test-panel">titreTab 1</button></li>
+      <li role="presentation"><button id="tabpanel-tabId2-test" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="titreTab 2" aria-selected="true" aria-controls="tabpanel-tabId2-test-panel">titreTab 2</button></li>
     </ul>
-    <div id="tabpanel-tabId1-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-tabId1-271" tabindex="0">
+    <div id="tabpanel-tabId1-test-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-tabId1-test" tabindex="0">
       <!---->
     </div>
-    <div id="tabpanel-tabId2-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-tabId2-271" tabindex="0">
+    <div id="tabpanel-tabId2-test-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-tabId2-test" tabindex="0">
       <h2>Content of tab 2</h2>
     </div>
   </div>
diff --git a/packages/ui/src/components/_ui/tabs.stories_snapshots_Simple.html b/packages/ui/src/components/_ui/tabs.stories_snapshots_Simple.html
index 28f6298ff46595e01ab073e70c5cbf41a22c8eec..a3488eaf170a11148d5d494e28869a499307139e 100644
--- a/packages/ui/src/components/_ui/tabs.stories_snapshots_Simple.html
+++ b/packages/ui/src/components/_ui/tabs.stories_snapshots_Simple.html
@@ -1,13 +1,13 @@
 <div>
   <div class="fr-tabs" style="--tabs-height: 0px;">
     <ul class="fr-tabs__list" role="tablist" aria-label="Titre d’accessibilité des onglets">
-      <li role="presentation"><button id="tabpanel-tabId1-271" class="fr-tabs__tab fr-icon-tiktok-fill fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="titreTab 1" aria-selected="true" aria-controls="tabpanel-tabId1-271-panel">titreTab 1</button></li>
-      <li role="presentation"><button id="tabpanel-tabId2-271" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="titreTab 2" aria-selected="false" aria-controls="tabpanel-tabId2-271-panel">titreTab 2</button></li>
+      <li role="presentation"><button id="tabpanel-tabId1-test" class="fr-tabs__tab fr-icon-tiktok-fill fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="titreTab 1" aria-selected="true" aria-controls="tabpanel-tabId1-test-panel">titreTab 1</button></li>
+      <li role="presentation"><button id="tabpanel-tabId2-test" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="titreTab 2" aria-selected="false" aria-controls="tabpanel-tabId2-test-panel">titreTab 2</button></li>
     </ul>
-    <div id="tabpanel-tabId1-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-tabId1-271" tabindex="0">
+    <div id="tabpanel-tabId1-test-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-tabId1-test" tabindex="0">
       <h1>Content of tab 1</h1>
     </div>
-    <div id="tabpanel-tabId2-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-end" role="tabpanel" aria-labelledby="tabpanel-tabId2-271" tabindex="0">
+    <div id="tabpanel-tabId2-test-panel" class="fr-tabs__panel fr-tabs__panel--direction-end" role="tabpanel" aria-labelledby="tabpanel-tabId2-test" tabindex="0">
       <!---->
     </div>
   </div>
diff --git a/packages/ui/src/components/_ui/tabs.stories_snapshots_WithoutIcon.html b/packages/ui/src/components/_ui/tabs.stories_snapshots_WithoutIcon.html
index f40c5d133c53c4bb44ec067011e6ba785086441e..0c362f0a0a6afb4f294f9657f9b0f5bf49d9e22e 100644
--- a/packages/ui/src/components/_ui/tabs.stories_snapshots_WithoutIcon.html
+++ b/packages/ui/src/components/_ui/tabs.stories_snapshots_WithoutIcon.html
@@ -1,13 +1,13 @@
 <div>
   <div class="fr-tabs" style="--tabs-height: 0px;">
     <ul class="fr-tabs__list" role="tablist" aria-label="Titre d’accessibilité des onglets">
-      <li role="presentation"><button id="tabpanel-tabId1-271" class="fr-tabs__tab" tabindex="0" role="tab" aria-label="titreTab 1" aria-selected="true" aria-controls="tabpanel-tabId1-271-panel">titreTab 1</button></li>
-      <li role="presentation"><button id="tabpanel-tabId2-271" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="titreTab 2" aria-selected="false" aria-controls="tabpanel-tabId2-271-panel">titreTab 2</button></li>
+      <li role="presentation"><button id="tabpanel-tabId1-test" class="fr-tabs__tab" tabindex="0" role="tab" aria-label="titreTab 1" aria-selected="true" aria-controls="tabpanel-tabId1-test-panel">titreTab 1</button></li>
+      <li role="presentation"><button id="tabpanel-tabId2-test" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="titreTab 2" aria-selected="false" aria-controls="tabpanel-tabId2-test-panel">titreTab 2</button></li>
     </ul>
-    <div id="tabpanel-tabId1-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-tabId1-271" tabindex="0">
+    <div id="tabpanel-tabId1-test-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-tabId1-test" tabindex="0">
       <h1>Content of tab 1</h1>
     </div>
-    <div id="tabpanel-tabId2-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-end" role="tabpanel" aria-labelledby="tabpanel-tabId2-271" tabindex="0">
+    <div id="tabpanel-tabId2-test-panel" class="fr-tabs__panel fr-tabs__panel--direction-end" role="tabpanel" aria-labelledby="tabpanel-tabId2-test" tabindex="0">
       <!---->
     </div>
   </div>
diff --git a/packages/ui/src/components/_ui/tabs.tsx b/packages/ui/src/components/_ui/tabs.tsx
index 7e89936c12a7685d485e3b4d7ecf11f18f3714ce..0b4a049e766299da303e057ff5c7848e7ddd46d2 100644
--- a/packages/ui/src/components/_ui/tabs.tsx
+++ b/packages/ui/src/components/_ui/tabs.tsx
@@ -3,11 +3,11 @@ import { Ref, computed, defineComponent, onBeforeUnmount, onMounted, ref } from
 import { FrIconClassName } from '@codegouvfr/react-dsfr'
 
 import { NonEmptyArray, isNotNullNorUndefined } from 'camino-common/src/typescript-tools'
-import { random } from '../../utils/vue-tsx-utils'
 import type { JSX } from 'vue/jsx-runtime'
 export type Tab<TabId extends string> = { icon: FrIconClassName | null; title: string; id: TabId; renderContent: () => JSX.Element }
 
 type Props<TabId extends string> = {
+  id: string
   tabsTitle: string
   tabs: Readonly<NonEmptyArray<Tab<TabId>>>
   initTab: TabId
@@ -18,9 +18,8 @@ export const Tabs = defineComponent(<TabId extends string>(props: Props<TabId>)
   const currentTabId = ref<TabId>(props.initTab) as Ref<TabId>
   const tabsListRef = ref<HTMLElement>()
 
-  const idSuffix = `${(random() * 1000).toFixed()}`
-  const getHtmlTabId = (tabId: TabId) => `tabpanel-${tabId}-${idSuffix}-panel`
-  const getButtonTabId = (tabId: TabId) => `tabpanel-${tabId}-${idSuffix}`
+  const getHtmlTabId = (tabId: TabId) => `tabpanel-${tabId}-${props.id}-panel`
+  const getButtonTabId = (tabId: TabId) => `tabpanel-${tabId}-${props.id}`
 
   const panelHeight = ref<number>(0)
 
@@ -88,7 +87,7 @@ export const Tabs = defineComponent(<TabId extends string>(props: Props<TabId>)
                 onKeydown={changeTabOnArrowKey}
                 aria-label={tab.title}
                 aria-selected={currentTabId.value === tab.id ? 'true' : 'false'}
-                aria-controls={`tabpanel-${tab.id}-${idSuffix}-panel`}
+                aria-controls={`tabpanel-${tab.id}-${props.id}-panel`}
               >
                 {tab.title}
               </button>
@@ -106,7 +105,7 @@ export const Tabs = defineComponent(<TabId extends string>(props: Props<TabId>)
             }}
             role="tabpanel"
             key={tab.id}
-            aria-labelledby={`tabpanel-${tab.id}-${idSuffix}`}
+            aria-labelledby={`tabpanel-${tab.id}-${props.id}`}
             tabindex="0"
           >
             {currentTabId.value === tab.id ? tab.renderContent() : null}
@@ -118,4 +117,4 @@ export const Tabs = defineComponent(<TabId extends string>(props: Props<TabId>)
 })
 
 // @ts-ignore waiting for https://github.com/vuejs/core/issues/7833
-Tabs.props = ['tabsTitle', 'tabs', 'initTab', 'tabClicked']
+Tabs.props = ['id', 'tabsTitle', 'tabs', 'initTab', 'tabClicked']
diff --git a/packages/ui/src/components/_ui/typeahead-multiple.tsx b/packages/ui/src/components/_ui/typeahead-multiple.tsx
index b883b3d9ef8ad4222e617669d082fdeedf7eda6d..f461a32ca39a76ecd9afc2c40e1f195e28656e99 100644
--- a/packages/ui/src/components/_ui/typeahead-multiple.tsx
+++ b/packages/ui/src/components/_ui/typeahead-multiple.tsx
@@ -1,6 +1,6 @@
 import { computed, Ref, ref, watch, defineComponent } from 'vue'
 import styles from './typeahead.module.css'
-import { isEventWithTarget, random, useState } from '@/utils/vue-tsx-utils'
+import { isEventWithTarget, useState } from '@/utils/vue-tsx-utils'
 import { isNotNullNorUndefined, isNotNullNorUndefinedNorEmpty } from 'camino-common/src/typescript-tools'
 import { DsfrTag } from './tag'
 import type { JSX } from 'vue/jsx-runtime'
@@ -24,8 +24,7 @@ type Props<T extends TypeAheadRecord, K extends keyof T> = {
 }
 
 export const TypeAheadMultiple = defineComponent(<T extends TypeAheadRecord, K extends keyof T>(props: Props<T, K>) => {
-  const id = props.props.id ?? `typeahead_${(random() * 1000).toFixed()}`
-  const wrapperId = computed(() => `${id}_wrapper`)
+  const wrapperId = computed(() => `${props.props.id}_wrapper`)
   const getItems = (items: (Pick<T, K> & Partial<Omit<T, K>>)[]): T[] => items.map(o => props.props.items.find(i => i[props.props.itemKey] === o[props.props.itemKey])).filter(isNotNullNorUndefined)
   const selectedItems = ref<T[]>(getItems(props.overrideItems ?? [])) as Ref<T[]>
 
@@ -118,7 +117,7 @@ export const TypeAheadMultiple = defineComponent(<T extends TypeAheadRecord, K e
     input.value = ''
 
     currentSelectionIndex.value = 0
-    document.getElementById(id)?.focus()
+    document.getElementById(props.props.id)?.focus()
 
     selectedItems.value.push(item)
 
@@ -154,11 +153,11 @@ export const TypeAheadMultiple = defineComponent(<T extends TypeAheadRecord, K e
         })}
 
         <input
-          id={id}
+          id={props.props.id}
           ref={myTypeaheadInput}
           value={input.value}
           type="text"
-          name={id}
+          name={props.props.id}
           style={{ outline: 'none' }}
           placeholder={props.props.placeholder}
           autocomplete="off"
@@ -166,8 +165,8 @@ export const TypeAheadMultiple = defineComponent(<T extends TypeAheadRecord, K e
           onFocus={onFocus}
           onBlur={onBlur}
           role="combobox"
-          aria-controls={`${id}-control`}
-          aria-activedescendant={isListVisible.value ? `${id}-control-${currentSelectionIndex.value}` : `${id}-control`}
+          aria-controls={`${props.props.id}-control`}
+          aria-activedescendant={isListVisible.value ? `${props.props.id}-control-${currentSelectionIndex.value}` : `${props.props.id}-control`}
           aria-expanded={isListVisible.value}
           aria-autocomplete="list"
           onKeydown={payload => {
@@ -199,7 +198,7 @@ export const TypeAheadMultiple = defineComponent(<T extends TypeAheadRecord, K e
           }}
         />
       </div>
-      <ul class={`${styles['typeahead-list']} ${isListVisible.value ? styles['typeahead-list--visible'] : ''}`} tabindex="-1" id={`${id}-control`} role="listbox">
+      <ul class={`${styles['typeahead-list']} ${isListVisible.value ? styles['typeahead-list--visible'] : ''}`} tabindex="-1" id={`${props.props.id}-control`} role="listbox">
         {notSelectedItems.value.map((item, index) => {
           return (
             <li
@@ -209,7 +208,7 @@ export const TypeAheadMultiple = defineComponent(<T extends TypeAheadRecord, K e
               onClick={() => selectItem(item)}
               onMouseenter={() => (currentSelectionIndex.value = index)}
               aria-selected={isListVisible.value && currentSelectionIndex.value === index}
-              id={`${id}-control-${index}`}
+              id={`${props.props.id}-control-${index}`}
             >
               {props.props.displayItemInList ? props.props.displayItemInList(item) : <span>{props.props.itemChipLabel(item)}</span>}
             </li>
diff --git a/packages/ui/src/components/activite-edition.stories_snapshots_FullDeposable.html b/packages/ui/src/components/activite-edition.stories_snapshots_FullDeposable.html
index b40aec25d4f76c99d7c9e99bec52d31f2ecf5504..9388694c0bd5819beffb8cfd7ddfcfa278c7e3b2 100644
--- a/packages/ui/src/components/activite-edition.stories_snapshots_FullDeposable.html
+++ b/packages/ui/src/components/activite-edition.stories_snapshots_FullDeposable.html
@@ -16,30 +16,30 @@
         <!---->
         <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)
+            <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="orBrut">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" value="0">
+              </label><input class="fr-input" name="orBrut" id="orBrut" required="" type="number" min="0" value="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)
+            <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="mercure">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" value="120">
+              </label><input class="fr-input" name="mercure" id="mercure" required="" type="number" min="0" value="120">
               <!---->
             </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)
+            <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="carburantDetaxe">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" value="8000">
+              </label><input class="fr-input" name="carburantDetaxe" id="carburantDetaxe" required="" type="number" min="0" value="8000">
               <!---->
             </div>
           </div>
diff --git a/packages/ui/src/components/activite-edition.stories_snapshots_FullEmpty.html b/packages/ui/src/components/activite-edition.stories_snapshots_FullEmpty.html
index 770a5530b28451fb78f144376e98345d3a8c5b6c..d8743dca1f18c4395ca9654a3d3e4adef1472403 100644
--- a/packages/ui/src/components/activite-edition.stories_snapshots_FullEmpty.html
+++ b/packages/ui/src/components/activite-edition.stories_snapshots_FullEmpty.html
@@ -16,40 +16,40 @@
         <!---->
         <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)
+            <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="orBrut">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">
+              </label><input class="fr-input" name="orBrut" id="orBrut" 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)
+            <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="mercure">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">
+              </label><input class="fr-input" name="mercure" id="mercure" 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)
+            <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="carburantDetaxe">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">
+              </label><input class="fr-input" name="carburantDetaxe" id="carburantDetaxe" 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)
+            <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="carburantConventionnel">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">
+              </label><input class="fr-input" name="carburantConventionnel" id="carburantConventionnel" required="" type="number" min="0">
               <!---->
             </div>
           </div>
@@ -73,30 +73,30 @@
         </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
+            <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="pelles">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" value="4">
+              </label><input class="fr-input" name="pelles" id="pelles" required="" type="number" min="0" value="4">
               <!---->
             </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
+            <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="effectifs">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">
+              </label><input class="fr-input" name="effectifs" id="effectifs" 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="environnement">Dépenses relatives à la protection de l’environnement (euros)
                 <!---->
                 <!----><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" required="" type="number" min="0">
+              </label><input class="fr-input" name="environnement" id="environnement" required="" type="number" min="0">
               <!---->
             </div>
           </div>
@@ -106,32 +106,32 @@
         <legend class="fr-fieldset__legend" id="travaux-legend">Statut des travaux</legend>
         <div class="fr-fieldset__element">
           <div>
-            <fieldset class="fr-fieldset" id="checkboxes_772" aria-labelledby="checkboxes_772-legend" style="flex-direction: column; align-items: flex-start;">
-              <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes_772-legend">Avril
+            <fieldset class="fr-fieldset" id="4" aria-labelledby="4-legend" style="flex-direction: column; align-items: flex-start;">
+              <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="4-legend">Avril
                 <!---->
               </legend>
               <div class="fr-fieldset__element">
-                <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="checkboxes_772_0" type="checkbox"><label class="fr-label" for="checkboxes_772_0">Non débutés
+                <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="4_0" type="checkbox"><label class="fr-label" for="4_0">Non débutés
                     <!---->
                   </label></div>
               </div>
               <div class="fr-fieldset__element">
-                <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="checkboxes_772_1" type="checkbox"><label class="fr-label" for="checkboxes_772_1">Exploitation en cours
+                <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="4_1" type="checkbox"><label class="fr-label" for="4_1">Exploitation en cours
                     <!---->
                   </label></div>
               </div>
               <div class="fr-fieldset__element">
-                <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="checkboxes_772_2" type="checkbox"><label class="fr-label" for="checkboxes_772_2">Arrêt temporaire
+                <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="4_2" type="checkbox"><label class="fr-label" for="4_2">Arrêt temporaire
                     <!---->
                   </label></div>
               </div>
               <div class="fr-fieldset__element">
-                <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="checkboxes_772_3" type="checkbox"><label class="fr-label" for="checkboxes_772_3">Réhabilitation
+                <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="4_3" type="checkbox"><label class="fr-label" for="4_3">Réhabilitation
                     <!---->
                   </label></div>
               </div>
               <div class="fr-fieldset__element">
-                <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="checkboxes_772_4" type="checkbox"><label class="fr-label" for="checkboxes_772_4">Arrêt définitif (après réhabilitation)
+                <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="4_4" type="checkbox"><label class="fr-label" for="4_4">Arrêt définitif (après réhabilitation)
                     <!---->
                   </label></div>
               </div>
@@ -140,32 +140,32 @@
         </div>
         <div class="fr-fieldset__element">
           <div>
-            <fieldset class="fr-fieldset" id="checkboxes_453" aria-labelledby="checkboxes_453-legend" style="flex-direction: column; align-items: flex-start;">
-              <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes_453-legend">Mai
+            <fieldset class="fr-fieldset" id="5" aria-labelledby="5-legend" style="flex-direction: column; align-items: flex-start;">
+              <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="5-legend">Mai
                 <!---->
               </legend>
               <div class="fr-fieldset__element">
-                <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="checkboxes_453_0" type="checkbox"><label class="fr-label" for="checkboxes_453_0">Non débutés
+                <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="5_0" type="checkbox"><label class="fr-label" for="5_0">Non débutés
                     <!---->
                   </label></div>
               </div>
               <div class="fr-fieldset__element">
-                <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="checkboxes_453_1" type="checkbox"><label class="fr-label" for="checkboxes_453_1">Exploitation en cours
+                <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="5_1" type="checkbox"><label class="fr-label" for="5_1">Exploitation en cours
                     <!---->
                   </label></div>
               </div>
               <div class="fr-fieldset__element">
-                <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="checkboxes_453_2" type="checkbox"><label class="fr-label" for="checkboxes_453_2">Arrêt temporaire
+                <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="5_2" type="checkbox"><label class="fr-label" for="5_2">Arrêt temporaire
                     <!---->
                   </label></div>
               </div>
               <div class="fr-fieldset__element">
-                <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="checkboxes_453_3" type="checkbox"><label class="fr-label" for="checkboxes_453_3">Réhabilitation
+                <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="5_3" type="checkbox"><label class="fr-label" for="5_3">Réhabilitation
                     <!---->
                   </label></div>
               </div>
               <div class="fr-fieldset__element">
-                <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="checkboxes_453_4" type="checkbox"><label class="fr-label" for="checkboxes_453_4">Arrêt définitif (après réhabilitation)
+                <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="5_4" type="checkbox"><label class="fr-label" for="5_4">Arrêt définitif (après réhabilitation)
                     <!---->
                   </label></div>
               </div>
@@ -174,32 +174,32 @@
         </div>
         <div class="fr-fieldset__element">
           <div>
-            <fieldset class="fr-fieldset" id="checkboxes_556" aria-labelledby="checkboxes_556-legend" style="flex-direction: column; align-items: flex-start;">
-              <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes_556-legend">Juin
+            <fieldset class="fr-fieldset" id="6" aria-labelledby="6-legend" style="flex-direction: column; align-items: flex-start;">
+              <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="6-legend">Juin
                 <!---->
               </legend>
               <div class="fr-fieldset__element">
-                <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="checkboxes_556_0" type="checkbox"><label class="fr-label" for="checkboxes_556_0">Non débutés
+                <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="6_0" type="checkbox"><label class="fr-label" for="6_0">Non débutés
                     <!---->
                   </label></div>
               </div>
               <div class="fr-fieldset__element">
-                <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="checkboxes_556_1" type="checkbox"><label class="fr-label" for="checkboxes_556_1">Exploitation en cours
+                <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="6_1" type="checkbox"><label class="fr-label" for="6_1">Exploitation en cours
                     <!---->
                   </label></div>
               </div>
               <div class="fr-fieldset__element">
-                <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="checkboxes_556_2" type="checkbox"><label class="fr-label" for="checkboxes_556_2">Arrêt temporaire
+                <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="6_2" type="checkbox"><label class="fr-label" for="6_2">Arrêt temporaire
                     <!---->
                   </label></div>
               </div>
               <div class="fr-fieldset__element">
-                <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="checkboxes_556_3" type="checkbox"><label class="fr-label" for="checkboxes_556_3">Réhabilitation
+                <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="6_3" type="checkbox"><label class="fr-label" for="6_3">Réhabilitation
                     <!---->
                   </label></div>
               </div>
               <div class="fr-fieldset__element">
-                <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="checkboxes_556_4" type="checkbox"><label class="fr-label" for="checkboxes_556_4">Arrêt définitif (après réhabilitation)
+                <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="6_4" type="checkbox"><label class="fr-label" for="6_4">Arrêt définitif (après réhabilitation)
                     <!---->
                   </label></div>
               </div>
@@ -211,7 +211,7 @@
         <legend class="fr-fieldset__legend" id="complement-legend">Informations complémentaires</legend>
         <div class="fr-fieldset__element">
           <div>
-            <div class="fr-input-group"><label class="fr-label" for="textarea_487"> Champ optionnel<span class="fr-hint-text">Toute information sur les événements marquants du trimestre (accident, incident, arrêt ou suspension d’activité en précisant les raisons, évolution de l’exploitation, difficultés rencontrées, etc.).</span></label><textarea class="fr-input" name="textarea_487" id="textarea_487"></textarea></div>
+            <div class="fr-input-group"><label class="fr-label" for="texte"> Champ optionnel<span class="fr-hint-text">Toute information sur les événements marquants du trimestre (accident, incident, arrêt ou suspension d’activité en précisant les raisons, évolution de l’exploitation, difficultés rencontrées, etc.).</span></label><textarea class="fr-input" name="texte" id="texte"></textarea></div>
           </div>
         </div>
       </fieldset>
diff --git a/packages/ui/src/components/activite-edition.stories_snapshots_FullEmptyWithMandatoryDocument.html b/packages/ui/src/components/activite-edition.stories_snapshots_FullEmptyWithMandatoryDocument.html
index 9a5b86d062ede127cfbf6d5c46e92315df967139..24a878c4473542a92902d844b0f371c3905cf9d7 100644
--- a/packages/ui/src/components/activite-edition.stories_snapshots_FullEmptyWithMandatoryDocument.html
+++ b/packages/ui/src/components/activite-edition.stories_snapshots_FullEmptyWithMandatoryDocument.html
@@ -19,40 +19,40 @@
         <!---->
         <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)
+            <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="orBrut">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">
+              </label><input class="fr-input" name="orBrut" id="orBrut" 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)
+            <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="mercure">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">
+              </label><input class="fr-input" name="mercure" id="mercure" 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)
+            <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="carburantDetaxe">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">
+              </label><input class="fr-input" name="carburantDetaxe" id="carburantDetaxe" 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)
+            <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="carburantConventionnel">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">
+              </label><input class="fr-input" name="carburantConventionnel" id="carburantConventionnel" required="" type="number" min="0">
               <!---->
             </div>
           </div>
@@ -76,30 +76,30 @@
         </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
+            <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="pelles">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" value="4">
+              </label><input class="fr-input" name="pelles" id="pelles" required="" type="number" min="0" value="4">
               <!---->
             </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
+            <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="effectifs">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">
+              </label><input class="fr-input" name="effectifs" id="effectifs" 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="environnement">Dépenses relatives à la protection de l’environnement (euros)
                 <!---->
                 <!----><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" required="" type="number" min="0">
+              </label><input class="fr-input" name="environnement" id="environnement" required="" type="number" min="0">
               <!---->
             </div>
           </div>
@@ -109,32 +109,32 @@
         <legend class="fr-fieldset__legend" id="travaux-legend">Statut des travaux</legend>
         <div class="fr-fieldset__element">
           <div>
-            <fieldset class="fr-fieldset" id="checkboxes_772" aria-labelledby="checkboxes_772-legend" style="flex-direction: column; align-items: flex-start;">
-              <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes_772-legend">Avril
+            <fieldset class="fr-fieldset" id="4" aria-labelledby="4-legend" style="flex-direction: column; align-items: flex-start;">
+              <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="4-legend">Avril
                 <!---->
               </legend>
               <div class="fr-fieldset__element">
-                <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="checkboxes_772_0" type="checkbox"><label class="fr-label" for="checkboxes_772_0">Non débutés
+                <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="4_0" type="checkbox"><label class="fr-label" for="4_0">Non débutés
                     <!---->
                   </label></div>
               </div>
               <div class="fr-fieldset__element">
-                <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="checkboxes_772_1" type="checkbox"><label class="fr-label" for="checkboxes_772_1">Exploitation en cours
+                <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="4_1" type="checkbox"><label class="fr-label" for="4_1">Exploitation en cours
                     <!---->
                   </label></div>
               </div>
               <div class="fr-fieldset__element">
-                <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="checkboxes_772_2" type="checkbox"><label class="fr-label" for="checkboxes_772_2">Arrêt temporaire
+                <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="4_2" type="checkbox"><label class="fr-label" for="4_2">Arrêt temporaire
                     <!---->
                   </label></div>
               </div>
               <div class="fr-fieldset__element">
-                <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="checkboxes_772_3" type="checkbox"><label class="fr-label" for="checkboxes_772_3">Réhabilitation
+                <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="4_3" type="checkbox"><label class="fr-label" for="4_3">Réhabilitation
                     <!---->
                   </label></div>
               </div>
               <div class="fr-fieldset__element">
-                <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="checkboxes_772_4" type="checkbox"><label class="fr-label" for="checkboxes_772_4">Arrêt définitif (après réhabilitation)
+                <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="4_4" type="checkbox"><label class="fr-label" for="4_4">Arrêt définitif (après réhabilitation)
                     <!---->
                   </label></div>
               </div>
@@ -143,32 +143,32 @@
         </div>
         <div class="fr-fieldset__element">
           <div>
-            <fieldset class="fr-fieldset" id="checkboxes_453" aria-labelledby="checkboxes_453-legend" style="flex-direction: column; align-items: flex-start;">
-              <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes_453-legend">Mai
+            <fieldset class="fr-fieldset" id="5" aria-labelledby="5-legend" style="flex-direction: column; align-items: flex-start;">
+              <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="5-legend">Mai
                 <!---->
               </legend>
               <div class="fr-fieldset__element">
-                <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="checkboxes_453_0" type="checkbox"><label class="fr-label" for="checkboxes_453_0">Non débutés
+                <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="5_0" type="checkbox"><label class="fr-label" for="5_0">Non débutés
                     <!---->
                   </label></div>
               </div>
               <div class="fr-fieldset__element">
-                <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="checkboxes_453_1" type="checkbox"><label class="fr-label" for="checkboxes_453_1">Exploitation en cours
+                <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="5_1" type="checkbox"><label class="fr-label" for="5_1">Exploitation en cours
                     <!---->
                   </label></div>
               </div>
               <div class="fr-fieldset__element">
-                <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="checkboxes_453_2" type="checkbox"><label class="fr-label" for="checkboxes_453_2">Arrêt temporaire
+                <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="5_2" type="checkbox"><label class="fr-label" for="5_2">Arrêt temporaire
                     <!---->
                   </label></div>
               </div>
               <div class="fr-fieldset__element">
-                <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="checkboxes_453_3" type="checkbox"><label class="fr-label" for="checkboxes_453_3">Réhabilitation
+                <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="5_3" type="checkbox"><label class="fr-label" for="5_3">Réhabilitation
                     <!---->
                   </label></div>
               </div>
               <div class="fr-fieldset__element">
-                <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="checkboxes_453_4" type="checkbox"><label class="fr-label" for="checkboxes_453_4">Arrêt définitif (après réhabilitation)
+                <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="5_4" type="checkbox"><label class="fr-label" for="5_4">Arrêt définitif (après réhabilitation)
                     <!---->
                   </label></div>
               </div>
@@ -177,32 +177,32 @@
         </div>
         <div class="fr-fieldset__element">
           <div>
-            <fieldset class="fr-fieldset" id="checkboxes_556" aria-labelledby="checkboxes_556-legend" style="flex-direction: column; align-items: flex-start;">
-              <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="checkboxes_556-legend">Juin
+            <fieldset class="fr-fieldset" id="6" aria-labelledby="6-legend" style="flex-direction: column; align-items: flex-start;">
+              <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="6-legend">Juin
                 <!---->
               </legend>
               <div class="fr-fieldset__element">
-                <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="checkboxes_556_0" type="checkbox"><label class="fr-label" for="checkboxes_556_0">Non débutés
+                <div class="fr-checkbox-group" itemid="nonDebutes"><input name="archive" id="6_0" type="checkbox"><label class="fr-label" for="6_0">Non débutés
                     <!---->
                   </label></div>
               </div>
               <div class="fr-fieldset__element">
-                <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="checkboxes_556_1" type="checkbox"><label class="fr-label" for="checkboxes_556_1">Exploitation en cours
+                <div class="fr-checkbox-group" itemid="exploitationEnCours"><input name="archive" id="6_1" type="checkbox"><label class="fr-label" for="6_1">Exploitation en cours
                     <!---->
                   </label></div>
               </div>
               <div class="fr-fieldset__element">
-                <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="checkboxes_556_2" type="checkbox"><label class="fr-label" for="checkboxes_556_2">Arrêt temporaire
+                <div class="fr-checkbox-group" itemid="arretTemporaire"><input name="archive" id="6_2" type="checkbox"><label class="fr-label" for="6_2">Arrêt temporaire
                     <!---->
                   </label></div>
               </div>
               <div class="fr-fieldset__element">
-                <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="checkboxes_556_3" type="checkbox"><label class="fr-label" for="checkboxes_556_3">Réhabilitation
+                <div class="fr-checkbox-group" itemid="rehabilitation"><input name="archive" id="6_3" type="checkbox"><label class="fr-label" for="6_3">Réhabilitation
                     <!---->
                   </label></div>
               </div>
               <div class="fr-fieldset__element">
-                <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="checkboxes_556_4" type="checkbox"><label class="fr-label" for="checkboxes_556_4">Arrêt définitif (après réhabilitation)
+                <div class="fr-checkbox-group" itemid="arretDefinitif"><input name="archive" id="6_4" type="checkbox"><label class="fr-label" for="6_4">Arrêt définitif (après réhabilitation)
                     <!---->
                   </label></div>
               </div>
@@ -214,7 +214,7 @@
         <legend class="fr-fieldset__legend" id="complement-legend">Informations complémentaires</legend>
         <div class="fr-fieldset__element">
           <div>
-            <div class="fr-input-group"><label class="fr-label" for="textarea_487"> Champ optionnel<span class="fr-hint-text">Toute information sur les événements marquants du trimestre (accident, incident, arrêt ou suspension d’activité en précisant les raisons, évolution de l’exploitation, difficultés rencontrées, etc.).</span></label><textarea class="fr-input" name="textarea_487" id="textarea_487"></textarea></div>
+            <div class="fr-input-group"><label class="fr-label" for="texte"> Champ optionnel<span class="fr-hint-text">Toute information sur les événements marquants du trimestre (accident, incident, arrêt ou suspension d’activité en précisant les raisons, évolution de l’exploitation, difficultés rencontrées, etc.).</span></label><textarea class="fr-input" name="texte" id="texte"></textarea></div>
           </div>
         </div>
       </fieldset>
diff --git a/packages/ui/src/components/activite-edition.stories_snapshots_Loading.html b/packages/ui/src/components/activite-edition.stories_snapshots_Loading.html
index 74d09a0f251855cd7685d5aa3bb7a7ed6a291893..042bfd18a9b0f235eef85b08bffc828a7ab842ba 100644
--- a/packages/ui/src/components/activite-edition.stories_snapshots_Loading.html
+++ b/packages/ui/src/components/activite-edition.stories_snapshots_Loading.html
@@ -1,6 +1,6 @@
 <div>
   <h1>Activité</h1>
-  <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+  <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
     <!---->
     <!---->
     <div class="_spinner_3306d0"></div>
diff --git a/packages/ui/src/components/activite-edition.stories_snapshots_WithError.html b/packages/ui/src/components/activite-edition.stories_snapshots_WithError.html
index 04031ca0149b9ea54aab922f30f0361f2d269793..9ece25297a7545dfc5bf5c59bb7119c6ddb4e05d 100644
--- a/packages/ui/src/components/activite-edition.stories_snapshots_WithError.html
+++ b/packages/ui/src/components/activite-edition.stories_snapshots_WithError.html
@@ -1,6 +1,6 @@
 <div>
   <h1>Activité</h1>
-  <div class=" undefined" style="display: flex; justify-content: center;">
+  <div class="" style="display: flex; justify-content: center;">
     <div class="fr-alert fr-alert--error fr-alert--sm">
       <p>Une erreur est survenue</p>
     </div>
diff --git a/packages/ui/src/components/activite.stories_snapshots_Loading.html b/packages/ui/src/components/activite.stories_snapshots_Loading.html
index a3ef9f153e3d85e7cee9bee07fa7e245eba4da0b..c5f6bb573b32886f6379bf1c5b391015fac5acbe 100644
--- a/packages/ui/src/components/activite.stories_snapshots_Loading.html
+++ b/packages/ui/src/components/activite.stories_snapshots_Loading.html
@@ -1,4 +1,4 @@
-<div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+<div class="_top-level_3306d0" style="display: flex; justify-content: center;">
   <!---->
   <!---->
   <div class="_spinner_3306d0"></div>
diff --git a/packages/ui/src/components/activite.stories_snapshots_WithError.html b/packages/ui/src/components/activite.stories_snapshots_WithError.html
index 1581df2f5625237870f316caea15a3943a794bbe..5cd6a49518801e7d551131667e88a40de522a282 100644
--- a/packages/ui/src/components/activite.stories_snapshots_WithError.html
+++ b/packages/ui/src/components/activite.stories_snapshots_WithError.html
@@ -1,4 +1,4 @@
-<div class=" undefined" style="display: flex; justify-content: center;">
+<div class="" style="display: flex; justify-content: center;">
   <div class="fr-alert fr-alert--error fr-alert--sm">
     <p>Une erreur est survenue</p>
   </div>
diff --git a/packages/ui/src/components/activite/add-activite-document-popup.stories_snapshots_DocumentObligatoire.html b/packages/ui/src/components/activite/add-activite-document-popup.stories_snapshots_DocumentObligatoire.html
index 04aeb0befe7e0a9db755b7e1a60069778d875ade..33dc8142ae27d8a1c67cf6b12dc2e40f462ff528 100644
--- a/packages/ui/src/components/activite/add-activite-document-popup.stories_snapshots_DocumentObligatoire.html
+++ b/packages/ui/src/components/activite/add-activite-document-popup.stories_snapshots_DocumentObligatoire.html
@@ -17,10 +17,10 @@
                         </label><input class="fr-upload" type="file" id="file-upload" name="file-upload" accept=".pdf"></div>
                     </div>
                     <div class="fr-fieldset__element">
-                      <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Description (optionnel)
+                      <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="activite_description">Description (optionnel)
                           <!---->
                           <!---->
-                        </label><input class="fr-input" name="input_271" id="input_271" type="text" value="">
+                        </label><input class="fr-input" name="activite_description" id="activite_description" type="text" value="">
                         <!---->
                       </div>
                     </div>
diff --git a/packages/ui/src/components/activite/add-activite-document-popup.stories_snapshots_DocumentOptionnel.html b/packages/ui/src/components/activite/add-activite-document-popup.stories_snapshots_DocumentOptionnel.html
index 099fe5f0bb1cdca7c90d683a5fb1fbc8a346308e..aab1f03865f2b35fd344b849604256e7abc257ed 100644
--- a/packages/ui/src/components/activite/add-activite-document-popup.stories_snapshots_DocumentOptionnel.html
+++ b/packages/ui/src/components/activite/add-activite-document-popup.stories_snapshots_DocumentOptionnel.html
@@ -17,10 +17,10 @@
                         </label><input class="fr-upload" type="file" id="file-upload" name="file-upload" accept=".pdf"></div>
                     </div>
                     <div class="fr-fieldset__element">
-                      <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Description (optionnel)
+                      <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="activite_description">Description (optionnel)
                           <!---->
                           <!---->
-                        </label><input class="fr-input" name="input_271" id="input_271" type="text" value="">
+                        </label><input class="fr-input" name="activite_description" id="activite_description" type="text" value="">
                         <!---->
                       </div>
                     </div>
diff --git a/packages/ui/src/components/activite/add-activite-document-popup.tsx b/packages/ui/src/components/activite/add-activite-document-popup.tsx
index e213d3cc7727c744a2906adbdbf6998ee0b3bdb9..e339fec3f39842c01e04f58320cfe4ab05b4e8cb 100644
--- a/packages/ui/src/components/activite/add-activite-document-popup.tsx
+++ b/packages/ui/src/components/activite/add-activite-document-popup.tsx
@@ -38,7 +38,7 @@ export const AddActiviteDocumentPopup = defineComponent<Props>(props => {
           />
         </div>
         <div class="fr-fieldset__element">
-          <DsfrInput required={false} legend={{ main: 'Description' }} initialValue={documentDescription.value} type={{ type: 'text' }} valueChanged={descriptionChange} />
+          <DsfrInput id="activite_description" required={false} legend={{ main: 'Description' }} initialValue={documentDescription.value} type={{ type: 'text' }} valueChanged={descriptionChange} />
         </div>
       </fieldset>
     </form>
diff --git a/packages/ui/src/components/administration.stories_snapshots_Default.html b/packages/ui/src/components/administration.stories_snapshots_Default.html
index baaf8cb09114e1f08c1676cab7c1ffc6461d21d2..76ab9a46a696c285e58af1b1a7be8c6d68412d63 100644
--- a/packages/ui/src/components/administration.stories_snapshots_Default.html
+++ b/packages/ui/src/components/administration.stories_snapshots_Default.html
@@ -79,9 +79,9 @@ CS 76003
                   <tbody>
                     <tr>
                       <td>
-                        <div class="fr-select-group"><label class="fr-label" for="select_271">Activité (optionnel)
+                        <div class="fr-select-group"><label class="fr-label" for="activites_type">Activité (optionnel)
                             <!---->
-                          </label><select class="fr-select" id="select_271" aria-label="Activité" name="select_271">
+                          </label><select class="fr-select" id="activites_type" aria-label="Activité" name="activites_type">
                             <option value="gra">Rapport d'exploitation (permis et concessions M) (GRA)</option>
                             <option value="grp">Rapport trimestriel d'exploitation d'or en Guyane (GRP)</option>
                             <option value="grx">Rapport d'exploitation (autorisations M) (GRX)</option>
@@ -94,10 +94,10 @@ CS 76003
                           </select></div>
                       </td>
                       <td>
-                        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Email (optionnel)
+                        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="activites_email">Email (optionnel)
                             <!---->
                             <!---->
-                          </label><input class="fr-input" name="input_670" id="input_670" type="email">
+                          </label><input class="fr-input" name="activites_email" id="activites_email" type="email">
                           <!---->
                         </div>
                       </td>
diff --git a/packages/ui/src/components/administration/activites-types-emails.stories_snapshots_EmailLectureAndModificationSurAdministrationVisible.html b/packages/ui/src/components/administration/activites-types-emails.stories_snapshots_EmailLectureAndModificationSurAdministrationVisible.html
index 9711c70842c7b7c7c3dd10d6c82baaaf6e2ee5a6..91233f7fc0608ba89cee82e845297f2463963351 100644
--- a/packages/ui/src/components/administration/activites-types-emails.stories_snapshots_EmailLectureAndModificationSurAdministrationVisible.html
+++ b/packages/ui/src/components/administration/activites-types-emails.stories_snapshots_EmailLectureAndModificationSurAdministrationVisible.html
@@ -26,9 +26,9 @@
                 <tbody>
                   <tr>
                     <td>
-                      <div class="fr-select-group"><label class="fr-label" for="select_271">Activité (optionnel)
+                      <div class="fr-select-group"><label class="fr-label" for="activites_type">Activité (optionnel)
                           <!---->
-                        </label><select class="fr-select" id="select_271" aria-label="Activité" name="select_271">
+                        </label><select class="fr-select" id="activites_type" aria-label="Activité" name="activites_type">
                           <option value="gra">Rapport d'exploitation (permis et concessions M) (GRA)</option>
                           <option value="grp">Rapport trimestriel d'exploitation d'or en Guyane (GRP)</option>
                           <option value="grx">Rapport d'exploitation (autorisations M) (GRX)</option>
@@ -41,10 +41,10 @@
                         </select></div>
                     </td>
                     <td>
-                      <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Email (optionnel)
+                      <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="activites_email">Email (optionnel)
                           <!---->
                           <!---->
-                        </label><input class="fr-input" name="input_670" id="input_670" type="email">
+                        </label><input class="fr-input" name="activites_email" id="activites_email" type="email">
                         <!---->
                       </div>
                     </td>
diff --git a/packages/ui/src/components/administration/activites-types-emails.stories_snapshots_EmailLectureAndModificationVisible.html b/packages/ui/src/components/administration/activites-types-emails.stories_snapshots_EmailLectureAndModificationVisible.html
index 657fb58993d096a625ab9b16b4b08c2edf1af5f9..327ff8d6e90053ca80986e2b1b65d497376e9225 100644
--- a/packages/ui/src/components/administration/activites-types-emails.stories_snapshots_EmailLectureAndModificationVisible.html
+++ b/packages/ui/src/components/administration/activites-types-emails.stories_snapshots_EmailLectureAndModificationVisible.html
@@ -24,9 +24,9 @@
                 <tbody>
                   <tr>
                     <td>
-                      <div class="fr-select-group"><label class="fr-label" for="select_271">Activité (optionnel)
+                      <div class="fr-select-group"><label class="fr-label" for="activites_type">Activité (optionnel)
                           <!---->
-                        </label><select class="fr-select" id="select_271" aria-label="Activité" name="select_271">
+                        </label><select class="fr-select" id="activites_type" aria-label="Activité" name="activites_type">
                           <option value="gra">Rapport d'exploitation (permis et concessions M) (GRA)</option>
                           <option value="grp">Rapport trimestriel d'exploitation d'or en Guyane (GRP)</option>
                           <option value="grx">Rapport d'exploitation (autorisations M) (GRX)</option>
@@ -39,10 +39,10 @@
                         </select></div>
                     </td>
                     <td>
-                      <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Email (optionnel)
+                      <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="activites_email">Email (optionnel)
                           <!---->
                           <!---->
-                        </label><input class="fr-input" name="input_670" id="input_670" type="email">
+                        </label><input class="fr-input" name="activites_email" id="activites_email" type="email">
                         <!---->
                       </div>
                     </td>
diff --git a/packages/ui/src/components/administration/activites-types-emails.tsx b/packages/ui/src/components/administration/activites-types-emails.tsx
index 0732fc56fe9f2d57121707b67b1db4304919c5e3..2457a936edca8d01f8b6a9bb926f0a9a4ec50e54 100644
--- a/packages/ui/src/components/administration/activites-types-emails.tsx
+++ b/packages/ui/src/components/administration/activites-types-emails.tsx
@@ -99,12 +99,23 @@ export const ActivitesTypesEmails = defineComponent<Props>(props => {
         columns: {
           type: {
             type: 'jsx',
-            jsxElement: <DsfrSelect required={false} legend={{ main: 'Activité' }} items={activitesTypes} valueChanged={updateActiviteTypeId} initialValue={activiteType.value.activiteTypeId} />,
+            jsxElement: (
+              <DsfrSelect
+                id="activites_type"
+                required={false}
+                legend={{ main: 'Activité' }}
+                items={activitesTypes}
+                valueChanged={updateActiviteTypeId}
+                initialValue={activiteType.value.activiteTypeId}
+              />
+            ),
             value: 'type',
           },
           email: {
             type: 'jsx',
-            jsxElement: <DsfrInput required={false} type={{ type: 'email' }} legend={{ main: 'Email' }} valueChanged={updateActiviteTypeEmail} initialValue={activiteType.value.email} />,
+            jsxElement: (
+              <DsfrInput id="activites_email" required={false} type={{ type: 'email' }} legend={{ main: 'Email' }} valueChanged={updateActiviteTypeEmail} initialValue={activiteType.value.email} />
+            ),
             value: 'email',
           },
           action: {
diff --git a/packages/ui/src/components/dashboard/dgtm-stats-full.stories_snapshots_Loading.html b/packages/ui/src/components/dashboard/dgtm-stats-full.stories_snapshots_Loading.html
index d12606e0cc73ef51bba609aa7bccbe310b6c1404..5a378ef8e626a4048b9d932f169611cdbab4642b 100644
--- a/packages/ui/src/components/dashboard/dgtm-stats-full.stories_snapshots_Loading.html
+++ b/packages/ui/src/components/dashboard/dgtm-stats-full.stories_snapshots_Loading.html
@@ -1,31 +1,31 @@
 <div class="fr-py-3w">
   <div style="display: grid; grid-template-columns: 1fr 1fr 1fr;">
-    <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+    <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
       <!---->
       <!---->
       <div class="_spinner_3306d0"></div>
     </div>
-    <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+    <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
       <!---->
       <!---->
       <div class="_spinner_3306d0"></div>
     </div>
-    <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+    <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
       <!---->
       <!---->
       <div class="_spinner_3306d0"></div>
     </div>
-    <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+    <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
       <!---->
       <!---->
       <div class="_spinner_3306d0"></div>
     </div>
-    <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+    <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
       <!---->
       <!---->
       <div class="_spinner_3306d0"></div>
     </div>
-    <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+    <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
       <!---->
       <!---->
       <div class="_spinner_3306d0"></div>
diff --git a/packages/ui/src/components/dashboard/dgtm-stats-full.stories_snapshots_WithError.html b/packages/ui/src/components/dashboard/dgtm-stats-full.stories_snapshots_WithError.html
index 2001e296d12c980c09e91960d2a85f48564158f6..5da058c8021b07e9cd1195e6312d3bf37374d2ac 100644
--- a/packages/ui/src/components/dashboard/dgtm-stats-full.stories_snapshots_WithError.html
+++ b/packages/ui/src/components/dashboard/dgtm-stats-full.stories_snapshots_WithError.html
@@ -1,41 +1,41 @@
 <div class="fr-py-3w">
   <div style="display: grid; grid-template-columns: 1fr 1fr 1fr;">
-    <div class=" undefined" style="display: flex; justify-content: center;">
+    <div class="" style="display: flex; justify-content: center;">
       <div class="fr-alert fr-alert--error fr-alert--sm">
         <p>Because reasons</p>
       </div>
       <!---->
       <!---->
     </div>
-    <div class=" undefined" style="display: flex; justify-content: center;">
+    <div class="" style="display: flex; justify-content: center;">
       <div class="fr-alert fr-alert--error fr-alert--sm">
         <p>Because reasons</p>
       </div>
       <!---->
       <!---->
     </div>
-    <div class=" undefined" style="display: flex; justify-content: center;">
+    <div class="" style="display: flex; justify-content: center;">
       <div class="fr-alert fr-alert--error fr-alert--sm">
         <p>Because reasons</p>
       </div>
       <!---->
       <!---->
     </div>
-    <div class=" undefined" style="display: flex; justify-content: center;">
+    <div class="" style="display: flex; justify-content: center;">
       <div class="fr-alert fr-alert--error fr-alert--sm">
         <p>Because reasons</p>
       </div>
       <!---->
       <!---->
     </div>
-    <div class=" undefined" style="display: flex; justify-content: center;">
+    <div class="" style="display: flex; justify-content: center;">
       <div class="fr-alert fr-alert--error fr-alert--sm">
         <p>Because reasons</p>
       </div>
       <!---->
       <!---->
     </div>
-    <div class=" undefined" style="display: flex; justify-content: center;">
+    <div class="" style="display: flex; justify-content: center;">
       <div class="fr-alert fr-alert--error fr-alert--sm">
         <p>Because reasons</p>
       </div>
diff --git a/packages/ui/src/components/dashboard/pure-administration-dashboard.stories_snapshots_Loading.html b/packages/ui/src/components/dashboard/pure-administration-dashboard.stories_snapshots_Loading.html
index 019746bddf116e8c7bfad97c17dc0a9cd561ce61..ebbc5731ea76da38b844a5ca423425836974eb3e 100644
--- a/packages/ui/src/components/dashboard/pure-administration-dashboard.stories_snapshots_Loading.html
+++ b/packages/ui/src/components/dashboard/pure-administration-dashboard.stories_snapshots_Loading.html
@@ -9,12 +9,12 @@
     </div>
   </div>
   <!---->
-  <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+  <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
     <!---->
     <!---->
     <div class="_spinner_3306d0"></div>
   </div>
-  <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+  <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
     <!---->
     <!---->
     <div class="_spinner_3306d0"></div>
diff --git a/packages/ui/src/components/dashboard/pure-administration-dashboard.stories_snapshots_WithError.html b/packages/ui/src/components/dashboard/pure-administration-dashboard.stories_snapshots_WithError.html
index 10ddd490c7925931bcc76f7360f16773136cbc88..357d576a65286f9983bbbfc6016c831eff51dcb3 100644
--- a/packages/ui/src/components/dashboard/pure-administration-dashboard.stories_snapshots_WithError.html
+++ b/packages/ui/src/components/dashboard/pure-administration-dashboard.stories_snapshots_WithError.html
@@ -9,14 +9,14 @@
     </div>
   </div>
   <!---->
-  <div class=" undefined" style="display: flex; justify-content: center;">
+  <div class="" style="display: flex; justify-content: center;">
     <div class="fr-alert fr-alert--error fr-alert--sm">
       <p>Because reasons</p>
     </div>
     <!---->
     <!---->
   </div>
-  <div class=" undefined" style="display: flex; justify-content: center;">
+  <div class="" style="display: flex; justify-content: center;">
     <div class="fr-alert fr-alert--error fr-alert--sm">
       <p>Because reasons</p>
     </div>
diff --git a/packages/ui/src/components/dashboard/pure-dgtm-stats.stories_snapshots_Loading.html b/packages/ui/src/components/dashboard/pure-dgtm-stats.stories_snapshots_Loading.html
index 1e62cf3488441f50c37a047e0b908230aa362b2d..fb25a60150ddfe07ecfeab831b63c5c2c81fa7d1 100644
--- a/packages/ui/src/components/dashboard/pure-dgtm-stats.stories_snapshots_Loading.html
+++ b/packages/ui/src/components/dashboard/pure-dgtm-stats.stories_snapshots_Loading.html
@@ -1,15 +1,15 @@
 <div style="display: grid; grid-template-columns: 1fr 1fr 1fr;">
-  <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+  <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
     <!---->
     <!---->
     <div class="_spinner_3306d0"></div>
   </div>
-  <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+  <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
     <!---->
     <!---->
     <div class="_spinner_3306d0"></div>
   </div>
-  <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+  <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
     <!---->
     <!---->
     <div class="_spinner_3306d0"></div>
diff --git a/packages/ui/src/components/dashboard/pure-dgtm-stats.stories_snapshots_WithError.html b/packages/ui/src/components/dashboard/pure-dgtm-stats.stories_snapshots_WithError.html
index c3a2b6c7fc19e4aa894d2d5adb378754124a94cf..6d0ea1791e27e6ec66ace3c7f7d5e6def4330c83 100644
--- a/packages/ui/src/components/dashboard/pure-dgtm-stats.stories_snapshots_WithError.html
+++ b/packages/ui/src/components/dashboard/pure-dgtm-stats.stories_snapshots_WithError.html
@@ -1,19 +1,19 @@
 <div style="display: grid; grid-template-columns: 1fr 1fr 1fr;">
-  <div class=" undefined" style="display: flex; justify-content: center;">
+  <div class="" style="display: flex; justify-content: center;">
     <div class="fr-alert fr-alert--error fr-alert--sm">
       <p>Because reasons</p>
     </div>
     <!---->
     <!---->
   </div>
-  <div class=" undefined" style="display: flex; justify-content: center;">
+  <div class="" style="display: flex; justify-content: center;">
     <div class="fr-alert fr-alert--error fr-alert--sm">
       <p>Because reasons</p>
     </div>
     <!---->
     <!---->
   </div>
-  <div class=" undefined" style="display: flex; justify-content: center;">
+  <div class="" style="display: flex; justify-content: center;">
     <div class="fr-alert fr-alert--error fr-alert--sm">
       <p>Because reasons</p>
     </div>
diff --git a/packages/ui/src/components/dashboard/pure-entreprise-dashboard.stories_snapshots_Loading.html b/packages/ui/src/components/dashboard/pure-entreprise-dashboard.stories_snapshots_Loading.html
index 4172cea50b4f3948c7f2f5a3668265fbf43065c4..89ff866c52e7e8dd32cff7c2242f4612a65f822a 100644
--- a/packages/ui/src/components/dashboard/pure-entreprise-dashboard.stories_snapshots_Loading.html
+++ b/packages/ui/src/components/dashboard/pure-entreprise-dashboard.stories_snapshots_Loading.html
@@ -8,7 +8,7 @@
       <div class="fr-ml-1w"><a href="/mocked-href" title="Demander un titre" class="fr-btn fr-btn--primary fr-btn--icon-right fr-icon-add-line" aria-label="Demander un titre">Demander un titre</a></div>
     </div>
   </div>
-  <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+  <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
     <!---->
     <!---->
     <div class="_spinner_3306d0"></div>
diff --git a/packages/ui/src/components/dashboard/pure-entreprise-dashboard.stories_snapshots_Ok.html b/packages/ui/src/components/dashboard/pure-entreprise-dashboard.stories_snapshots_Ok.html
index 6a04baf575c8ae66322e9bc254ee846e41113467..8771e5b30cc746fceb9dbeffe539bce18d7cb99a 100644
--- a/packages/ui/src/components/dashboard/pure-entreprise-dashboard.stories_snapshots_Ok.html
+++ b/packages/ui/src/components/dashboard/pure-entreprise-dashboard.stories_snapshots_Ok.html
@@ -57,8 +57,8 @@
     </div>
   </div>
   <section class="fr-accordion">
-    <div class="fr-accordion__title"><button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-271">Autres titres</button></div>
-    <div class="fr-collapse" id="accordion-271">
+    <div class="fr-accordion__title"><button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion_autres_titres">Autres titres</button></div>
+    <div class="fr-collapse" id="accordion_autres_titres">
       <div>
         <div class="fr-table fr-table--no-caption fr-table--no-scroll" style="overflow: auto;">
           <div class="fr-table__wrapper" style="width: auto;">
diff --git a/packages/ui/src/components/dashboard/pure-entreprise-dashboard.stories_snapshots_OkWithMultipleEntreprises.html b/packages/ui/src/components/dashboard/pure-entreprise-dashboard.stories_snapshots_OkWithMultipleEntreprises.html
index 276c510fb829006165eeb790cfbbf799734978a6..c846f7e806410075ba2c9a3499cd78eba86da2f4 100644
--- a/packages/ui/src/components/dashboard/pure-entreprise-dashboard.stories_snapshots_OkWithMultipleEntreprises.html
+++ b/packages/ui/src/components/dashboard/pure-entreprise-dashboard.stories_snapshots_OkWithMultipleEntreprises.html
@@ -59,8 +59,8 @@
     </div>
   </div>
   <section class="fr-accordion">
-    <div class="fr-accordion__title"><button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-271">Autres titres</button></div>
-    <div class="fr-collapse" id="accordion-271">
+    <div class="fr-accordion__title"><button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion_autres_titres">Autres titres</button></div>
+    <div class="fr-collapse" id="accordion_autres_titres">
       <div>
         <div class="fr-table fr-table--no-caption fr-table--no-scroll" style="overflow: auto;">
           <div class="fr-table__wrapper" style="width: auto;">
diff --git a/packages/ui/src/components/dashboard/pure-entreprise-dashboard.stories_snapshots_OkWithoutActivities.html b/packages/ui/src/components/dashboard/pure-entreprise-dashboard.stories_snapshots_OkWithoutActivities.html
index fdbceb488dd7a482b2fb41692d2cb25f81ceb71f..cb710b484702b20ae20f80f94e5be37c96d2383c 100644
--- a/packages/ui/src/components/dashboard/pure-entreprise-dashboard.stories_snapshots_OkWithoutActivities.html
+++ b/packages/ui/src/components/dashboard/pure-entreprise-dashboard.stories_snapshots_OkWithoutActivities.html
@@ -53,8 +53,8 @@
     </div>
   </div>
   <section class="fr-accordion">
-    <div class="fr-accordion__title"><button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion-271">Autres titres</button></div>
-    <div class="fr-collapse" id="accordion-271">
+    <div class="fr-accordion__title"><button class="fr-accordion__btn" aria-expanded="false" aria-controls="accordion_autres_titres">Autres titres</button></div>
+    <div class="fr-collapse" id="accordion_autres_titres">
       <div>
         <div class="fr-table fr-table--no-caption fr-table--no-scroll" style="overflow: auto;">
           <div class="fr-table__wrapper" style="width: auto;">
diff --git a/packages/ui/src/components/dashboard/pure-entreprise-dashboard.stories_snapshots_WithError.html b/packages/ui/src/components/dashboard/pure-entreprise-dashboard.stories_snapshots_WithError.html
index a777c6238a6ec61b9ff6d4d3d69e9e85b5a5fe13..27352d0f1dbce33ce6bf5f16a75b68646cbea875 100644
--- a/packages/ui/src/components/dashboard/pure-entreprise-dashboard.stories_snapshots_WithError.html
+++ b/packages/ui/src/components/dashboard/pure-entreprise-dashboard.stories_snapshots_WithError.html
@@ -8,7 +8,7 @@
       <div class="fr-ml-1w"><a href="/mocked-href" title="Demander un titre" class="fr-btn fr-btn--primary fr-btn--icon-right fr-icon-add-line" aria-label="Demander un titre">Demander un titre</a></div>
     </div>
   </div>
-  <div class=" undefined" style="display: flex; justify-content: center;">
+  <div class="" style="display: flex; justify-content: center;">
     <div class="fr-alert fr-alert--error fr-alert--sm">
       <p>Because reasons</p>
     </div>
diff --git a/packages/ui/src/components/dashboard/pure-entreprise-dashboard.stories_snapshots_WithoutTitresValides.html b/packages/ui/src/components/dashboard/pure-entreprise-dashboard.stories_snapshots_WithoutTitresValides.html
index d15586323012fec8f04314209590f21e8c662d48..1fa01fea4c8c9545b30315eb8bf2925d5ec9537d 100644
--- a/packages/ui/src/components/dashboard/pure-entreprise-dashboard.stories_snapshots_WithoutTitresValides.html
+++ b/packages/ui/src/components/dashboard/pure-entreprise-dashboard.stories_snapshots_WithoutTitresValides.html
@@ -13,8 +13,8 @@
   <!---->
   <!---->
   <section class="fr-accordion">
-    <div class="fr-accordion__title"><button class="fr-accordion__btn" aria-expanded="true" aria-controls="accordion-271">Autres titres</button></div>
-    <div class="fr-collapse" id="accordion-271">
+    <div class="fr-accordion__title"><button class="fr-accordion__btn" aria-expanded="true" aria-controls="accordion_autres_titres">Autres titres</button></div>
+    <div class="fr-collapse" id="accordion_autres_titres">
       <div>
         <div class="fr-table fr-table--no-caption fr-table--no-scroll" style="overflow: auto;">
           <div class="fr-table__wrapper" style="width: auto;">
diff --git a/packages/ui/src/components/dashboard/pure-entreprise-dashboard.tsx b/packages/ui/src/components/dashboard/pure-entreprise-dashboard.tsx
index 2dcfd03d8ae36154b6c1be377f8b08b4c72f84fa..85e42ca4013d0c09914adc34bf95cbb2b65fc5a4 100644
--- a/packages/ui/src/components/dashboard/pure-entreprise-dashboard.tsx
+++ b/packages/ui/src/components/dashboard/pure-entreprise-dashboard.tsx
@@ -169,6 +169,7 @@ export const PureEntrepriseDashboard = defineComponent<Props>(props => {
               ) : null}
               {autresTitres(titres).length > 0 ? (
                 <DsfrAccordion
+                  id="accordion_autres_titres"
                   expandedByDefault={titresValidesEtEnCours(titres).length === 0}
                   title="Autres titres"
                   content={<TableSimple caption={{ value: 'Autres titres', visible: false }} columns={columns} rows={entrepriseTitres(autresTitres(titres))} />}
diff --git a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_AxmDeposableAvecDaeEtAsl.html b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_AxmDeposableAvecDaeEtAsl.html
index 26d7b309223bb7024cd0618e9475c2af42a38532..133516db7a4c5eb106b8dd9fd33bfb0a2dfd266b 100644
--- a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_AxmDeposableAvecDaeEtAsl.html
+++ b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_AxmDeposableAvecDaeEtAsl.html
@@ -49,85 +49,85 @@
   <div class="fr-pt-2w">
     <div class="fr-tabs" style="--tabs-height: 0px;">
       <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-        <li role="presentation"><button id="tabpanel-carte-271" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-271-panel">Carte</button></li>
-        <li role="presentation"><button id="tabpanel-points-271" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-271-panel">Tableau</button></li>
+        <li role="presentation"><button id="tabpanel-carte-etapeId" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-etapeId-panel">Carte</button></li>
+        <li role="presentation"><button id="tabpanel-points-etapeId" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-etapeId-panel">Tableau</button></li>
       </ul>
-      <div id="tabpanel-carte-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-271" tabindex="0">
+      <div id="tabpanel-carte-etapeId-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-etapeId" tabindex="0">
         <!---->
       </div>
-      <div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
+      <div id="tabpanel-points-etapeId-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-etapeId" tabindex="0">
         <div style="display: flex; flex-direction: column;">
-          <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_670">Système géographique</label>
-            <div id="typeahead_geosysteme_670_wrapper" class="_typeahead_8eddf1">
-              <div class="flex"><input id="typeahead_geosysteme_670" type="text" title="" name="typeahead_geosysteme_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_670-control" aria-activedescendant="typeahead_geosysteme_670-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
-              <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_670-control" role="listbox">
-                <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_670-control-0">
+          <div class="fr-select-group"><label class="fr-label" for="4326">Système géographique</label>
+            <div id="4326_wrapper" class="_typeahead_8eddf1">
+              <div class="flex"><input id="4326" type="text" title="" name="4326" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="4326-control" aria-activedescendant="4326-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+              <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="4326-control" role="listbox">
+                <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="4326-control-0">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-1">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-1">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-2">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-2">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-3">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-3">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-4">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-4">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-5">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-5">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-6">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-6">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-7">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-7">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-8">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-8">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-9">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-9">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-10">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-10">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-11">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-11">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-12">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-12">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-13">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-13">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-14">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-14">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-15">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-15">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-16">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-16">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-17">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-17">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-18">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-18">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-19">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-19">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-20">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-20">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-21">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-21">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-22">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-22">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                 </li>
               </ul>
diff --git a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeArmMecaniseDeposable.html b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeArmMecaniseDeposable.html
index eafe23fb087cea057ef617e5cb737536e16adf33..ae4934c5479b85d09101dbfed39ccb339d707d79 100644
--- a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeArmMecaniseDeposable.html
+++ b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeArmMecaniseDeposable.html
@@ -73,85 +73,85 @@
   <div class="fr-pt-2w">
     <div class="fr-tabs" style="--tabs-height: 0px;">
       <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-        <li role="presentation"><button id="tabpanel-carte-271" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-271-panel">Carte</button></li>
-        <li role="presentation"><button id="tabpanel-points-271" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-271-panel">Tableau</button></li>
+        <li role="presentation"><button id="tabpanel-carte-etapeId" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-etapeId-panel">Carte</button></li>
+        <li role="presentation"><button id="tabpanel-points-etapeId" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-etapeId-panel">Tableau</button></li>
       </ul>
-      <div id="tabpanel-carte-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-271" tabindex="0">
+      <div id="tabpanel-carte-etapeId-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-etapeId" tabindex="0">
         <!---->
       </div>
-      <div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
+      <div id="tabpanel-points-etapeId-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-etapeId" tabindex="0">
         <div style="display: flex; flex-direction: column;">
-          <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_670">Système géographique</label>
-            <div id="typeahead_geosysteme_670_wrapper" class="_typeahead_8eddf1">
-              <div class="flex"><input id="typeahead_geosysteme_670" type="text" title="" name="typeahead_geosysteme_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_670-control" aria-activedescendant="typeahead_geosysteme_670-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
-              <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_670-control" role="listbox">
-                <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_670-control-0">
+          <div class="fr-select-group"><label class="fr-label" for="4326">Système géographique</label>
+            <div id="4326_wrapper" class="_typeahead_8eddf1">
+              <div class="flex"><input id="4326" type="text" title="" name="4326" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="4326-control" aria-activedescendant="4326-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+              <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="4326-control" role="listbox">
+                <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="4326-control-0">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-1">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-1">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-2">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-2">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-3">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-3">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-4">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-4">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-5">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-5">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-6">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-6">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-7">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-7">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-8">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-8">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-9">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-9">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-10">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-10">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-11">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-11">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-12">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-12">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-13">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-13">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-14">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-14">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-15">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-15">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-16">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-16">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-17">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-17">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-18">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-18">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-19">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-19">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-20">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-20">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-21">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-21">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-22">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-22">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                 </li>
               </ul>
diff --git a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeArmMecaniseNonDeposable.html b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeArmMecaniseNonDeposable.html
index 2e957747df16a97331db346ccb418d81e3a4be52..c97483f2a353347a3372619e9096ba9dd07b91f0 100644
--- a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeArmMecaniseNonDeposable.html
+++ b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeArmMecaniseNonDeposable.html
@@ -73,85 +73,85 @@
   <div class="fr-pt-2w">
     <div class="fr-tabs" style="--tabs-height: 0px;">
       <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-        <li role="presentation"><button id="tabpanel-carte-271" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-271-panel">Carte</button></li>
-        <li role="presentation"><button id="tabpanel-points-271" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-271-panel">Tableau</button></li>
+        <li role="presentation"><button id="tabpanel-carte-etapeId" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-etapeId-panel">Carte</button></li>
+        <li role="presentation"><button id="tabpanel-points-etapeId" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-etapeId-panel">Tableau</button></li>
       </ul>
-      <div id="tabpanel-carte-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-271" tabindex="0">
+      <div id="tabpanel-carte-etapeId-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-etapeId" tabindex="0">
         <!---->
       </div>
-      <div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
+      <div id="tabpanel-points-etapeId-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-etapeId" tabindex="0">
         <div style="display: flex; flex-direction: column;">
-          <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_670">Système géographique</label>
-            <div id="typeahead_geosysteme_670_wrapper" class="_typeahead_8eddf1">
-              <div class="flex"><input id="typeahead_geosysteme_670" type="text" title="" name="typeahead_geosysteme_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_670-control" aria-activedescendant="typeahead_geosysteme_670-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
-              <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_670-control" role="listbox">
-                <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_670-control-0">
+          <div class="fr-select-group"><label class="fr-label" for="4326">Système géographique</label>
+            <div id="4326_wrapper" class="_typeahead_8eddf1">
+              <div class="flex"><input id="4326" type="text" title="" name="4326" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="4326-control" aria-activedescendant="4326-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+              <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="4326-control" role="listbox">
+                <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="4326-control-0">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-1">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-1">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-2">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-2">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-3">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-3">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-4">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-4">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-5">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-5">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-6">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-6">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-7">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-7">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-8">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-8">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-9">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-9">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-10">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-10">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-11">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-11">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-12">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-12">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-13">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-13">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-14">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-14">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-15">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-15">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-16">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-16">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-17">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-17">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-18">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-18">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-19">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-19">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-20">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-20">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-21">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-21">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-22">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-22">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                 </li>
               </ul>
diff --git a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeArmNonMecaniseDeposable.html b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeArmNonMecaniseDeposable.html
index 1d9e354eb0c53386a70482e2f119d0c347e4cc9d..96518f1b47df8e55cfb758910088636d8dabf6e4 100644
--- a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeArmNonMecaniseDeposable.html
+++ b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeArmNonMecaniseDeposable.html
@@ -73,85 +73,85 @@
   <div class="fr-pt-2w">
     <div class="fr-tabs" style="--tabs-height: 0px;">
       <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-        <li role="presentation"><button id="tabpanel-carte-271" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-271-panel">Carte</button></li>
-        <li role="presentation"><button id="tabpanel-points-271" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-271-panel">Tableau</button></li>
+        <li role="presentation"><button id="tabpanel-carte-etapeId" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-etapeId-panel">Carte</button></li>
+        <li role="presentation"><button id="tabpanel-points-etapeId" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-etapeId-panel">Tableau</button></li>
       </ul>
-      <div id="tabpanel-carte-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-271" tabindex="0">
+      <div id="tabpanel-carte-etapeId-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-etapeId" tabindex="0">
         <!---->
       </div>
-      <div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
+      <div id="tabpanel-points-etapeId-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-etapeId" tabindex="0">
         <div style="display: flex; flex-direction: column;">
-          <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_670">Système géographique</label>
-            <div id="typeahead_geosysteme_670_wrapper" class="_typeahead_8eddf1">
-              <div class="flex"><input id="typeahead_geosysteme_670" type="text" title="" name="typeahead_geosysteme_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_670-control" aria-activedescendant="typeahead_geosysteme_670-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
-              <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_670-control" role="listbox">
-                <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_670-control-0">
+          <div class="fr-select-group"><label class="fr-label" for="4326">Système géographique</label>
+            <div id="4326_wrapper" class="_typeahead_8eddf1">
+              <div class="flex"><input id="4326" type="text" title="" name="4326" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="4326-control" aria-activedescendant="4326-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+              <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="4326-control" role="listbox">
+                <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="4326-control-0">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-1">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-1">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-2">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-2">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-3">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-3">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-4">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-4">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-5">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-5">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-6">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-6">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-7">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-7">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-8">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-8">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-9">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-9">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-10">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-10">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-11">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-11">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-12">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-12">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-13">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-13">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-14">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-14">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-15">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-15">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-16">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-16">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-17">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-17">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-18">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-18">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-19">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-19">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-20">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-20">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-21">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-21">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-22">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-22">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                 </li>
               </ul>
diff --git a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeAvecForage.html b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeAvecForage.html
index 31de95d0108712586256e9ca4568c891ab7f8677..86d96ad163441bf62bf1bdd3aebce7f76e4bb63b 100644
--- a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeAvecForage.html
+++ b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeAvecForage.html
@@ -49,85 +49,85 @@
   <div class="fr-pt-2w">
     <div class="fr-tabs" style="--tabs-height: 0px;">
       <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-        <li role="presentation"><button id="tabpanel-carte-271" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-271-panel">Carte</button></li>
-        <li role="presentation"><button id="tabpanel-points-271" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-271-panel">Tableau</button></li>
+        <li role="presentation"><button id="tabpanel-carte-etapeId" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-etapeId-panel">Carte</button></li>
+        <li role="presentation"><button id="tabpanel-points-etapeId" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-etapeId-panel">Tableau</button></li>
       </ul>
-      <div id="tabpanel-carte-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-271" tabindex="0">
+      <div id="tabpanel-carte-etapeId-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-etapeId" tabindex="0">
         <!---->
       </div>
-      <div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
+      <div id="tabpanel-points-etapeId-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-etapeId" tabindex="0">
         <div style="display: flex; flex-direction: column;">
-          <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_670">Système géographique</label>
-            <div id="typeahead_geosysteme_670_wrapper" class="_typeahead_8eddf1">
-              <div class="flex"><input id="typeahead_geosysteme_670" type="text" title="" name="typeahead_geosysteme_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_670-control" aria-activedescendant="typeahead_geosysteme_670-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
-              <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_670-control" role="listbox">
-                <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_670-control-0">
+          <div class="fr-select-group"><label class="fr-label" for="4326">Système géographique</label>
+            <div id="4326_wrapper" class="_typeahead_8eddf1">
+              <div class="flex"><input id="4326" type="text" title="" name="4326" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="4326-control" aria-activedescendant="4326-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+              <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="4326-control" role="listbox">
+                <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="4326-control-0">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-1">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-1">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-2">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-2">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-3">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-3">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-4">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-4">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-5">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-5">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-6">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-6">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-7">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-7">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-8">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-8">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-9">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-9">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-10">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-10">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-11">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-11">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-12">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-12">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-13">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-13">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-14">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-14">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-15">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-15">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-16">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-16">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-17">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-17">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-18">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-18">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-19">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-19">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-20">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-20">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-21">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-21">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-22">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-22">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                 </li>
               </ul>
diff --git a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeAvecGrosseNote.html b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeAvecGrosseNote.html
index 4d16a0ec47cc73c967614c0320e2672fb1a51d53..cc1b3636102b494404581ac1dbbc9273d1bbbdb1 100644
--- a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeAvecGrosseNote.html
+++ b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeAvecGrosseNote.html
@@ -41,85 +41,85 @@
   <div class="fr-pt-2w">
     <div class="fr-tabs" style="--tabs-height: 0px;">
       <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-        <li role="presentation"><button id="tabpanel-carte-271" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-271-panel">Carte</button></li>
-        <li role="presentation"><button id="tabpanel-points-271" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-271-panel">Tableau</button></li>
+        <li role="presentation"><button id="tabpanel-carte-etapeId" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-etapeId-panel">Carte</button></li>
+        <li role="presentation"><button id="tabpanel-points-etapeId" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-etapeId-panel">Tableau</button></li>
       </ul>
-      <div id="tabpanel-carte-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-271" tabindex="0">
+      <div id="tabpanel-carte-etapeId-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-etapeId" tabindex="0">
         <!---->
       </div>
-      <div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
+      <div id="tabpanel-points-etapeId-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-etapeId" tabindex="0">
         <div style="display: flex; flex-direction: column;">
-          <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_670">Système géographique</label>
-            <div id="typeahead_geosysteme_670_wrapper" class="_typeahead_8eddf1">
-              <div class="flex"><input id="typeahead_geosysteme_670" type="text" title="" name="typeahead_geosysteme_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_670-control" aria-activedescendant="typeahead_geosysteme_670-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
-              <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_670-control" role="listbox">
-                <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_670-control-0">
+          <div class="fr-select-group"><label class="fr-label" for="4326">Système géographique</label>
+            <div id="4326_wrapper" class="_typeahead_8eddf1">
+              <div class="flex"><input id="4326" type="text" title="" name="4326" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="4326-control" aria-activedescendant="4326-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+              <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="4326-control" role="listbox">
+                <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="4326-control-0">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-1">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-1">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-2">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-2">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-3">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-3">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-4">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-4">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-5">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-5">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-6">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-6">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-7">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-7">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-8">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-8">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-9">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-9">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-10">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-10">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-11">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-11">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-12">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-12">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-13">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-13">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-14">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-14">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-15">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-15">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-16">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-16">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-17">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-17">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-18">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-18">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-19">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-19">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-20">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-20">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-21">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-21">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-22">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-22">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                 </li>
               </ul>
diff --git a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeAvecSeulementPerimetre.html b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeAvecSeulementPerimetre.html
index df5e064c7cd1e179e8d539d8c4686fb1a9d17a71..db7a42b3dce790fa1aaf2539dfc67209681c4f99 100644
--- a/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeAvecSeulementPerimetre.html
+++ b/packages/ui/src/components/demarche/demarche-etape.stories_snapshots_DemandeAvecSeulementPerimetre.html
@@ -20,85 +20,85 @@
   <div class="fr-pt-2w">
     <div class="fr-tabs" style="--tabs-height: 0px;">
       <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-        <li role="presentation"><button id="tabpanel-carte-271" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-271-panel">Carte</button></li>
-        <li role="presentation"><button id="tabpanel-points-271" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-271-panel">Tableau</button></li>
+        <li role="presentation"><button id="tabpanel-carte-etapeId" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-etapeId-panel">Carte</button></li>
+        <li role="presentation"><button id="tabpanel-points-etapeId" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-etapeId-panel">Tableau</button></li>
       </ul>
-      <div id="tabpanel-carte-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-271" tabindex="0">
+      <div id="tabpanel-carte-etapeId-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-etapeId" tabindex="0">
         <!---->
       </div>
-      <div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
+      <div id="tabpanel-points-etapeId-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-etapeId" tabindex="0">
         <div style="display: flex; flex-direction: column;">
-          <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_670">Système géographique</label>
-            <div id="typeahead_geosysteme_670_wrapper" class="_typeahead_8eddf1">
-              <div class="flex"><input id="typeahead_geosysteme_670" type="text" title="" name="typeahead_geosysteme_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_670-control" aria-activedescendant="typeahead_geosysteme_670-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
-              <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_670-control" role="listbox">
-                <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_670-control-0">
+          <div class="fr-select-group"><label class="fr-label" for="4326">Système géographique</label>
+            <div id="4326_wrapper" class="_typeahead_8eddf1">
+              <div class="flex"><input id="4326" type="text" title="" name="4326" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="4326-control" aria-activedescendant="4326-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+              <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="4326-control" role="listbox">
+                <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="4326-control-0">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-1">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-1">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-2">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-2">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-3">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-3">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-4">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-4">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-5">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-5">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-6">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-6">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-7">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-7">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-8">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-8">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-9">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-9">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-10">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-10">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-11">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-11">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-12">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-12">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-13">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-13">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-14">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-14">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-15">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-15">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-16">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-16">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-17">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-17">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-18">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-18">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-19">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-19">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-20">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-20">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-21">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-21">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                 </li>
-                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-22">
+                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-22">
                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                 </li>
               </ul>
diff --git a/packages/ui/src/components/demarche/demarche-etape.tsx b/packages/ui/src/components/demarche/demarche-etape.tsx
index 841f4b05a56fa3c0a823f1a6b2f969dc9a26c443..ce2539487f069f9dc9acd4e4138cfe587a3b59f1 100644
--- a/packages/ui/src/components/demarche/demarche-etape.tsx
+++ b/packages/ui/src/components/demarche/demarche-etape.tsx
@@ -439,6 +439,7 @@ export const DemarcheEtape = defineComponent<Props>(props => {
           initTab={props.initTab}
           titreSlug={props.titre.slug}
           titreTypeId={props.titre.typeId}
+          id={props.etape.id}
           calculateNeighbours={false}
           perimetre={{
             geojson4326_perimetre: props.etape.fondamentale.perimetre.geojson4326_perimetre,
diff --git a/packages/ui/src/components/demarche/demarche-map-layer-controls.stories_snapshots_Default.html b/packages/ui/src/components/demarche/demarche-map-layer-controls.stories_snapshots_Default.html
index 4e6e6f9da02b0e374a297d8cdb647f9f6c44ebf1..6eb1edb7837b511c843e8959a682dcac99f199f4 100644
--- a/packages/ui/src/components/demarche/demarche-map-layer-controls.stories_snapshots_Default.html
+++ b/packages/ui/src/components/demarche/demarche-map-layer-controls.stories_snapshots_Default.html
@@ -1,48 +1,48 @@
 <div class="maplibregl-ctrl-top-right" id="test" style="">
   <div class="maplibregl-ctrl maplibregl-ctrl-group fr-p-2w" style="z-index: 3;">
-    <fieldset class="fr-fieldset" id="radio_271" aria-labelledby="radio_271-legend" style="flex-direction: column; align-items: flex-start; margin-bottom: 0px;">
+    <fieldset class="fr-fieldset" id="base_layers" aria-labelledby="base_layers-legend" style="flex-direction: column; align-items: flex-start; margin-bottom: 0px;">
       <!---->
       <div class="fr-fieldset__element fr-mb-1v">
-        <div class="fr-radio-group fr-radio-group--sm"><input type="radio" id="radio_271-0" checked="" name="radio_271"><label class="fr-label" for="radio_271-0">OSM / fr
+        <div class="fr-radio-group fr-radio-group--sm"><input type="radio" id="base_layers-0" checked="" name="base_layers"><label class="fr-label" for="base_layers-0">OSM / fr
             <!---->
           </label></div>
       </div>
       <div class="fr-fieldset__element fr-mb-1v">
-        <div class="fr-radio-group fr-radio-group--sm"><input type="radio" id="radio_271-1" name="radio_271"><label class="fr-label" for="radio_271-1">OSM / hot
+        <div class="fr-radio-group fr-radio-group--sm"><input type="radio" id="base_layers-1" name="base_layers"><label class="fr-label" for="base_layers-1">OSM / hot
             <!---->
           </label></div>
       </div>
       <div class="fr-fieldset__element fr-mb-1v">
-        <div class="fr-radio-group fr-radio-group--sm"><input type="radio" id="radio_271-2" name="radio_271"><label class="fr-label" for="radio_271-2">Géoportail / Plan IGN
+        <div class="fr-radio-group fr-radio-group--sm"><input type="radio" id="base_layers-2" name="base_layers"><label class="fr-label" for="base_layers-2">Géoportail / Plan IGN
             <!---->
           </label></div>
       </div>
       <div class="fr-fieldset__element fr-mb-1v">
-        <div class="fr-radio-group fr-radio-group--sm"><input type="radio" id="radio_271-3" name="radio_271"><label class="fr-label" for="radio_271-3">Géoportail / Photographies aériennes
+        <div class="fr-radio-group fr-radio-group--sm"><input type="radio" id="base_layers-3" name="base_layers"><label class="fr-label" for="base_layers-3">Géoportail / Photographies aériennes
             <!---->
           </label></div>
       </div>
       <div class="fr-fieldset__element fr-mb-1v">
-        <div class="fr-radio-group fr-radio-group--sm"><input type="radio" id="radio_271-4" name="radio_271"><label class="fr-label" for="radio_271-4">BRGM / Cartes géologiques 1/50 000
+        <div class="fr-radio-group fr-radio-group--sm"><input type="radio" id="base_layers-4" name="base_layers"><label class="fr-label" for="base_layers-4">BRGM / Cartes géologiques 1/50 000
             <!---->
           </label></div>
       </div>
     </fieldset>
     <div class="fr-mb-1w fr-mt-1w" style="height: 1px; width: 100%; background-color: var(--grey-900-175);"></div>
-    <fieldset class="fr-fieldset" id="checkboxes_670" aria-labelledby="checkboxes_670-legend" style="flex-direction: column; align-items: flex-start; margin-bottom: 0px;">
+    <fieldset class="fr-fieldset" id="layers" aria-labelledby="layers-legend" style="flex-direction: column; align-items: flex-start; margin-bottom: 0px;">
       <!---->
       <div class="fr-fieldset__element fr-mb-1v">
-        <div class="fr-checkbox-group fr-checkbox-group--sm" itemid="Contours"><input checked="" name="archive" id="checkboxes_670_0" type="checkbox"><label class="fr-label" for="checkboxes_670_0">Contours
+        <div class="fr-checkbox-group fr-checkbox-group--sm" itemid="Contours"><input checked="" name="archive" id="layers_0" type="checkbox"><label class="fr-label" for="layers_0">Contours
             <!---->
           </label></div>
       </div>
       <div class="fr-fieldset__element fr-mb-1v">
-        <div class="fr-checkbox-group fr-checkbox-group--sm" itemid="Façades maritimes"><input name="archive" id="checkboxes_670_1" type="checkbox"><label class="fr-label" for="checkboxes_670_1">Façades maritimes
+        <div class="fr-checkbox-group fr-checkbox-group--sm" itemid="Façades maritimes"><input name="archive" id="layers_1" type="checkbox"><label class="fr-label" for="layers_1">Façades maritimes
             <!---->
           </label></div>
       </div>
       <div class="fr-fieldset__element fr-mb-1v">
-        <div class="fr-checkbox-group fr-checkbox-group--sm" itemid="Forages"><input name="archive" id="checkboxes_670_2" type="checkbox"><label class="fr-label" for="checkboxes_670_2">Forages
+        <div class="fr-checkbox-group fr-checkbox-group--sm" itemid="Forages"><input name="archive" id="layers_2" type="checkbox"><label class="fr-label" for="layers_2">Forages
             <!---->
           </label></div>
       </div>
diff --git a/packages/ui/src/components/demarche/demarche-map-layer-controls.tsx b/packages/ui/src/components/demarche/demarche-map-layer-controls.tsx
index ce725ebbb6b78183ce2df36779b18f5cc839f996..a8d8667d4675f527899f60f6668dde72122baca2 100644
--- a/packages/ui/src/components/demarche/demarche-map-layer-controls.tsx
+++ b/packages/ui/src/components/demarche/demarche-map-layer-controls.tsx
@@ -102,6 +102,7 @@ export const LayersControl = defineComponent<LayersControlProps>(props => {
     <div class="maplibregl-ctrl-top-right" id={props.id} style={props.style} onMouseleave={props.onMouseleave}>
       <div class="maplibregl-ctrl maplibregl-ctrl-group fr-p-2w" style={{ zIndex: 3 }}>
         <DsfrInputRadio
+          id="base_layers"
           style={{ marginBottom: 0 }}
           elements={getEntriesHardcore(baseMapNames).map(([name, layer]) => {
             return { itemId: layer, legend: { main: name } }
@@ -113,7 +114,15 @@ export const LayersControl = defineComponent<LayersControlProps>(props => {
           initialValue={defaultBaseLayer}
         />
         <DsfrSeparator size="sm" />
-        <DsfrInputCheckboxes style={{ marginBottom: 0 }} elements={elements.value} legend={{ main: '' }} valueChanged={checkboxValueChanged} size="sm" initialCheckedValue={selectedLayers.value} />
+        <DsfrInputCheckboxes
+          id="layers"
+          style={{ marginBottom: 0 }}
+          elements={elements.value}
+          legend={{ main: '' }}
+          valueChanged={checkboxValueChanged}
+          size="sm"
+          initialCheckedValue={selectedLayers.value}
+        />
       </div>
     </div>
   )
diff --git a/packages/ui/src/components/demarche/demarche-map.tsx b/packages/ui/src/components/demarche/demarche-map.tsx
index 595b259aee5bc32d3b44e644472486002538c1df..d975cd41862194c3f69884edd7e8935e5c5db808 100644
--- a/packages/ui/src/components/demarche/demarche-map.tsx
+++ b/packages/ui/src/components/demarche/demarche-map.tsx
@@ -2,7 +2,6 @@ import { HTMLAttributes, defineComponent, onMounted, ref, Ref, computed, watch,
 import { FullscreenControl, Map, NavigationControl, StyleSpecification, LayerSpecification, LngLatBounds, SourceSpecification, Popup } from 'maplibre-gl'
 import 'maplibre-gl/dist/maplibre-gl.css'
 import { FeatureCollectionForages, FeatureCollectionPoints, FeatureMultiPolygon, ForageType, featureForagePropertiesValidator } from 'camino-common/src/perimetre'
-import { random } from '@/utils/vue-tsx-utils'
 import { TitresStatutIds } from 'camino-common/src/static/titresStatuts'
 import { TitreSlug } from 'camino-common/src/validators/titres'
 import { TitreApiClient } from '../titre/titre-api-client'
@@ -35,6 +34,7 @@ import {
 import { CaminoRouter } from '@/typings/vue-router'
 
 type Props = {
+  id: string
   perimetre: { geojson4326_perimetre: FeatureMultiPolygon; geojson4326_points: FeatureCollectionPoints; geojson4326_forages: FeatureCollectionForages | null }
   maxMarkers: number
   style?: HTMLAttributes['style']
@@ -426,7 +426,7 @@ export const DemarcheMap = defineComponent<Props>(props => {
       mapLibre.addControl(new NavigationControl({ showCompass: false }), 'top-left')
       mapLibre.addControl(new FullscreenControl(), 'top-left')
 
-      const layersControlId = `layers-control-${random()}`
+      const layersControlId = `layers-control-${props.id}`
       mapLibre.addControl(
         {
           onAdd: function () {
@@ -562,8 +562,6 @@ export const DemarcheMap = defineComponent<Props>(props => {
     layersControlVisible.value = false
   }
 
-  const id = `${random()}`
-
   const possibleOverlayLayers = computed<OverlayName[]>(() => {
     return overlayNames.filter(name => {
       if (isNullOrUndefined(props.neighbours) && name === 'Titres valides') {
@@ -579,7 +577,7 @@ export const DemarcheMap = defineComponent<Props>(props => {
   return () => (
     <div ref={mapRef} class={props.class} style={{ minHeight: '400px' }}>
       <LayersControl
-        id={id}
+        id={props.id}
         style={{ display: layersControlVisible.value ? 'block' : 'none', zIndex: 3 }}
         onMouseleave={layerControlOnMouseleave}
         setLayer={selectLayer}
@@ -591,4 +589,4 @@ export const DemarcheMap = defineComponent<Props>(props => {
   )
 })
 // @ts-ignore waiting for https://github.com/vuejs/core/issues/7833
-DemarcheMap.props = ['perimetre', 'class', 'style', 'maxMarkers', 'neighbours', 'router', 'titreTypeId']
+DemarcheMap.props = ['id', 'perimetre', 'class', 'style', 'maxMarkers', 'neighbours', 'router', 'titreTypeId']
diff --git a/packages/ui/src/components/demarches/filtres-etapes.stories_snapshots_Multiple.html b/packages/ui/src/components/demarches/filtres-etapes.stories_snapshots_Multiple.html
index 9e0c899f06778bce8c6ce61bb81b2fae3432b476..374af5b10712f8dfaaaf927abe2852847d2c91e2 100644
--- a/packages/ui/src/components/demarches/filtres-etapes.stories_snapshots_Multiple.html
+++ b/packages/ui/src/components/demarches/filtres-etapes.stories_snapshots_Multiple.html
@@ -109,20 +109,20 @@
         <!---->
       </button>
     </div>
-    <div class="fr-select-group fr-mb-0"><label class="fr-label" for="select_271">Statut (optionnel)
+    <div class="fr-select-group fr-mb-0"><label class="fr-label" for="filtres_etapes_par_statut_mfr">Statut (optionnel)
         <!---->
-      </label><select class="fr-select" id="select_271" aria-label="Statut" name="select_271" value="fai">
+      </label><select class="fr-select" id="filtres_etapes_par_statut_mfr" aria-label="Statut" name="filtres_etapes_par_statut_mfr" value="fai">
         <option selected="" value="fai">fait</option>
         <option disabled="" hidden="" value="">Selectionnez une option</option>
       </select></div>
-    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Après le (optionnel)<span class="fr-hint-text">au format jj/mm/aaaa</span>
+    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="filtres_etapes_apres_le_mfr">Après le (optionnel)<span class="fr-hint-text">au format jj/mm/aaaa</span>
         <!---->
-      </label><input class="fr-input" name="input_670" id="input_670" type="date" value="2022-01-01">
+      </label><input class="fr-input" name="filtres_etapes_apres_le_mfr" id="filtres_etapes_apres_le_mfr" type="date" value="2022-01-01">
       <!---->
     </div>
-    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Avant le (optionnel)<span class="fr-hint-text">au format jj/mm/aaaa</span>
+    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="filtres_etapes_avant_le_mfr">Avant le (optionnel)<span class="fr-hint-text">au format jj/mm/aaaa</span>
         <!---->
-      </label><input class="fr-input" name="input_74" id="input_74" type="date" value="2022-03-03">
+      </label><input class="fr-input" name="filtres_etapes_avant_le_mfr" id="filtres_etapes_avant_le_mfr" type="date" value="2022-03-03">
       <!---->
     </div>
   </div>
@@ -236,20 +236,20 @@
         <!---->
       </button>
     </div>
-    <div class="fr-select-group fr-mb-0"><label class="fr-label" for="select_878">Statut (optionnel)
+    <div class="fr-select-group fr-mb-0"><label class="fr-label" for="filtres_etapes_par_statut_men">Statut (optionnel)
         <!---->
-      </label><select class="fr-select" id="select_878" aria-label="Statut" name="select_878" value="fai">
+      </label><select class="fr-select" id="filtres_etapes_par_statut_men" aria-label="Statut" name="filtres_etapes_par_statut_men" value="fai">
         <option selected="" value="fai">fait</option>
         <option disabled="" hidden="" value="">Selectionnez une option</option>
       </select></div>
-    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_967">Après le (optionnel)<span class="fr-hint-text">au format jj/mm/aaaa</span>
+    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="filtres_etapes_apres_le_men">Après le (optionnel)<span class="fr-hint-text">au format jj/mm/aaaa</span>
         <!---->
-      </label><input class="fr-input" name="input_967" id="input_967" type="date" value="2024-01-01">
+      </label><input class="fr-input" name="filtres_etapes_apres_le_men" id="filtres_etapes_apres_le_men" type="date" value="2024-01-01">
       <!---->
     </div>
-    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_25">Avant le (optionnel)<span class="fr-hint-text">au format jj/mm/aaaa</span>
+    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="filtres_etapes_avant_le_men">Avant le (optionnel)<span class="fr-hint-text">au format jj/mm/aaaa</span>
         <!---->
-      </label><input class="fr-input" name="input_25" id="input_25" type="date" value="2025-03-03">
+      </label><input class="fr-input" name="filtres_etapes_avant_le_men" id="filtres_etapes_avant_le_men" type="date" value="2025-03-03">
       <!---->
     </div>
   </div><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-add-line fr-btn--icon-right" title="Ajouter un type d’étape" aria-label="Ajouter un type d’étape" type="button">Ajouter un type d'étape</button>
diff --git a/packages/ui/src/components/demarches/filtres-etapes.stories_snapshots_PartialOneValue.html b/packages/ui/src/components/demarches/filtres-etapes.stories_snapshots_PartialOneValue.html
index dc7d89fc4c1c071d65d2acf7d46fa59e2115ed56..5488a2817f6986838ab01ee7c55e2c09a7942cef 100644
--- a/packages/ui/src/components/demarches/filtres-etapes.stories_snapshots_PartialOneValue.html
+++ b/packages/ui/src/components/demarches/filtres-etapes.stories_snapshots_PartialOneValue.html
@@ -109,20 +109,20 @@
         <!---->
       </button>
     </div>
-    <div class="fr-select-group fr-mb-0"><label class="fr-label" for="select_271">Statut (optionnel)
+    <div class="fr-select-group fr-mb-0"><label class="fr-label" for="filtres_etapes_par_statut_mfr">Statut (optionnel)
         <!---->
-      </label><select class="fr-select" id="select_271" aria-label="Statut" name="select_271" value="fai">
+      </label><select class="fr-select" id="filtres_etapes_par_statut_mfr" aria-label="Statut" name="filtres_etapes_par_statut_mfr" value="fai">
         <option selected="" value="fai">fait</option>
         <option disabled="" hidden="" value="">Selectionnez une option</option>
       </select></div>
-    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Après le (optionnel)<span class="fr-hint-text">au format jj/mm/aaaa</span>
+    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="filtres_etapes_apres_le_mfr">Après le (optionnel)<span class="fr-hint-text">au format jj/mm/aaaa</span>
         <!---->
-      </label><input class="fr-input" name="input_670" id="input_670" type="date">
+      </label><input class="fr-input" name="filtres_etapes_apres_le_mfr" id="filtres_etapes_apres_le_mfr" type="date">
       <!---->
     </div>
-    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Avant le (optionnel)<span class="fr-hint-text">au format jj/mm/aaaa</span>
+    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="filtres_etapes_avant_le_mfr">Avant le (optionnel)<span class="fr-hint-text">au format jj/mm/aaaa</span>
         <!---->
-      </label><input class="fr-input" name="input_74" id="input_74" type="date">
+      </label><input class="fr-input" name="filtres_etapes_avant_le_mfr" id="filtres_etapes_avant_le_mfr" type="date">
       <!---->
     </div>
   </div><button class="fr-btn fr-btn--secondary fr-btn--md fr-icon-add-line fr-btn--icon-right" title="Ajouter un type d’étape" aria-label="Ajouter un type d’étape" type="button">Ajouter un type d'étape</button>
diff --git a/packages/ui/src/components/demarches/filtres-etapes.tsx b/packages/ui/src/components/demarches/filtres-etapes.tsx
index 118362da30c637f546bb59542d1c9a525ba32190..6b0724abbd74b97a1ea99bf17b4be0e4907be467 100644
--- a/packages/ui/src/components/demarches/filtres-etapes.tsx
+++ b/packages/ui/src/components/demarches/filtres-etapes.tsx
@@ -84,6 +84,7 @@ export const FiltresEtapes = defineComponent<Props>(props => {
           {value.typeId ? (
             <>
               <DsfrSelect
+                id={`filtres_etapes_par_statut_${value.typeId}`}
                 class="fr-mb-0"
                 required={false}
                 initialValue={value.statutId ?? null}
@@ -91,8 +92,22 @@ export const FiltresEtapes = defineComponent<Props>(props => {
                 items={map(getEtapesStatuts(value.typeId), ({ id, nom }) => ({ id, label: nom }))}
                 valueChanged={statutValueSelected(n)}
               />
-              <DsfrInput required={false} initialValue={value.dateDebut} legend={{ main: 'Après le' }} type={{ type: 'date' }} valueChanged={dateDebutChanged(n)} />
-              <DsfrInput required={false} initialValue={value.dateFin} legend={{ main: 'Avant le' }} type={{ type: 'date' }} valueChanged={dateFinChanged(n)} />
+              <DsfrInput
+                id={`filtres_etapes_apres_le_${value.typeId}`}
+                required={false}
+                initialValue={value.dateDebut}
+                legend={{ main: 'Après le' }}
+                type={{ type: 'date' }}
+                valueChanged={dateDebutChanged(n)}
+              />
+              <DsfrInput
+                id={`filtres_etapes_avant_le_${value.typeId}`}
+                required={false}
+                initialValue={value.dateFin}
+                legend={{ main: 'Avant le' }}
+                type={{ type: 'date' }}
+                valueChanged={dateFinChanged(n)}
+              />
             </>
           ) : null}
         </div>
diff --git a/packages/ui/src/components/demarches/page.stories_snapshots_Loading.html b/packages/ui/src/components/demarches/page.stories_snapshots_Loading.html
index 6a06f9f1828a18727642b8f28edd8893baa05eb0..54faeb7eb7e8a056b7b4da9c36ee8db310bab7a4 100644
--- a/packages/ui/src/components/demarches/page.stories_snapshots_Loading.html
+++ b/packages/ui/src/components/demarches/page.stories_snapshots_Loading.html
@@ -129,7 +129,7 @@
             </div>
           </div>
         </div>
-        <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+        <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
           <!---->
           <!---->
           <div class="_spinner_3306d0"></div>
diff --git a/packages/ui/src/components/demarches/page.stories_snapshots_WithError.html b/packages/ui/src/components/demarches/page.stories_snapshots_WithError.html
index f9fb1b25d8dc9c3ae16a2869fb3b1918ab99fc1d..1ce449e5b16ee65683a345da7d3b2ec3dc1bb4ca 100644
--- a/packages/ui/src/components/demarches/page.stories_snapshots_WithError.html
+++ b/packages/ui/src/components/demarches/page.stories_snapshots_WithError.html
@@ -129,7 +129,7 @@
             </div>
           </div>
         </div>
-        <div class=" undefined" style="display: flex; justify-content: center;">
+        <div class="" style="display: flex; justify-content: center;">
           <div class="fr-alert fr-alert--error fr-alert--sm">
             <p>Cassé</p>
           </div>
diff --git a/packages/ui/src/components/entreprise.stories_snapshots_Complet.html b/packages/ui/src/components/entreprise.stories_snapshots_Complet.html
index 2763bf6a40b08fb8a9c90eab19fac4aeeac3e8e9..793d9290e1e3ac10d85d067921fb7cb2fd680971 100644
--- a/packages/ui/src/components/entreprise.stories_snapshots_Complet.html
+++ b/packages/ui/src/components/entreprise.stories_snapshots_Complet.html
@@ -66,17 +66,17 @@
     <h2>Fiscalité</h2>Calcul, à titre indicatif, du montant de l'imposition minière de votre entreprise (redevance départementale et communale des mines pour les substances non énergétiques et taxe aurifère)<div class="fr-mt-2w">
       <div class="fr-tabs" style="--tabs-height: 0px;">
         <ul class="fr-tabs__list" role="tablist" aria-label="Années">
-          <li role="presentation"><button id="tabpanel-2021-271" class="fr-tabs__tab" tabindex="-1" role="tab" aria-label="2021" aria-selected="false" aria-controls="tabpanel-2021-271-panel">2021</button></li>
-          <li role="presentation"><button id="tabpanel-2022-271" class="fr-tabs__tab" tabindex="-1" role="tab" aria-label="2022" aria-selected="false" aria-controls="tabpanel-2022-271-panel">2022</button></li>
-          <li role="presentation"><button id="tabpanel-2023-271" class="fr-tabs__tab" tabindex="0" role="tab" aria-label="2023" aria-selected="true" aria-controls="tabpanel-2023-271-panel">2023</button></li>
+          <li role="presentation"><button id="tabpanel-2021-fiscalite_annees" class="fr-tabs__tab" tabindex="-1" role="tab" aria-label="2021" aria-selected="false" aria-controls="tabpanel-2021-fiscalite_annees-panel">2021</button></li>
+          <li role="presentation"><button id="tabpanel-2022-fiscalite_annees" class="fr-tabs__tab" tabindex="-1" role="tab" aria-label="2022" aria-selected="false" aria-controls="tabpanel-2022-fiscalite_annees-panel">2022</button></li>
+          <li role="presentation"><button id="tabpanel-2023-fiscalite_annees" class="fr-tabs__tab" tabindex="0" role="tab" aria-label="2023" aria-selected="true" aria-controls="tabpanel-2023-fiscalite_annees-panel">2023</button></li>
         </ul>
-        <div id="tabpanel-2021-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-2021-271" tabindex="0">
+        <div id="tabpanel-2021-fiscalite_annees-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-2021-fiscalite_annees" tabindex="0">
           <!---->
         </div>
-        <div id="tabpanel-2022-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-2022-271" tabindex="0">
+        <div id="tabpanel-2022-fiscalite_annees-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-2022-fiscalite_annees" tabindex="0">
           <!---->
         </div>
-        <div id="tabpanel-2023-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-2023-271" tabindex="0">
+        <div id="tabpanel-2023-fiscalite_annees-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-2023-fiscalite_annees" tabindex="0">
           <div class="fr-alert fr-alert--info fr-alert--sm fr-mb-1w">
             <p>Estimation effectuée sur la base des tarifs et des productions déclarées pour l'année 2022</p>
           </div><strong>Cotisations</strong>
diff --git a/packages/ui/src/components/entreprise.stories_snapshots_Loading.html b/packages/ui/src/components/entreprise.stories_snapshots_Loading.html
index a3ef9f153e3d85e7cee9bee07fa7e245eba4da0b..c5f6bb573b32886f6379bf1c5b391015fac5acbe 100644
--- a/packages/ui/src/components/entreprise.stories_snapshots_Loading.html
+++ b/packages/ui/src/components/entreprise.stories_snapshots_Loading.html
@@ -1,4 +1,4 @@
-<div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+<div class="_top-level_3306d0" style="display: flex; justify-content: center;">
   <!---->
   <!---->
   <div class="_spinner_3306d0"></div>
diff --git a/packages/ui/src/components/entreprise/add-entreprise-document-popup.stories_snapshots_Default.html b/packages/ui/src/components/entreprise/add-entreprise-document-popup.stories_snapshots_Default.html
index a1512dfef21fb67ab8e7c126548eab6b5b3827f8..f7d0514bc9e21fb1ed0e1289edb0b55bb93cd67e 100644
--- a/packages/ui/src/components/entreprise/add-entreprise-document-popup.stories_snapshots_Default.html
+++ b/packages/ui/src/components/entreprise/add-entreprise-document-popup.stories_snapshots_Default.html
@@ -12,9 +12,9 @@
                 <form>
                   <fieldset class="fr-fieldset" id="text">
                     <div class="fr-fieldset__element">
-                      <div class="fr-select-group"><label class="fr-label" for="select_271">Type de document
+                      <div class="fr-select-group"><label class="fr-label" for="nouveau_document_type">Type de document
                           <!---->
-                        </label><select class="fr-select" id="select_271" aria-label="Type de document" name="select_271">
+                        </label><select class="fr-select" id="nouveau_document_type" aria-label="Type de document" name="nouveau_document_type">
                           <option value="bil">3 derniers bilans et comptes de résultats</option>
                           <option value="atf">Attestation fiscale</option>
                           <option value="sir">Avis de situation au répertoire Sirene</option>
@@ -34,10 +34,10 @@
                   </fieldset>
                   <fieldset class="fr-fieldset" id="text">
                     <div class="fr-fieldset__element">
-                      <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Date de délivrance du document
+                      <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="nouveau_document_date">Date de délivrance du document
                           <!----><span class="fr-hint-text">au format jj/mm/aaaa</span>
                           <!---->
-                        </label><input class="fr-input" name="input_670" id="input_670" required="" type="date">
+                        </label><input class="fr-input" name="nouveau_document_date" id="nouveau_document_date" required="" type="date">
                         <!---->
                       </div>
                     </div>
@@ -47,11 +47,11 @@
                         </label><input class="fr-upload" type="file" id="file-upload" name="file-upload" accept=".pdf"></div>
                     </div>
                     <div class="fr-fieldset__element">
-                      <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Description
+                      <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="nouveau_document_description">Description
                           <!---->
                           <!---->
                           <!---->
-                        </label><input class="fr-input" name="input_74" id="input_74" required="" type="text">
+                        </label><input class="fr-input" name="nouveau_document_description" id="nouveau_document_description" required="" type="text">
                         <!---->
                       </div>
                     </div>
diff --git a/packages/ui/src/components/entreprise/add-entreprise-document-popup.stories_snapshots_TypeDeDocumentVerouille.html b/packages/ui/src/components/entreprise/add-entreprise-document-popup.stories_snapshots_TypeDeDocumentVerouille.html
index eec7ad7d9616a742e6d7979f6942e41880bf5f90..66c3967adcb427963a99da17a7829cd80060766f 100644
--- a/packages/ui/src/components/entreprise/add-entreprise-document-popup.stories_snapshots_TypeDeDocumentVerouille.html
+++ b/packages/ui/src/components/entreprise/add-entreprise-document-popup.stories_snapshots_TypeDeDocumentVerouille.html
@@ -13,10 +13,10 @@
                   <!---->
                   <fieldset class="fr-fieldset" id="text">
                     <div class="fr-fieldset__element">
-                      <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Date de délivrance du document
+                      <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="nouveau_document_date">Date de délivrance du document
                           <!----><span class="fr-hint-text">au format jj/mm/aaaa</span>
                           <!---->
-                        </label><input class="fr-input" name="input_271" id="input_271" required="" type="date">
+                        </label><input class="fr-input" name="nouveau_document_date" id="nouveau_document_date" required="" type="date">
                         <!---->
                       </div>
                     </div>
@@ -26,11 +26,11 @@
                         </label><input class="fr-upload" type="file" id="file-upload" name="file-upload" accept=".pdf"></div>
                     </div>
                     <div class="fr-fieldset__element">
-                      <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Description
+                      <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="nouveau_document_description">Description
                           <!---->
                           <!---->
                           <!---->
-                        </label><input class="fr-input" name="input_670" id="input_670" required="" type="text">
+                        </label><input class="fr-input" name="nouveau_document_description" id="nouveau_document_description" required="" type="text">
                         <!---->
                       </div>
                     </div>
diff --git a/packages/ui/src/components/entreprise/add-entreprise-document-popup.tsx b/packages/ui/src/components/entreprise/add-entreprise-document-popup.tsx
index da7c34923552141d7834ad6c0abdd671fa187b9e..0a292e297c503bac8de0b4fbc88669ecdc4af87d 100644
--- a/packages/ui/src/components/entreprise/add-entreprise-document-popup.tsx
+++ b/packages/ui/src/components/entreprise/add-entreprise-document-popup.tsx
@@ -44,20 +44,27 @@ export const AddEntrepriseDocumentPopup = defineComponent<Props>(props => {
       {props.lockedEntrepriseDocumentTypeId ? null : (
         <fieldset class="fr-fieldset" id="text">
           <div class="fr-fieldset__element">
-            <DsfrSelect required={true} legend={{ main: 'Type de document', placeholder: 'Selectionnez un type de document' }} initialValue={null} items={documentsTypes} valueChanged={typeChange} />
+            <DsfrSelect
+              id="nouveau_document_type"
+              required={true}
+              legend={{ main: 'Type de document', placeholder: 'Selectionnez un type de document' }}
+              initialValue={null}
+              items={documentsTypes}
+              valueChanged={typeChange}
+            />
           </div>
         </fieldset>
       )}
 
       <fieldset class="fr-fieldset" id="text">
         <div class="fr-fieldset__element">
-          <DsfrInput required={true} legend={{ main: 'Date de délivrance du document' }} type={{ type: 'date' }} valueChanged={dateChange} />
+          <DsfrInput id="nouveau_document_date" required={true} legend={{ main: 'Date de délivrance du document' }} type={{ type: 'date' }} valueChanged={dateChange} />
         </div>
         <div class="fr-fieldset__element">
           <InputFile required={true} accept={['pdf']} uploadFile={fileChange} />
         </div>
         <div class="fr-fieldset__element">
-          <DsfrInput required={true} legend={{ main: 'Description' }} type={{ type: 'text' }} valueChanged={descriptionChange} />
+          <DsfrInput id="nouveau_document_description" required={true} legend={{ main: 'Description' }} type={{ type: 'text' }} valueChanged={descriptionChange} />
         </div>
       </fieldset>
     </form>
diff --git a/packages/ui/src/components/entreprise/add-popup.stories_snapshots_Super.html b/packages/ui/src/components/entreprise/add-popup.stories_snapshots_Super.html
index 49bae960fb07d4a91058dab723f61deee9cc0a33..745979de60b459df0f91e52710876b7e1e2426d7 100644
--- a/packages/ui/src/components/entreprise/add-popup.stories_snapshots_Super.html
+++ b/packages/ui/src/components/entreprise/add-popup.stories_snapshots_Super.html
@@ -10,18 +10,18 @@
               <h1 id="monId-title" class="fr-modal__title"><span class="fr-icon-arrow-right-line fr-icon--lg" aria-hidden="true"></span>Création d'une entreprise</h1>
               <div class="fr-container">
                 <form>
-                  <div class="fr-input-group fr-input-group--disabled" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Pays
+                  <div class="fr-input-group fr-input-group--disabled" style="margin-bottom: 0px;"><label class="fr-label" for="nouvelle_entreprise_pays">Pays
                       <!---->
                       <!---->
                       <!---->
-                    </label><input class="fr-input" name="input_271" id="input_271" disabled="" required="" type="text" value="France">
+                    </label><input class="fr-input" name="nouvelle_entreprise_pays" id="nouvelle_entreprise_pays" disabled="" required="" type="text" value="France">
                     <!---->
                   </div>
-                  <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Siren
+                  <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="nouvelle_entreprise_siren">Siren
                       <!---->
                       <!---->
                       <!---->
-                    </label><input class="fr-input" name="input_670" id="input_670" required="" type="text">
+                    </label><input class="fr-input" name="nouvelle_entreprise_siren" id="nouvelle_entreprise_siren" required="" type="text">
                     <!---->
                   </div>
                 </form>
diff --git a/packages/ui/src/components/entreprise/add-popup.tsx b/packages/ui/src/components/entreprise/add-popup.tsx
index 3cddbdc96a02cf21c5904cc4b4c2ae08c7da12ca..5902fd4971f66c516060f84922ff74bc55759d93 100644
--- a/packages/ui/src/components/entreprise/add-popup.tsx
+++ b/packages/ui/src/components/entreprise/add-popup.tsx
@@ -17,8 +17,8 @@ export const EntrepriseAddPopup = defineComponent<Props>(props => {
   }
   const content = () => (
     <form>
-      <DsfrInput required={true} legend={{ main: 'Pays' }} disabled={true} valueChanged={() => {}} initialValue={'France'} type={{ type: 'text' }} />
-      <DsfrInput required={true} legend={{ main: 'Siren' }} valueChanged={sirenChange} type={{ type: 'text' }} />
+      <DsfrInput id="nouvelle_entreprise_pays" required={true} legend={{ main: 'Pays' }} disabled={true} valueChanged={() => {}} initialValue={'France'} type={{ type: 'text' }} />
+      <DsfrInput id="nouvelle_entreprise_siren" required={true} legend={{ main: 'Siren' }} valueChanged={sirenChange} type={{ type: 'text' }} />
     </form>
   )
 
diff --git a/packages/ui/src/components/entreprise/edit-popup.stories_snapshots_Ok.html b/packages/ui/src/components/entreprise/edit-popup.stories_snapshots_Ok.html
index 1ef50cbb2b5e8f22a3e83c7007baac515aa8e558..55d42c7df99faf009aa0b831d0d2d4f9f1fd1a2d 100644
--- a/packages/ui/src/components/entreprise/edit-popup.stories_snapshots_Ok.html
+++ b/packages/ui/src/components/entreprise/edit-popup.stories_snapshots_Ok.html
@@ -10,22 +10,22 @@
               <h1 id="monId-title" class="fr-modal__title"><span class="fr-icon-arrow-right-line fr-icon--lg" aria-hidden="true"></span>Modification d'une entreprise</h1>
               <div class="fr-container">
                 <form>
-                  <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Téléphone (optionnel)
+                  <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="entreprise_telephone">Téléphone (optionnel)
                       <!---->
                       <!---->
-                    </label><input class="fr-input" name="input_271" id="input_271" type="text" value="0102030405">
+                    </label><input class="fr-input" name="entreprise_telephone" id="entreprise_telephone" type="text" value="0102030405">
                     <!---->
                   </div>
-                  <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Adresse électronique (optionnel)
+                  <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="entreprise_email">Adresse électronique (optionnel)
                       <!---->
                       <!---->
-                    </label><input class="fr-input" name="input_670" id="input_670" type="text">
+                    </label><input class="fr-input" name="entreprise_email" id="entreprise_email" type="text">
                     <!---->
                   </div>
-                  <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Site internet (optionnel)
+                  <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="entreprise_site">Site internet (optionnel)
                       <!---->
                       <!---->
-                    </label><input class="fr-input" name="input_74" id="input_74" type="text">
+                    </label><input class="fr-input" name="entreprise_site" id="entreprise_site" type="text">
                     <!---->
                   </div>
                   <!---->
diff --git a/packages/ui/src/components/entreprise/edit-popup.stories_snapshots_Super.html b/packages/ui/src/components/entreprise/edit-popup.stories_snapshots_Super.html
index b7196c4f24c1aaa567dc7c083ccc8a73c970d20a..810ad056e832cebc13ab4cd3dad7906713190aa7 100644
--- a/packages/ui/src/components/entreprise/edit-popup.stories_snapshots_Super.html
+++ b/packages/ui/src/components/entreprise/edit-popup.stories_snapshots_Super.html
@@ -10,22 +10,22 @@
               <h1 id="monId-title" class="fr-modal__title"><span class="fr-icon-arrow-right-line fr-icon--lg" aria-hidden="true"></span>Modification d'une entreprise</h1>
               <div class="fr-container">
                 <form>
-                  <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Téléphone (optionnel)
+                  <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="entreprise_telephone">Téléphone (optionnel)
                       <!---->
                       <!---->
-                    </label><input class="fr-input" name="input_271" id="input_271" type="text" value="0102030405">
+                    </label><input class="fr-input" name="entreprise_telephone" id="entreprise_telephone" type="text" value="0102030405">
                     <!---->
                   </div>
-                  <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Adresse électronique (optionnel)
+                  <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="entreprise_email">Adresse électronique (optionnel)
                       <!---->
                       <!---->
-                    </label><input class="fr-input" name="input_670" id="input_670" type="text">
+                    </label><input class="fr-input" name="entreprise_email" id="entreprise_email" type="text">
                     <!---->
                   </div>
-                  <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Site internet (optionnel)
+                  <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="entreprise_site">Site internet (optionnel)
                       <!---->
                       <!---->
-                    </label><input class="fr-input" name="input_74" id="input_74" type="text">
+                    </label><input class="fr-input" name="entreprise_site" id="entreprise_site" type="text">
                     <!---->
                   </div>
                   <div class="fr-checkbox-group fr-mt-2w"><input name="archive" id="archive" type="checkbox"><label class="fr-label" for="archive">Archivée
diff --git a/packages/ui/src/components/entreprise/edit-popup.tsx b/packages/ui/src/components/entreprise/edit-popup.tsx
index 0f28fc6e791b569324f9f1d9eaed46425836f9b7..a553059eb3be77309133c9f16a4bca05cb0d8f55 100644
--- a/packages/ui/src/components/entreprise/edit-popup.tsx
+++ b/packages/ui/src/components/entreprise/edit-popup.tsx
@@ -33,9 +33,9 @@ export const EntrepriseEditPopup = defineComponent<Props>(props => {
   }
   const content = () => (
     <form>
-      <DsfrInput required={false} legend={{ main: 'Téléphone' }} type={{ type: 'text' }} valueChanged={telephoneChange} initialValue={telephone.value} />
-      <DsfrInput required={false} legend={{ main: 'Adresse électronique' }} type={{ type: 'text' }} valueChanged={emailChange} initialValue={email.value} />
-      <DsfrInput required={false} legend={{ main: 'Site internet' }} type={{ type: 'text' }} valueChanged={urlChange} initialValue={url.value} />
+      <DsfrInput id="entreprise_telephone" required={false} legend={{ main: 'Téléphone' }} type={{ type: 'text' }} valueChanged={telephoneChange} initialValue={telephone.value} />
+      <DsfrInput id="entreprise_email" required={false} legend={{ main: 'Adresse électronique' }} type={{ type: 'text' }} valueChanged={emailChange} initialValue={email.value} />
+      <DsfrInput id="entreprise_site" required={false} legend={{ main: 'Site internet' }} type={{ type: 'text' }} valueChanged={urlChange} initialValue={url.value} />
 
       {isSuper(props.user) ? <DsfrInputCheckbox id="archive" class="fr-mt-2w" legend={{ main: 'Archivée' }} initialValue={archive.value} valueChanged={archiveChange} /> : null}
     </form>
diff --git a/packages/ui/src/components/entreprise/entreprise-fiscalite.stories_snapshots_Guyane.html b/packages/ui/src/components/entreprise/entreprise-fiscalite.stories_snapshots_Guyane.html
index f1a58c95bd3df424accf315b3bb181d57b4d3d72..ea55ec5f387e3c2dbf251b62d9381cc7cf000a8e 100644
--- a/packages/ui/src/components/entreprise/entreprise-fiscalite.stories_snapshots_Guyane.html
+++ b/packages/ui/src/components/entreprise/entreprise-fiscalite.stories_snapshots_Guyane.html
@@ -2,13 +2,13 @@
   <h2>Fiscalité</h2>Calcul, à titre indicatif, du montant de l'imposition minière de votre entreprise (redevance départementale et communale des mines pour les substances non énergétiques et taxe aurifère)<div class="fr-mt-2w">
     <div class="fr-tabs" style="--tabs-height: 0px;">
       <ul class="fr-tabs__list" role="tablist" aria-label="Années">
-        <li role="presentation"><button id="tabpanel-2021-271" class="fr-tabs__tab" tabindex="-1" role="tab" aria-label="2021" aria-selected="false" aria-controls="tabpanel-2021-271-panel">2021</button></li>
-        <li role="presentation"><button id="tabpanel-2022-271" class="fr-tabs__tab" tabindex="0" role="tab" aria-label="2022" aria-selected="true" aria-controls="tabpanel-2022-271-panel">2022</button></li>
+        <li role="presentation"><button id="tabpanel-2021-fiscalite_annees" class="fr-tabs__tab" tabindex="-1" role="tab" aria-label="2021" aria-selected="false" aria-controls="tabpanel-2021-fiscalite_annees-panel">2021</button></li>
+        <li role="presentation"><button id="tabpanel-2022-fiscalite_annees" class="fr-tabs__tab" tabindex="0" role="tab" aria-label="2022" aria-selected="true" aria-controls="tabpanel-2022-fiscalite_annees-panel">2022</button></li>
       </ul>
-      <div id="tabpanel-2021-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-2021-271" tabindex="0">
+      <div id="tabpanel-2021-fiscalite_annees-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-2021-fiscalite_annees" tabindex="0">
         <!---->
       </div>
-      <div id="tabpanel-2022-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-2022-271" tabindex="0">
+      <div id="tabpanel-2022-fiscalite_annees-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-2022-fiscalite_annees" tabindex="0">
         <div class="fr-alert fr-alert--info fr-alert--sm fr-mb-1w">
           <p>Estimation effectuée sur la base des tarifs et des productions déclarées pour l'année 2021</p>
         </div><strong>Cotisations</strong>
diff --git a/packages/ui/src/components/entreprise/entreprise-fiscalite.stories_snapshots_GuyaneAnneePrecedente.html b/packages/ui/src/components/entreprise/entreprise-fiscalite.stories_snapshots_GuyaneAnneePrecedente.html
index 036252bf2c4a5f535e983ca29179c9153814917a..7c68be1ca36af81664d551cf79a4c9fcf7084055 100644
--- a/packages/ui/src/components/entreprise/entreprise-fiscalite.stories_snapshots_GuyaneAnneePrecedente.html
+++ b/packages/ui/src/components/entreprise/entreprise-fiscalite.stories_snapshots_GuyaneAnneePrecedente.html
@@ -2,10 +2,10 @@
   <h2>Fiscalité</h2>Calcul, à titre indicatif, du montant de l'imposition minière de votre entreprise (redevance départementale et communale des mines pour les substances non énergétiques et taxe aurifère)<div class="fr-mt-2w">
     <div class="fr-tabs" style="--tabs-height: 0px;">
       <ul class="fr-tabs__list" role="tablist" aria-label="Années">
-        <li role="presentation"><button id="tabpanel-2021-271" class="fr-tabs__tab" tabindex="0" role="tab" aria-label="2021" aria-selected="true" aria-controls="tabpanel-2021-271-panel">2021</button></li>
-        <li role="presentation"><button id="tabpanel-2022-271" class="fr-tabs__tab" tabindex="-1" role="tab" aria-label="2022" aria-selected="false" aria-controls="tabpanel-2022-271-panel">2022</button></li>
+        <li role="presentation"><button id="tabpanel-2021-fiscalite_annees" class="fr-tabs__tab" tabindex="0" role="tab" aria-label="2021" aria-selected="true" aria-controls="tabpanel-2021-fiscalite_annees-panel">2021</button></li>
+        <li role="presentation"><button id="tabpanel-2022-fiscalite_annees" class="fr-tabs__tab" tabindex="-1" role="tab" aria-label="2022" aria-selected="false" aria-controls="tabpanel-2022-fiscalite_annees-panel">2022</button></li>
       </ul>
-      <div id="tabpanel-2021-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-2021-271" tabindex="0">
+      <div id="tabpanel-2021-fiscalite_annees-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-2021-fiscalite_annees" tabindex="0">
         <!----><strong>Cotisations</strong>
         <div class="_fiscalite-table_16f3a1">
           <div>a. Redevance communale</div>3 233 743,49&nbsp;€<div>b. Redevance départementale</div>668 910,58&nbsp;€<div>c. Taxe minière sur l’or de Guyane</div>
@@ -17,7 +17,7 @@
           <div>f. Frais de gestion de fiscalité directe locale (a+b+e)X 8%</div>346 165,13&nbsp;€<div>Somme à payer auprès du comptable (2)</div>4 673 229,20&nbsp;€
         </div>
       </div>
-      <div id="tabpanel-2022-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-end" role="tabpanel" aria-labelledby="tabpanel-2022-271" tabindex="0">
+      <div id="tabpanel-2022-fiscalite_annees-panel" class="fr-tabs__panel fr-tabs__panel--direction-end" role="tabpanel" aria-labelledby="tabpanel-2022-fiscalite_annees" tabindex="0">
         <!---->
       </div>
     </div>
diff --git a/packages/ui/src/components/entreprise/entreprise-fiscalite.stories_snapshots_Loading.html b/packages/ui/src/components/entreprise/entreprise-fiscalite.stories_snapshots_Loading.html
index c7eef7ddefb6c9dda4c1f064b7022a7c655d7555..1f7bd169aa1d11bfa699d7ec980cb85f90cb620b 100644
--- a/packages/ui/src/components/entreprise/entreprise-fiscalite.stories_snapshots_Loading.html
+++ b/packages/ui/src/components/entreprise/entreprise-fiscalite.stories_snapshots_Loading.html
@@ -2,10 +2,10 @@
   <h2>Fiscalité</h2>Calcul, à titre indicatif, du montant de l'imposition minière de votre entreprise (redevance départementale et communale des mines pour les substances non énergétiques et taxe aurifère)<div class="fr-mt-2w">
     <div class="fr-tabs" style="--tabs-height: 0px;">
       <ul class="fr-tabs__list" role="tablist" aria-label="Années">
-        <li role="presentation"><button id="tabpanel-2021-271" class="fr-tabs__tab" tabindex="0" role="tab" aria-label="2021" aria-selected="true" aria-controls="tabpanel-2021-271-panel">2021</button></li>
-        <li role="presentation"><button id="tabpanel-2022-271" class="fr-tabs__tab" tabindex="-1" role="tab" aria-label="2022" aria-selected="false" aria-controls="tabpanel-2022-271-panel">2022</button></li>
+        <li role="presentation"><button id="tabpanel-2021-fiscalite_annees" class="fr-tabs__tab" tabindex="0" role="tab" aria-label="2021" aria-selected="true" aria-controls="tabpanel-2021-fiscalite_annees-panel">2021</button></li>
+        <li role="presentation"><button id="tabpanel-2022-fiscalite_annees" class="fr-tabs__tab" tabindex="-1" role="tab" aria-label="2022" aria-selected="false" aria-controls="tabpanel-2022-fiscalite_annees-panel">2022</button></li>
       </ul>
-      <div id="tabpanel-2021-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-2021-271" tabindex="0">
+      <div id="tabpanel-2021-fiscalite_annees-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-2021-fiscalite_annees" tabindex="0">
         <!----><strong>Cotisations</strong>
         <div class="_fiscalite-table_16f3a1">
           <div>a. Redevance communale</div>
@@ -35,7 +35,7 @@
           </div>
         </div>
       </div>
-      <div id="tabpanel-2022-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-end" role="tabpanel" aria-labelledby="tabpanel-2022-271" tabindex="0">
+      <div id="tabpanel-2022-fiscalite_annees-panel" class="fr-tabs__panel fr-tabs__panel--direction-end" role="tabpanel" aria-labelledby="tabpanel-2022-fiscalite_annees" tabindex="0">
         <!---->
       </div>
     </div>
diff --git a/packages/ui/src/components/entreprise/entreprise-fiscalite.stories_snapshots_Ok.html b/packages/ui/src/components/entreprise/entreprise-fiscalite.stories_snapshots_Ok.html
index c051bea59cf904f95da5e434bbe4cc01b0ba2042..38757bc3cfd60406dc9fb2861662ef340ede0a50 100644
--- a/packages/ui/src/components/entreprise/entreprise-fiscalite.stories_snapshots_Ok.html
+++ b/packages/ui/src/components/entreprise/entreprise-fiscalite.stories_snapshots_Ok.html
@@ -2,13 +2,13 @@
   <h2>Fiscalité</h2>Calcul, à titre indicatif, du montant de l'imposition minière de votre entreprise (redevance départementale et communale des mines pour les substances non énergétiques et taxe aurifère)<div class="fr-mt-2w">
     <div class="fr-tabs" style="--tabs-height: 0px;">
       <ul class="fr-tabs__list" role="tablist" aria-label="Années">
-        <li role="presentation"><button id="tabpanel-2021-271" class="fr-tabs__tab" tabindex="-1" role="tab" aria-label="2021" aria-selected="false" aria-controls="tabpanel-2021-271-panel">2021</button></li>
-        <li role="presentation"><button id="tabpanel-2022-271" class="fr-tabs__tab" tabindex="0" role="tab" aria-label="2022" aria-selected="true" aria-controls="tabpanel-2022-271-panel">2022</button></li>
+        <li role="presentation"><button id="tabpanel-2021-fiscalite_annees" class="fr-tabs__tab" tabindex="-1" role="tab" aria-label="2021" aria-selected="false" aria-controls="tabpanel-2021-fiscalite_annees-panel">2021</button></li>
+        <li role="presentation"><button id="tabpanel-2022-fiscalite_annees" class="fr-tabs__tab" tabindex="0" role="tab" aria-label="2022" aria-selected="true" aria-controls="tabpanel-2022-fiscalite_annees-panel">2022</button></li>
       </ul>
-      <div id="tabpanel-2021-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-2021-271" tabindex="0">
+      <div id="tabpanel-2021-fiscalite_annees-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-2021-fiscalite_annees" tabindex="0">
         <!---->
       </div>
-      <div id="tabpanel-2022-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-2022-271" tabindex="0">
+      <div id="tabpanel-2022-fiscalite_annees-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-2022-fiscalite_annees" tabindex="0">
         <div class="fr-alert fr-alert--info fr-alert--sm fr-mb-1w">
           <p>Estimation effectuée sur la base des tarifs et des productions déclarées pour l'année 2021</p>
         </div><strong>Cotisations</strong>
diff --git a/packages/ui/src/components/entreprise/entreprise-fiscalite.stories_snapshots_WithError.html b/packages/ui/src/components/entreprise/entreprise-fiscalite.stories_snapshots_WithError.html
index ce3f870743a42b2c326adebad7e2559b49f8817f..b44d1d4068b43bee8f5cb89248a220e7cb624011 100644
--- a/packages/ui/src/components/entreprise/entreprise-fiscalite.stories_snapshots_WithError.html
+++ b/packages/ui/src/components/entreprise/entreprise-fiscalite.stories_snapshots_WithError.html
@@ -2,14 +2,14 @@
   <h2>Fiscalité</h2>Calcul, à titre indicatif, du montant de l'imposition minière de votre entreprise (redevance départementale et communale des mines pour les substances non énergétiques et taxe aurifère)<div class="fr-mt-2w">
     <div class="fr-tabs" style="--tabs-height: 0px;">
       <ul class="fr-tabs__list" role="tablist" aria-label="Années">
-        <li role="presentation"><button id="tabpanel-2021-271" class="fr-tabs__tab" tabindex="0" role="tab" aria-label="2021" aria-selected="true" aria-controls="tabpanel-2021-271-panel">2021</button></li>
-        <li role="presentation"><button id="tabpanel-2022-271" class="fr-tabs__tab" tabindex="-1" role="tab" aria-label="2022" aria-selected="false" aria-controls="tabpanel-2022-271-panel">2022</button></li>
+        <li role="presentation"><button id="tabpanel-2021-fiscalite_annees" class="fr-tabs__tab" tabindex="0" role="tab" aria-label="2021" aria-selected="true" aria-controls="tabpanel-2021-fiscalite_annees-panel">2021</button></li>
+        <li role="presentation"><button id="tabpanel-2022-fiscalite_annees" class="fr-tabs__tab" tabindex="-1" role="tab" aria-label="2022" aria-selected="false" aria-controls="tabpanel-2022-fiscalite_annees-panel">2022</button></li>
       </ul>
-      <div id="tabpanel-2021-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-2021-271" tabindex="0">
+      <div id="tabpanel-2021-fiscalite_annees-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-2021-fiscalite_annees" tabindex="0">
         <!----><strong>Cotisations</strong>
         <div class="_fiscalite-table_16f3a1">
           <div>a. Redevance communale</div>
-          <div class=" _fiscalite-value_16f3a1" style="display: flex; justify-content: center;">
+          <div class="_fiscalite-value_16f3a1" style="display: flex; justify-content: center;">
             <div class="fr-alert fr-alert--error fr-alert--sm">
               <p>Because reasons</p>
             </div>
@@ -17,7 +17,7 @@
             <!---->
           </div>
           <div>b. Redevance départementale</div>
-          <div class=" _fiscalite-value_16f3a1" style="display: flex; justify-content: center;">
+          <div class="_fiscalite-value_16f3a1" style="display: flex; justify-content: center;">
             <div class="fr-alert fr-alert--error fr-alert--sm">
               <p>Because reasons</p>
             </div>
@@ -26,7 +26,7 @@
           </div>
           <!---->
           <div>f. Frais de gestion de fiscalité directe locale (a+b)X 8%</div>
-          <div class=" _fiscalite-value_16f3a1" style="display: flex; justify-content: center;">
+          <div class="_fiscalite-value_16f3a1" style="display: flex; justify-content: center;">
             <div class="fr-alert fr-alert--error fr-alert--sm">
               <p>Because reasons</p>
             </div>
@@ -34,7 +34,7 @@
             <!---->
           </div>
           <div>Somme à payer auprès du comptable (2)</div>
-          <div class=" _fiscalite-value_16f3a1" style="display: flex; justify-content: center;">
+          <div class="_fiscalite-value_16f3a1" style="display: flex; justify-content: center;">
             <div class="fr-alert fr-alert--error fr-alert--sm">
               <p>Because reasons</p>
             </div>
@@ -43,7 +43,7 @@
           </div>
         </div>
       </div>
-      <div id="tabpanel-2022-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-end" role="tabpanel" aria-labelledby="tabpanel-2022-271" tabindex="0">
+      <div id="tabpanel-2022-fiscalite_annees-panel" class="fr-tabs__panel fr-tabs__panel--direction-end" role="tabpanel" aria-labelledby="tabpanel-2022-fiscalite_annees" tabindex="0">
         <!---->
       </div>
     </div>
diff --git a/packages/ui/src/components/entreprise/entreprise-fiscalite.tsx b/packages/ui/src/components/entreprise/entreprise-fiscalite.tsx
index 3e46dffbb7cb419570b1ad75cb7f4df8f8110a43..4d8942d6cf18f29217039fffd846dcc85dc1752e 100644
--- a/packages/ui/src/components/entreprise/entreprise-fiscalite.tsx
+++ b/packages/ui/src/components/entreprise/entreprise-fiscalite.tsx
@@ -68,7 +68,7 @@ export const EntrepriseFiscalite = defineComponent<Props>(props => {
         <>
           <h2>Fiscalité</h2>
           Calcul, à titre indicatif, du montant de l'imposition minière de votre entreprise (redevance départementale et communale des mines pour les substances non énergétiques et taxe aurifère)
-          <Tabs class="fr-mt-2w" tabs={tabs.value} tabsTitle="Années" initTab={tabId.value} tabClicked={tabUpdate} />
+          <Tabs class="fr-mt-2w" id="fiscalite_annees" tabs={tabs.value} tabsTitle="Années" initTab={tabId.value} tabClicked={tabUpdate} />
         </>
       ) : null}
     </div>
diff --git a/packages/ui/src/components/etape-edition.stories_snapshots_AffichageAide.html b/packages/ui/src/components/etape-edition.stories_snapshots_AffichageAide.html
index f82835e79f758d22f8103085597928e4f7041272..21700a4b84c031ec48bbe1a5bfd61414d466d859 100644
--- a/packages/ui/src/components/etape-edition.stories_snapshots_AffichageAide.html
+++ b/packages/ui/src/components/etape-edition.stories_snapshots_AffichageAide.html
@@ -18,18 +18,18 @@
             <div class="fr-col-12 fr-col-xl-6">
               <div class="fr-mb-1w">
                 <div style="display: flex;">
-                  <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Durée (années)
+                  <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="fondamentale_duree_annees">Durée (années)
                       <!---->
                       <!---->
                       <!---->
-                    </label><input class="fr-input" name="input_670" id="input_670" required="" type="number" value="0">
+                    </label><input class="fr-input" name="fondamentale_duree_annees" id="fondamentale_duree_annees" required="" type="number" value="0">
                     <!---->
                   </div>
-                  <div class="fr-input-group fr-ml-2w" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Durée (mois)
+                  <div class="fr-input-group fr-ml-2w" style="margin-bottom: 0px;"><label class="fr-label" for="fondamentale_duree_mois">Durée (mois)
                       <!---->
                       <!---->
                       <!---->
-                    </label><input class="fr-input" name="input_74" id="input_74" required="" type="number" value="0">
+                    </label><input class="fr-input" name="fondamentale_duree_mois" id="fondamentale_duree_mois" required="" type="number" value="0">
                     <!---->
                   </div>
                 </div>
@@ -186,9 +186,9 @@
                 </div>
                 <div class="fr-mb-1w">
                   <div>
-                    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_128">Franchissements de cours d'eau (optionnel)
+                    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="franchissements">Franchissements de cours d'eau (optionnel)
                         <!----><span class="fr-hint-text">Nombre de franchissements de cours d'eau</span>
-                      </label><input class="fr-input" name="input_128" id="input_128" type="number" min="0">
+                      </label><input class="fr-input" name="franchissements" id="franchissements" type="number" min="0">
                       <!---->
                     </div>
                   </div>
@@ -316,9 +316,9 @@
           <!---->
         </div>
       </div>
-      <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="textarea_453">Notes (optionnel)
+      <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="etape_notes">Notes (optionnel)
           <!---->
-        </label><textarea class="fr-input" name="textarea_453" id="textarea_453" value=""></textarea></div>
+        </label><textarea class="fr-input" name="etape_notes" id="etape_notes" value=""></textarea></div>
       <div class="fr-checkbox-group"><input name="archive" id="is_avertissement" type="checkbox"><label class="fr-label" for="is_avertissement">Cette note est un avertissement<span class="fr-hint-text">Apparait sur le résumé de la démarche</span></label></div>
     </div>
     <!---->
diff --git a/packages/ui/src/components/etape-edition.stories_snapshots_AxmEnZoneDuSdom.html b/packages/ui/src/components/etape-edition.stories_snapshots_AxmEnZoneDuSdom.html
index 815c56a4c94238ea16f18168cbbbbc353d2748ca..a9ffa3aa674522b31083583a8ebc7ae3e33ed2f5 100644
--- a/packages/ui/src/components/etape-edition.stories_snapshots_AxmEnZoneDuSdom.html
+++ b/packages/ui/src/components/etape-edition.stories_snapshots_AxmEnZoneDuSdom.html
@@ -18,18 +18,18 @@
             <div class="fr-col-12 fr-col-xl-6">
               <div class="fr-mb-1w">
                 <div style="display: flex;">
-                  <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Durée (années)
+                  <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="fondamentale_duree_annees">Durée (années)
                       <!---->
                       <!---->
                       <!---->
-                    </label><input class="fr-input" name="input_670" id="input_670" required="" type="number" value="0">
+                    </label><input class="fr-input" name="fondamentale_duree_annees" id="fondamentale_duree_annees" required="" type="number" value="0">
                     <!---->
                   </div>
-                  <div class="fr-input-group fr-ml-2w" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Durée (mois)
+                  <div class="fr-input-group fr-ml-2w" style="margin-bottom: 0px;"><label class="fr-label" for="fondamentale_duree_mois">Durée (mois)
                       <!---->
                       <!---->
                       <!---->
-                    </label><input class="fr-input" name="input_74" id="input_74" required="" type="number" value="6">
+                    </label><input class="fr-input" name="fondamentale_duree_mois" id="fondamentale_duree_mois" required="" type="number" value="6">
                     <!---->
                   </div>
                 </div>
@@ -364,9 +364,9 @@
           <!---->
         </div>
       </div>
-      <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="textarea_25">Notes (optionnel)
+      <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="etape_notes">Notes (optionnel)
           <!---->
-        </label><textarea class="fr-input" name="textarea_25" id="textarea_25" value=""></textarea></div>
+        </label><textarea class="fr-input" name="etape_notes" id="etape_notes" value=""></textarea></div>
       <div class="fr-checkbox-group"><input name="archive" id="is_avertissement" type="checkbox"><label class="fr-label" for="is_avertissement">Cette note est un avertissement<span class="fr-hint-text">Apparait sur le résumé de la démarche</span></label></div>
     </div>
     <!---->
diff --git a/packages/ui/src/components/etape-edition.stories_snapshots_Creation.html b/packages/ui/src/components/etape-edition.stories_snapshots_Creation.html
index 1911643e34237eafc66bab357459ae123a890705..7a153ab2c3d4ab5f9bee0ba61186b1f6f9caa7f6 100644
--- a/packages/ui/src/components/etape-edition.stories_snapshots_Creation.html
+++ b/packages/ui/src/components/etape-edition.stories_snapshots_Creation.html
@@ -12,10 +12,10 @@
       <div>
         <div class="fr-grid-row">
           <div class="fr-col-12 fr-col-xl-6">
-            <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Date
+            <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="etape_date">Date
                 <!----><span class="fr-hint-text">au format jj/mm/aaaa</span>
                 <!---->
-              </label><input class="fr-input" name="input_271" id="input_271" required="" type="date">
+              </label><input class="fr-input" name="etape_date" id="etape_date" required="" type="date">
               <!---->
             </div>
             <!---->
diff --git a/packages/ui/src/components/etape-edition.stories_snapshots_DemandeArmComplete.html b/packages/ui/src/components/etape-edition.stories_snapshots_DemandeArmComplete.html
index 2d2a1cf41cd2ea0d7d2fe3ac997e24628e1a96d6..4085705f8a1129eb6c6c6974584233454924c8c5 100644
--- a/packages/ui/src/components/etape-edition.stories_snapshots_DemandeArmComplete.html
+++ b/packages/ui/src/components/etape-edition.stories_snapshots_DemandeArmComplete.html
@@ -13,10 +13,10 @@
       <div>
         <div class="fr-grid-row">
           <div class="fr-col-12 fr-col-xl-6">
-            <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Date
+            <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="etape_date">Date
                 <!----><span class="fr-hint-text">au format jj/mm/aaaa</span>
                 <!---->
-              </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2023-02-01">
+              </label><input class="fr-input" name="etape_date" id="etape_date" required="" type="date" value="2023-02-01">
               <!---->
             </div>
             <div class="fr-mt-2w">
@@ -53,18 +53,18 @@
             <div class="fr-col-12 fr-col-xl-6">
               <div class="fr-mb-1w">
                 <div style="display: flex;">
-                  <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Durée (années)
+                  <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="fondamentale_duree_annees">Durée (années)
                       <!---->
                       <!---->
                       <!---->
-                    </label><input class="fr-input" name="input_74" id="input_74" required="" type="number" value="0">
+                    </label><input class="fr-input" name="fondamentale_duree_annees" id="fondamentale_duree_annees" required="" type="number" value="0">
                     <!---->
                   </div>
-                  <div class="fr-input-group fr-ml-2w" style="margin-bottom: 0px;"><label class="fr-label" for="input_878">Durée (mois)
+                  <div class="fr-input-group fr-ml-2w" style="margin-bottom: 0px;"><label class="fr-label" for="fondamentale_duree_mois">Durée (mois)
                       <!---->
                       <!---->
                       <!---->
-                    </label><input class="fr-input" name="input_878" id="input_878" required="" type="number" value="6">
+                    </label><input class="fr-input" name="fondamentale_duree_mois" id="fondamentale_duree_mois" required="" type="number" value="6">
                     <!---->
                   </div>
                 </div>
@@ -240,9 +240,9 @@
                 </div>
                 <div class="fr-mb-1w">
                   <div>
-                    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_453">Franchissements de cours d'eau (optionnel)
+                    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="franchissements">Franchissements de cours d'eau (optionnel)
                         <!----><span class="fr-hint-text">Nombre de franchissements de cours d'eau</span>
-                      </label><input class="fr-input" name="input_453" id="input_453" type="number" min="0" value="9">
+                      </label><input class="fr-input" name="franchissements" id="franchissements" type="number" min="0" value="9">
                       <!---->
                     </div>
                   </div>
@@ -270,85 +270,85 @@
                   <div>
                     <div class="fr-tabs" style="--tabs-height: 0px;">
                       <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-                        <li role="presentation"><button id="tabpanel-carte-487" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-487-panel">Carte</button></li>
-                        <li role="presentation"><button id="tabpanel-points-487" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-487-panel">Tableau</button></li>
+                        <li role="presentation"><button id="tabpanel-carte-perimetre_edit" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-perimetre_edit-panel">Carte</button></li>
+                        <li role="presentation"><button id="tabpanel-points-perimetre_edit" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-perimetre_edit-panel">Tableau</button></li>
                       </ul>
-                      <div id="tabpanel-carte-487-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-487" tabindex="0">
+                      <div id="tabpanel-carte-perimetre_edit-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-perimetre_edit" tabindex="0">
                         <!---->
                       </div>
-                      <div id="tabpanel-points-487-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-487" tabindex="0">
+                      <div id="tabpanel-points-perimetre_edit-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-perimetre_edit" tabindex="0">
                         <div style="display: flex; flex-direction: column;">
-                          <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_796">Système géographique</label>
-                            <div id="typeahead_geosysteme_796_wrapper" class="_typeahead_8eddf1">
-                              <div class="flex"><input id="typeahead_geosysteme_796" type="text" title="" name="typeahead_geosysteme_796" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_796-control" aria-activedescendant="typeahead_geosysteme_796-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
-                              <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_796-control" role="listbox">
-                                <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_796-control-0">
+                          <div class="fr-select-group"><label class="fr-label" for="4326">Système géographique</label>
+                            <div id="4326_wrapper" class="_typeahead_8eddf1">
+                              <div class="flex"><input id="4326" type="text" title="" name="4326" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="4326-control" aria-activedescendant="4326-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+                              <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="4326-control" role="listbox">
+                                <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="4326-control-0">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_796-control-1">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-1">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_796-control-2">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-2">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_796-control-3">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-3">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_796-control-4">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-4">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_796-control-5">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-5">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_796-control-6">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-6">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_796-control-7">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-7">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_796-control-8">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-8">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_796-control-9">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-9">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_796-control-10">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-10">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_796-control-11">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-11">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_796-control-12">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-12">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_796-control-13">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-13">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_796-control-14">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-14">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_796-control-15">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-15">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_796-control-16">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-16">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_796-control-17">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-17">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_796-control-18">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-18">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_796-control-19">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-19">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_796-control-20">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-20">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_796-control-21">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-21">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_796-control-22">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-22">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                                 </li>
                               </ul>
@@ -589,7 +589,7 @@
                             </td>
                             <td>
                               <div class="fr-select-group">
-                                <!----><select class="fr-select" id="select_482" aria-label="Choix du document pour [object Object]" name="select_482" value="2023-06-03-atf-ueoau">
+                                <!----><select class="fr-select" id="2023-06-03-atf-ueoau" aria-label="Choix du document pour [object Object]" name="2023-06-03-atf-ueoau" value="2023-06-03-atf-ueoau">
                                   <option selected="" disabled="" value="2023-06-03-atf-ueoau">Attestation fiscale : Attestation sur l'honneur (03-06-2023)</option>
                                   <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                                   <option disabled="" hidden="" value="">Selectionnez une option</option>
@@ -608,7 +608,7 @@
                             </td>
                             <td>
                               <div class="fr-select-group">
-                                <!----><select class="fr-select" id="select_585" aria-label="Choix du document pour [object Object]" name="select_585" value="2023-06-23-cur-ueoau">
+                                <!----><select class="fr-select" id="2023-06-23-cur-ueoau" aria-label="Choix du document pour [object Object]" name="2023-06-23-cur-ueoau" value="2023-06-23-cur-ueoau">
                                   <option selected="" disabled="" value="2023-06-23-cur-ueoau">Curriculum vitae : Jon. Doe (23-06-2023)</option>
                                   <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                                   <option disabled="" hidden="" value="">Selectionnez une option</option>
@@ -627,7 +627,7 @@
                             </td>
                             <td>
                               <div class="fr-select-group">
-                                <!----><select class="fr-select" id="select_759" aria-label="Choix du document pour [object Object]" name="select_759" value="2023-06-23-idm-ueoaue">
+                                <!----><select class="fr-select" id="2023-06-23-idm-ueoaue" aria-label="Choix du document pour [object Object]" name="2023-06-23-idm-ueoaue" value="2023-06-23-idm-ueoaue">
                                   <option selected="" disabled="" value="2023-06-23-idm-ueoaue">Identification de matériel : Facture pelle (23-06-2023)</option>
                                   <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                                   <option disabled="" hidden="" value="">Selectionnez une option</option>
@@ -646,7 +646,7 @@
                             </td>
                             <td>
                               <div class="fr-select-group">
-                                <!----><select class="fr-select" id="select_58" aria-label="Choix du document pour [object Object]" name="select_58" value="2023-06-23-jid-eaoueo">
+                                <!----><select class="fr-select" id="2023-06-23-jid-eaoueo" aria-label="Choix du document pour [object Object]" name="2023-06-23-jid-eaoueo" value="2023-06-23-jid-eaoueo">
                                   <option selected="" disabled="" value="2023-06-23-jid-eaoueo">Justificatif d'identité : Jon. Doe (23-06-2023)</option>
                                   <option value="2023-06-23-jid-ueoau">Justificatif d'identité : Arm. Strong (23-06-2023)</option>
                                   <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
@@ -666,7 +666,7 @@
                             </td>
                             <td>
                               <div class="fr-select-group">
-                                <!----><select class="fr-select" id="select_661" aria-label="Choix du document pour [object Object]" name="select_661" value="2023-06-23-jct-ueoau">
+                                <!----><select class="fr-select" id="2023-06-23-jct-ueoau" aria-label="Choix du document pour [object Object]" name="2023-06-23-jct-ueoau" value="2023-06-23-jct-ueoau">
                                   <option selected="" disabled="" value="2023-06-23-jct-ueoau">Justificatif des capacités techniques : (23-06-2023)</option>
                                   <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                                   <option disabled="" hidden="" value="">Selectionnez une option</option>
@@ -685,7 +685,7 @@
                             </td>
                             <td>
                               <div class="fr-select-group">
-                                <!----><select class="fr-select" id="select_684" aria-label="Choix du document pour [object Object]" name="select_684" value="2023-06-08-kbi-ueoau">
+                                <!----><select class="fr-select" id="2023-06-08-kbi-ueoau" aria-label="Choix du document pour [object Object]" name="2023-06-08-kbi-ueoau" value="2023-06-08-kbi-ueoau">
                                   <option selected="" disabled="" value="2023-06-08-kbi-ueoau">Kbis : (08-06-2023)</option>
                                   <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                                   <option disabled="" hidden="" value="">Selectionnez une option</option>
@@ -704,7 +704,7 @@
                             </td>
                             <td>
                               <div class="fr-select-group">
-                                <!----><select class="fr-select" id="select_624" aria-label="Choix du document pour [object Object]" name="select_624" value="2023-06-23-jcf-uueoau">
+                                <!----><select class="fr-select" id="2023-06-23-jcf-uueoau" aria-label="Choix du document pour [object Object]" name="2023-06-23-jcf-uueoau" value="2023-06-23-jcf-uueoau">
                                   <option selected="" disabled="" value="2023-06-23-jcf-uueoau">Justificatif des capacités financières : (23-06-2023)</option>
                                   <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                                   <option disabled="" hidden="" value="">Selectionnez une option</option>
@@ -718,7 +718,7 @@
                           <tr>
                             <td>
                               <div class="fr-select-group">
-                                <!----><select class="fr-select" id="select_267" aria-label="Ajouter un nouveau type de document" name="select_267">
+                                <!----><select class="fr-select" id="nouveau_document_type" aria-label="Ajouter un nouveau type de document" name="nouveau_document_type">
                                   <option value="atf">Attestation fiscale</option>
                                   <option value="sir">Avis de situation au répertoire Sirene</option>
                                   <option value="cur">Curriculum vitae</option>
@@ -745,9 +745,9 @@
           <!---->
         </div>
       </div>
-      <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="textarea_216">Notes (optionnel)
+      <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="etape_notes">Notes (optionnel)
           <!---->
-        </label><textarea class="fr-input" name="textarea_216" id="textarea_216" value=""></textarea></div>
+        </label><textarea class="fr-input" name="etape_notes" id="etape_notes" value=""></textarea></div>
       <div class="fr-checkbox-group"><input name="archive" id="is_avertissement" type="checkbox"><label class="fr-label" for="is_avertissement">Cette note est un avertissement<span class="fr-hint-text">Apparait sur le résumé de la démarche</span></label></div>
     </div>
     <!---->
diff --git a/packages/ui/src/components/etape-edition.stories_snapshots_Modification.html b/packages/ui/src/components/etape-edition.stories_snapshots_Modification.html
index aa4e366ba4defe4d59ce4bc1f4b777478fe419c8..bd77bc32af122012c9d97f6146e3bd90236ae021 100644
--- a/packages/ui/src/components/etape-edition.stories_snapshots_Modification.html
+++ b/packages/ui/src/components/etape-edition.stories_snapshots_Modification.html
@@ -18,18 +18,18 @@
             <div class="fr-col-12 fr-col-xl-6">
               <div class="fr-mb-1w">
                 <div style="display: flex;">
-                  <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Durée (années)
+                  <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="fondamentale_duree_annees">Durée (années)
                       <!---->
                       <!---->
                       <!---->
-                    </label><input class="fr-input" name="input_670" id="input_670" required="" type="number" value="0">
+                    </label><input class="fr-input" name="fondamentale_duree_annees" id="fondamentale_duree_annees" required="" type="number" value="0">
                     <!---->
                   </div>
-                  <div class="fr-input-group fr-ml-2w" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Durée (mois)
+                  <div class="fr-input-group fr-ml-2w" style="margin-bottom: 0px;"><label class="fr-label" for="fondamentale_duree_mois">Durée (mois)
                       <!---->
                       <!---->
                       <!---->
-                    </label><input class="fr-input" name="input_74" id="input_74" required="" type="number" value="0">
+                    </label><input class="fr-input" name="fondamentale_duree_mois" id="fondamentale_duree_mois" required="" type="number" value="0">
                     <!---->
                   </div>
                 </div>
@@ -186,9 +186,9 @@
                 </div>
                 <div class="fr-mb-1w">
                   <div>
-                    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_128">Franchissements de cours d'eau (optionnel)
+                    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="franchissements">Franchissements de cours d'eau (optionnel)
                         <!----><span class="fr-hint-text">Nombre de franchissements de cours d'eau</span>
-                      </label><input class="fr-input" name="input_128" id="input_128" type="number" min="0">
+                      </label><input class="fr-input" name="franchissements" id="franchissements" type="number" min="0">
                       <!---->
                     </div>
                   </div>
@@ -316,9 +316,9 @@
           <!---->
         </div>
       </div>
-      <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="textarea_453">Notes (optionnel)
+      <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="etape_notes">Notes (optionnel)
           <!---->
-        </label><textarea class="fr-input" name="textarea_453" id="textarea_453" value=""></textarea></div>
+        </label><textarea class="fr-input" name="etape_notes" id="etape_notes" value=""></textarea></div>
       <div class="fr-checkbox-group"><input name="archive" id="is_avertissement" type="checkbox"><label class="fr-label" for="is_avertissement">Cette note est un avertissement<span class="fr-hint-text">Apparait sur le résumé de la démarche</span></label></div>
     </div>
     <!---->
diff --git a/packages/ui/src/components/etape-edition.stories_snapshots_ModificationDemandeHeritee.html b/packages/ui/src/components/etape-edition.stories_snapshots_ModificationDemandeHeritee.html
index 52bf5b57113c3985b80ff9aa7b232af84d05d5a4..073b21776314ef4cd9e01c5ed19929dae948df81 100644
--- a/packages/ui/src/components/etape-edition.stories_snapshots_ModificationDemandeHeritee.html
+++ b/packages/ui/src/components/etape-edition.stories_snapshots_ModificationDemandeHeritee.html
@@ -13,10 +13,10 @@
       <div>
         <div class="fr-grid-row">
           <div class="fr-col-12 fr-col-xl-6">
-            <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Date
+            <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="etape_date">Date
                 <!----><span class="fr-hint-text">au format jj/mm/aaaa</span>
                 <!---->
-              </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2023-02-01">
+              </label><input class="fr-input" name="etape_date" id="etape_date" required="" type="date" value="2023-02-01">
               <!---->
             </div>
             <div class="fr-mt-2w">
@@ -54,24 +54,24 @@
               <div class="fr-mb-1w">
                 <div>
                   <div style="display: flex;">
-                    <div class="fr-input-group fr-input-group--disabled" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Durée (années)
+                    <div class="fr-input-group fr-input-group--disabled" style="margin-bottom: 0px;"><label class="fr-label" for="fondamentale_duree_annees_heritee">Durée (années)
                         <!---->
                         <!---->
                         <!---->
-                      </label><input class="fr-input" name="input_74" id="input_74" disabled="" required="" type="number" value="1">
+                      </label><input class="fr-input" name="fondamentale_duree_annees_heritee" id="fondamentale_duree_annees_heritee" disabled="" required="" type="number" value="1">
                       <!---->
                     </div>
-                    <div class="fr-input-group fr-input-group--disabled fr-ml-2w" style="margin-bottom: 0px;"><label class="fr-label" for="input_878">Durée (mois)
+                    <div class="fr-input-group fr-input-group--disabled fr-ml-2w" style="margin-bottom: 0px;"><label class="fr-label" for="fondamentale_duree_mois_heritee">Durée (mois)
                         <!---->
                         <!---->
                         <!---->
-                      </label><input class="fr-input" name="input_878" id="input_878" disabled="" required="" type="number" value="0">
+                      </label><input class="fr-input" name="fondamentale_duree_mois_heritee" id="fondamentale_duree_mois_heritee" disabled="" required="" type="number" value="0">
                       <!---->
                     </div>
                   </div>
                 </div>
                 <div class="fr-pt-2w fr-pb-2w">
-                  <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="toggle_967"><label class="fr-toggle__label" for="toggle_967" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
+                  <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="heritage_duree"><label class="fr-toggle__label" for="heritage_duree" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
                     <!---->
                   </div>
                 </div>
@@ -86,7 +86,7 @@
                   </div>
                 </div>
                 <div class="fr-pt-2w fr-pb-2w">
-                  <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="toggle_128"><label class="fr-toggle__label" for="toggle_128" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
+                  <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="heritage_titulaires"><label class="fr-toggle__label" for="heritage_titulaires" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
                     <!---->
                   </div>
                 </div>
@@ -101,7 +101,7 @@
                   </div>
                 </div>
                 <div class="fr-pt-2w fr-pb-2w">
-                  <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="toggle_453"><label class="fr-toggle__label" for="toggle_453" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
+                  <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="heritage_substances"><label class="fr-toggle__label" for="heritage_substances" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
                     <!---->
                   </div>
                 </div>
@@ -132,7 +132,7 @@
                     </div>
                   </div>
                   <div class="fr-pt-2w fr-pb-2w">
-                    <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="toggle_487"><label class="fr-toggle__label" for="toggle_487" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
+                    <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="heritage_prospection-mecanisee"><label class="fr-toggle__label" for="heritage_prospection-mecanisee" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
                       <!---->
                     </div>
                   </div>
@@ -145,7 +145,7 @@
                     </div>
                   </div>
                   <div class="fr-pt-2w fr-pb-2w">
-                    <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="toggle_216"><label class="fr-toggle__label" for="toggle_216" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
+                    <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="heritage_franchissements-de-cours-d-eau"><label class="fr-toggle__label" for="heritage_franchissements-de-cours-d-eau" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
                       <!---->
                     </div>
                   </div>
@@ -170,85 +170,85 @@
                   <div>
                     <div class="fr-tabs" style="--tabs-height: 0px;">
                       <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-                        <li role="presentation"><button id="tabpanel-carte-585" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-585-panel">Carte</button></li>
-                        <li role="presentation"><button id="tabpanel-points-585" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-585-panel">Tableau</button></li>
+                        <li role="presentation"><button id="tabpanel-carte-perimetre_edit" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-perimetre_edit-panel">Carte</button></li>
+                        <li role="presentation"><button id="tabpanel-points-perimetre_edit" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-perimetre_edit-panel">Tableau</button></li>
                       </ul>
-                      <div id="tabpanel-carte-585-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-585" tabindex="0">
+                      <div id="tabpanel-carte-perimetre_edit-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-perimetre_edit" tabindex="0">
                         <!---->
                       </div>
-                      <div id="tabpanel-points-585-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-585" tabindex="0">
+                      <div id="tabpanel-points-perimetre_edit-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-perimetre_edit" tabindex="0">
                         <div style="display: flex; flex-direction: column;">
-                          <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_759">Système géographique</label>
-                            <div id="typeahead_geosysteme_759_wrapper" class="_typeahead_8eddf1">
-                              <div class="flex"><input id="typeahead_geosysteme_759" type="text" title="" name="typeahead_geosysteme_759" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_759-control" aria-activedescendant="typeahead_geosysteme_759-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
-                              <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_759-control" role="listbox">
-                                <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_759-control-0">
+                          <div class="fr-select-group"><label class="fr-label" for="4326">Système géographique</label>
+                            <div id="4326_wrapper" class="_typeahead_8eddf1">
+                              <div class="flex"><input id="4326" type="text" title="" name="4326" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="4326-control" aria-activedescendant="4326-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+                              <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="4326-control" role="listbox">
+                                <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="4326-control-0">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_759-control-1">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-1">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_759-control-2">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-2">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_759-control-3">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-3">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_759-control-4">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-4">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_759-control-5">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-5">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_759-control-6">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-6">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_759-control-7">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-7">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_759-control-8">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-8">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_759-control-9">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-9">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_759-control-10">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-10">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_759-control-11">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-11">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_759-control-12">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-12">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_759-control-13">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-13">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_759-control-14">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-14">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_759-control-15">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-15">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_759-control-16">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-16">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_759-control-17">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-17">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_759-control-18">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-18">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_759-control-19">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-19">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_759-control-20">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-20">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_759-control-21">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-21">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                                 </li>
-                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_759-control-22">
+                                <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-22">
                                   <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                                 </li>
                               </ul>
@@ -316,7 +316,7 @@
                 </div>
               </div>
               <div class="fr-pt-2w fr-pb-2w">
-                <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="toggle_58"><label class="fr-toggle__label" for="toggle_58" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
+                <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="heritage_perimetre"><label class="fr-toggle__label" for="heritage_perimetre" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
                   <!---->
                 </div>
               </div>
@@ -420,7 +420,7 @@
                           <tr>
                             <td>
                               <div class="fr-select-group">
-                                <!----><select class="fr-select" id="select_684" aria-label="Ajouter un nouveau type de document" name="select_684">
+                                <!----><select class="fr-select" id="nouveau_document_type" aria-label="Ajouter un nouveau type de document" name="nouveau_document_type">
                                   <option value="atf">Attestation fiscale</option>
                                   <option value="jcf">Justificatif des capacités financières</option>
                                   <option selected="" disabled="" hidden="" value="">Selectionnez une option</option>
@@ -441,9 +441,9 @@
           <!---->
         </div>
       </div>
-      <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="textarea_661">Notes (optionnel)
+      <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="etape_notes">Notes (optionnel)
           <!---->
-        </label><textarea class="fr-input" name="textarea_661" id="textarea_661" value=""></textarea></div>
+        </label><textarea class="fr-input" name="etape_notes" id="etape_notes" value=""></textarea></div>
       <div class="fr-checkbox-group"><input name="archive" id="is_avertissement" type="checkbox"><label class="fr-label" for="is_avertissement">Cette note est un avertissement<span class="fr-hint-text">Apparait sur le résumé de la démarche</span></label></div>
     </div>
     <!---->
diff --git a/packages/ui/src/components/etape/add-etape-avis-popup.stories_snapshots_AvisDeLaMissionAutoriteEnvironnementaleADesStatutsDifferents.html b/packages/ui/src/components/etape/add-etape-avis-popup.stories_snapshots_AvisDeLaMissionAutoriteEnvironnementaleADesStatutsDifferents.html
index 94274f12efa6ba0839a63f9787d1b7e9e3657012..bd2b7a603f14cf9932bc413038a782799b340fff 100644
--- a/packages/ui/src/components/etape/add-etape-avis-popup.stories_snapshots_AvisDeLaMissionAutoriteEnvironnementaleADesStatutsDifferents.html
+++ b/packages/ui/src/components/etape/add-etape-avis-popup.stories_snapshots_AvisDeLaMissionAutoriteEnvironnementaleADesStatutsDifferents.html
@@ -16,48 +16,48 @@
                       <div class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier (optionnel)<span class="fr-hint-text">Taille maximale : 100 Mo. Format<!----> supporté<!----> : pdf.</span></label><input class="fr-upload" type="file" id="file-upload" name="file-upload" accept=".pdf"></div>
                     </div>
                     <div class="fr-fieldset__element">
-                      <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Date
+                      <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="nouvel_avis_date">Date
                           <!----><span class="fr-hint-text">au format jj/mm/aaaa</span>
                           <!---->
-                        </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2023-01-02">
+                        </label><input class="fr-input" name="nouvel_avis_date" id="nouvel_avis_date" required="" type="date" value="2023-01-02">
                         <!---->
                       </div>
                     </div>
                     <div class="fr-fieldset__element">
-                      <div class="fr-select-group"><label class="fr-label" for="select_670">Statut
+                      <div class="fr-select-group"><label class="fr-label" for="nouvel_avis_statut">Statut
                           <!---->
-                        </label><select class="fr-select" id="select_670" aria-label="Statut" name="select_670" value="Exempté">
+                        </label><select class="fr-select" id="nouvel_avis_statut" aria-label="Statut" name="nouvel_avis_statut" value="Exempté">
                           <option selected="" value="Exempté">Exempté</option>
                           <option value="Requis">Requis</option>
                           <option disabled="" hidden="" value="">Selectionnez une option</option>
                         </select></div>
                     </div>
                     <div class="fr-fieldset__element">
-                      <fieldset class="fr-fieldset" id="radio_74" aria-labelledby="radio_74-legend" style="flex-direction: column; align-items: flex-start;">
-                        <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_74-legend">Visibilité
+                      <fieldset class="fr-fieldset" id="avis_visibility" aria-labelledby="avis_visibility-legend" style="flex-direction: column; align-items: flex-start;">
+                        <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="avis_visibility-legend">Visibilité
                           <!---->
                         </legend>
                         <div class="fr-fieldset__element">
-                          <div class="fr-radio-group"><input type="radio" id="radio_74-0" name="radio_74"><label class="fr-label" for="radio_74-0">Public
+                          <div class="fr-radio-group"><input type="radio" id="avis_visibility-0" name="avis_visibility"><label class="fr-label" for="avis_visibility-0">Public
                               <!---->
                             </label></div>
                         </div>
                         <div class="fr-fieldset__element">
-                          <div class="fr-radio-group"><input type="radio" id="radio_74-1" checked="" name="radio_74"><label class="fr-label" for="radio_74-1">Visible par les administrations et les entreprises titulaires
+                          <div class="fr-radio-group"><input type="radio" id="avis_visibility-1" checked="" name="avis_visibility"><label class="fr-label" for="avis_visibility-1">Visible par les administrations et les entreprises titulaires
                               <!---->
                             </label></div>
                         </div>
                         <div class="fr-fieldset__element">
-                          <div class="fr-radio-group"><input type="radio" id="radio_74-2" name="radio_74"><label class="fr-label" for="radio_74-2">Visible par les administrations
+                          <div class="fr-radio-group"><input type="radio" id="avis_visibility-2" name="avis_visibility"><label class="fr-label" for="avis_visibility-2">Visible par les administrations
                               <!---->
                             </label></div>
                         </div>
                       </fieldset>
                     </div>
                     <div class="fr-fieldset__element">
-                      <div class="fr-input-group"><label class="fr-label" for="textarea_878">Description (optionnel)
+                      <div class="fr-input-group"><label class="fr-label" for="avis_description">Description (optionnel)
                           <!---->
-                        </label><textarea class="fr-input" name="textarea_878" id="textarea_878" value="description"></textarea></div>
+                        </label><textarea class="fr-input" name="avis_description" id="avis_description" value="description"></textarea></div>
                     </div>
                   </fieldset>
                 </form>
diff --git a/packages/ui/src/components/etape/add-etape-avis-popup.stories_snapshots_AvisObligatoireSuppressionDuStatutNonRenseigne.html b/packages/ui/src/components/etape/add-etape-avis-popup.stories_snapshots_AvisObligatoireSuppressionDuStatutNonRenseigne.html
index 8db6b881d9c9f3e470763d92e9c1aab1281d4e04..6471d23c59108f19650e3323a574f82f73d32a00 100644
--- a/packages/ui/src/components/etape/add-etape-avis-popup.stories_snapshots_AvisObligatoireSuppressionDuStatutNonRenseigne.html
+++ b/packages/ui/src/components/etape/add-etape-avis-popup.stories_snapshots_AvisObligatoireSuppressionDuStatutNonRenseigne.html
@@ -16,17 +16,17 @@
                       <div class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier (optionnel)<span class="fr-hint-text">Taille maximale : 100 Mo. Format<!----> supporté<!----> : pdf.</span></label><input class="fr-upload" type="file" id="file-upload" name="file-upload" accept=".pdf"></div>
                     </div>
                     <div class="fr-fieldset__element">
-                      <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Date
+                      <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="nouvel_avis_date">Date
                           <!----><span class="fr-hint-text">au format jj/mm/aaaa</span>
                           <!---->
-                        </label><input class="fr-input" name="input_271" id="input_271" required="" type="date">
+                        </label><input class="fr-input" name="nouvel_avis_date" id="nouvel_avis_date" required="" type="date">
                         <!---->
                       </div>
                     </div>
                     <div class="fr-fieldset__element">
-                      <div class="fr-select-group"><label class="fr-label" for="select_670">Statut
+                      <div class="fr-select-group"><label class="fr-label" for="nouvel_avis_statut">Statut
                           <!---->
-                        </label><select class="fr-select" id="select_670" aria-label="Statut" name="select_670">
+                        </label><select class="fr-select" id="nouvel_avis_statut" aria-label="Statut" name="nouvel_avis_statut">
                           <option value="Favorable">Favorable</option>
                           <option value="Défavorable">Défavorable</option>
                           <option value="Favorable avec réserves">Favorable avec réserves</option>
@@ -34,31 +34,31 @@
                         </select></div>
                     </div>
                     <div class="fr-fieldset__element">
-                      <fieldset class="fr-fieldset" id="radio_74" aria-labelledby="radio_74-legend" style="flex-direction: column; align-items: flex-start;">
-                        <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_74-legend">Visibilité
+                      <fieldset class="fr-fieldset" id="avis_visibility" aria-labelledby="avis_visibility-legend" style="flex-direction: column; align-items: flex-start;">
+                        <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="avis_visibility-legend">Visibilité
                           <!---->
                         </legend>
                         <div class="fr-fieldset__element">
-                          <div class="fr-radio-group"><input type="radio" id="radio_74-0" name="radio_74"><label class="fr-label" for="radio_74-0">Public
+                          <div class="fr-radio-group"><input type="radio" id="avis_visibility-0" name="avis_visibility"><label class="fr-label" for="avis_visibility-0">Public
                               <!---->
                             </label></div>
                         </div>
                         <div class="fr-fieldset__element">
-                          <div class="fr-radio-group"><input type="radio" id="radio_74-1" name="radio_74"><label class="fr-label" for="radio_74-1">Visible par les administrations et les entreprises titulaires
+                          <div class="fr-radio-group"><input type="radio" id="avis_visibility-1" name="avis_visibility"><label class="fr-label" for="avis_visibility-1">Visible par les administrations et les entreprises titulaires
                               <!---->
                             </label></div>
                         </div>
                         <div class="fr-fieldset__element">
-                          <div class="fr-radio-group"><input type="radio" id="radio_74-2" name="radio_74"><label class="fr-label" for="radio_74-2">Visible par les administrations
+                          <div class="fr-radio-group"><input type="radio" id="avis_visibility-2" name="avis_visibility"><label class="fr-label" for="avis_visibility-2">Visible par les administrations
                               <!---->
                             </label></div>
                         </div>
                       </fieldset>
                     </div>
                     <div class="fr-fieldset__element">
-                      <div class="fr-input-group"><label class="fr-label" for="textarea_878">Description (optionnel)
+                      <div class="fr-input-group"><label class="fr-label" for="avis_description">Description (optionnel)
                           <!---->
-                        </label><textarea class="fr-input" name="textarea_878" id="textarea_878" value=""></textarea></div>
+                        </label><textarea class="fr-input" name="avis_description" id="avis_description" value=""></textarea></div>
                     </div>
                   </fieldset>
                 </form>
diff --git a/packages/ui/src/components/etape/add-etape-avis-popup.stories_snapshots_DocumentInitialDejaSauvegarde.html b/packages/ui/src/components/etape/add-etape-avis-popup.stories_snapshots_DocumentInitialDejaSauvegarde.html
index 251fe5a31affe2893d213fda1090bcf464b4905a..ee48156bbb74b61fcfcf992e1e13fca1cfaee03b 100644
--- a/packages/ui/src/components/etape/add-etape-avis-popup.stories_snapshots_DocumentInitialDejaSauvegarde.html
+++ b/packages/ui/src/components/etape/add-etape-avis-popup.stories_snapshots_DocumentInitialDejaSauvegarde.html
@@ -16,17 +16,17 @@
                       <div class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier (optionnel)<span class="fr-hint-text">Taille maximale : 100 Mo. Format<!----> supporté<!----> : pdf.</span></label><input class="fr-upload" type="file" id="file-upload" name="file-upload" accept=".pdf"></div>
                     </div>
                     <div class="fr-fieldset__element">
-                      <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Date
+                      <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="nouvel_avis_date">Date
                           <!----><span class="fr-hint-text">au format jj/mm/aaaa</span>
                           <!---->
-                        </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2023-01-02">
+                        </label><input class="fr-input" name="nouvel_avis_date" id="nouvel_avis_date" required="" type="date" value="2023-01-02">
                         <!---->
                       </div>
                     </div>
                     <div class="fr-fieldset__element">
-                      <div class="fr-select-group"><label class="fr-label" for="select_670">Statut
+                      <div class="fr-select-group"><label class="fr-label" for="nouvel_avis_statut">Statut
                           <!---->
-                        </label><select class="fr-select" id="select_670" aria-label="Statut" name="select_670" value="Favorable">
+                        </label><select class="fr-select" id="nouvel_avis_statut" aria-label="Statut" name="nouvel_avis_statut" value="Favorable">
                           <option selected="" value="Favorable">Favorable</option>
                           <option value="Défavorable">Défavorable</option>
                           <option value="Favorable avec réserves">Favorable avec réserves</option>
@@ -35,32 +35,32 @@
                         </select></div>
                     </div>
                     <div class="fr-fieldset__element">
-                      <fieldset class="fr-fieldset" id="radio_74" aria-labelledby="radio_74-legend" style="flex-direction: column; align-items: flex-start;">
-                        <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_74-legend">Visibilité
+                      <fieldset class="fr-fieldset" id="avis_visibility" aria-labelledby="avis_visibility-legend" style="flex-direction: column; align-items: flex-start;">
+                        <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="avis_visibility-legend">Visibilité
                           <!---->
                         </legend>
                         <div class="fr-fieldset__element">
-                          <div class="fr-radio-group"><input type="radio" id="radio_74-0" name="radio_74"><label class="fr-label" for="radio_74-0">Public
+                          <div class="fr-radio-group"><input type="radio" id="avis_visibility-0" name="avis_visibility"><label class="fr-label" for="avis_visibility-0">Public
                               <!---->
                             </label></div>
                         </div>
                         <div class="fr-fieldset__element">
-                          <div class="fr-radio-group"><input type="radio" id="radio_74-1" checked="" name="radio_74"><label class="fr-label" for="radio_74-1">Visible par les administrations et les entreprises titulaires
+                          <div class="fr-radio-group"><input type="radio" id="avis_visibility-1" checked="" name="avis_visibility"><label class="fr-label" for="avis_visibility-1">Visible par les administrations et les entreprises titulaires
                               <!---->
                             </label></div>
                         </div>
                         <div class="fr-fieldset__element">
-                          <div class="fr-radio-group"><input type="radio" id="radio_74-2" name="radio_74"><label class="fr-label" for="radio_74-2">Visible par les administrations
+                          <div class="fr-radio-group"><input type="radio" id="avis_visibility-2" name="avis_visibility"><label class="fr-label" for="avis_visibility-2">Visible par les administrations
                               <!---->
                             </label></div>
                         </div>
                       </fieldset>
                     </div>
                     <div class="fr-fieldset__element" style="order: -1;">
-                      <div class="fr-input-group"><label class="fr-label" for="textarea_878">Description
+                      <div class="fr-input-group"><label class="fr-label" for="avis_description">Description
                           <!---->
                           <!---->
-                        </label><textarea class="fr-input" name="textarea_878" id="textarea_878" required="" value="description"></textarea></div>
+                        </label><textarea class="fr-input" name="avis_description" id="avis_description" required="" value="description"></textarea></div>
                     </div>
                   </fieldset>
                 </form>
diff --git a/packages/ui/src/components/etape/add-etape-avis-popup.stories_snapshots_DocumentInitialTemporaire.html b/packages/ui/src/components/etape/add-etape-avis-popup.stories_snapshots_DocumentInitialTemporaire.html
index 411f218f424c9ea593452b9b21962f09ab0416c2..31c5de98bd012efb0fb04927dedec53acf35e716 100644
--- a/packages/ui/src/components/etape/add-etape-avis-popup.stories_snapshots_DocumentInitialTemporaire.html
+++ b/packages/ui/src/components/etape/add-etape-avis-popup.stories_snapshots_DocumentInitialTemporaire.html
@@ -16,17 +16,17 @@
                       <div class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier (optionnel)<span class="fr-hint-text">Taille maximale : 100 Mo. Format<!----> supporté<!----> : pdf.</span></label><input class="fr-upload" type="file" id="file-upload" name="file-upload" accept=".pdf"></div>
                     </div>
                     <div class="fr-fieldset__element">
-                      <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Date
+                      <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="nouvel_avis_date">Date
                           <!----><span class="fr-hint-text">au format jj/mm/aaaa</span>
                           <!---->
-                        </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2023-01-02">
+                        </label><input class="fr-input" name="nouvel_avis_date" id="nouvel_avis_date" required="" type="date" value="2023-01-02">
                         <!---->
                       </div>
                     </div>
                     <div class="fr-fieldset__element">
-                      <div class="fr-select-group"><label class="fr-label" for="select_670">Statut
+                      <div class="fr-select-group"><label class="fr-label" for="nouvel_avis_statut">Statut
                           <!---->
-                        </label><select class="fr-select" id="select_670" aria-label="Statut" name="select_670" value="Favorable">
+                        </label><select class="fr-select" id="nouvel_avis_statut" aria-label="Statut" name="nouvel_avis_statut" value="Favorable">
                           <option selected="" value="Favorable">Favorable</option>
                           <option value="Défavorable">Défavorable</option>
                           <option value="Favorable avec réserves">Favorable avec réserves</option>
@@ -35,32 +35,32 @@
                         </select></div>
                     </div>
                     <div class="fr-fieldset__element">
-                      <fieldset class="fr-fieldset" id="radio_74" aria-labelledby="radio_74-legend" style="flex-direction: column; align-items: flex-start;">
-                        <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_74-legend">Visibilité
+                      <fieldset class="fr-fieldset" id="avis_visibility" aria-labelledby="avis_visibility-legend" style="flex-direction: column; align-items: flex-start;">
+                        <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="avis_visibility-legend">Visibilité
                           <!---->
                         </legend>
                         <div class="fr-fieldset__element">
-                          <div class="fr-radio-group"><input type="radio" id="radio_74-0" name="radio_74"><label class="fr-label" for="radio_74-0">Public
+                          <div class="fr-radio-group"><input type="radio" id="avis_visibility-0" name="avis_visibility"><label class="fr-label" for="avis_visibility-0">Public
                               <!---->
                             </label></div>
                         </div>
                         <div class="fr-fieldset__element">
-                          <div class="fr-radio-group"><input type="radio" id="radio_74-1" name="radio_74"><label class="fr-label" for="radio_74-1">Visible par les administrations et les entreprises titulaires
+                          <div class="fr-radio-group"><input type="radio" id="avis_visibility-1" name="avis_visibility"><label class="fr-label" for="avis_visibility-1">Visible par les administrations et les entreprises titulaires
                               <!---->
                             </label></div>
                         </div>
                         <div class="fr-fieldset__element">
-                          <div class="fr-radio-group"><input type="radio" id="radio_74-2" checked="" name="radio_74"><label class="fr-label" for="radio_74-2">Visible par les administrations
+                          <div class="fr-radio-group"><input type="radio" id="avis_visibility-2" checked="" name="avis_visibility"><label class="fr-label" for="avis_visibility-2">Visible par les administrations
                               <!---->
                             </label></div>
                         </div>
                       </fieldset>
                     </div>
                     <div class="fr-fieldset__element" style="order: -1;">
-                      <div class="fr-input-group"><label class="fr-label" for="textarea_878">Description
+                      <div class="fr-input-group"><label class="fr-label" for="avis_description">Description
                           <!---->
                           <!---->
-                        </label><textarea class="fr-input" name="textarea_878" id="textarea_878" required="" value="description"></textarea></div>
+                        </label><textarea class="fr-input" name="avis_description" id="avis_description" required="" value="description"></textarea></div>
                     </div>
                   </fieldset>
                 </form>
diff --git a/packages/ui/src/components/etape/add-etape-avis-popup.stories_snapshots_SansDocumentInitial.html b/packages/ui/src/components/etape/add-etape-avis-popup.stories_snapshots_SansDocumentInitial.html
index af729ec331940aa4a7d9683890671c5d97159452..c4b78b5830b2af15f088c9cc521385122c2c3e40 100644
--- a/packages/ui/src/components/etape/add-etape-avis-popup.stories_snapshots_SansDocumentInitial.html
+++ b/packages/ui/src/components/etape/add-etape-avis-popup.stories_snapshots_SansDocumentInitial.html
@@ -51,47 +51,47 @@
                       <div class="fr-upload-group"><label class="fr-label" for="file-upload">Ajouter un fichier (optionnel)<span class="fr-hint-text">Taille maximale : 100 Mo. Format<!----> supporté<!----> : pdf.</span></label><input class="fr-upload" type="file" id="file-upload" name="file-upload" accept=".pdf"></div>
                     </div>
                     <div class="fr-fieldset__element">
-                      <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Date
+                      <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="nouvel_avis_date">Date
                           <!----><span class="fr-hint-text">au format jj/mm/aaaa</span>
                           <!---->
-                        </label><input class="fr-input" name="input_271" id="input_271" required="" type="date">
+                        </label><input class="fr-input" name="nouvel_avis_date" id="nouvel_avis_date" required="" type="date">
                         <!---->
                       </div>
                     </div>
                     <div class="fr-fieldset__element">
-                      <div class="fr-select-group fr-select-group--disabled"><label class="fr-label" for="select_670">Statut
+                      <div class="fr-select-group fr-select-group--disabled"><label class="fr-label" for="nouvel_avis_statut">Statut
                           <!---->
-                        </label><select class="fr-select" id="select_670" aria-label="Statut" disabled="" name="select_670">
+                        </label><select class="fr-select" id="nouvel_avis_statut" aria-label="Statut" disabled="" name="nouvel_avis_statut">
                           <option value="Non renseigné">Non renseigné</option>
                           <option selected="" disabled="" hidden="" value="">Selectionnez une option</option>
                         </select></div>
                     </div>
                     <div class="fr-fieldset__element">
-                      <fieldset class="fr-fieldset" id="radio_74" aria-labelledby="radio_74-legend" style="flex-direction: column; align-items: flex-start;">
-                        <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_74-legend">Visibilité
+                      <fieldset class="fr-fieldset" id="avis_visibility" aria-labelledby="avis_visibility-legend" style="flex-direction: column; align-items: flex-start;">
+                        <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="avis_visibility-legend">Visibilité
                           <!---->
                         </legend>
                         <div class="fr-fieldset__element">
-                          <div class="fr-radio-group"><input type="radio" id="radio_74-0" name="radio_74"><label class="fr-label" for="radio_74-0">Public
+                          <div class="fr-radio-group"><input type="radio" id="avis_visibility-0" name="avis_visibility"><label class="fr-label" for="avis_visibility-0">Public
                               <!---->
                             </label></div>
                         </div>
                         <div class="fr-fieldset__element">
-                          <div class="fr-radio-group"><input type="radio" id="radio_74-1" name="radio_74"><label class="fr-label" for="radio_74-1">Visible par les administrations et les entreprises titulaires
+                          <div class="fr-radio-group"><input type="radio" id="avis_visibility-1" name="avis_visibility"><label class="fr-label" for="avis_visibility-1">Visible par les administrations et les entreprises titulaires
                               <!---->
                             </label></div>
                         </div>
                         <div class="fr-fieldset__element">
-                          <div class="fr-radio-group"><input type="radio" id="radio_74-2" name="radio_74"><label class="fr-label" for="radio_74-2">Visible par les administrations
+                          <div class="fr-radio-group"><input type="radio" id="avis_visibility-2" name="avis_visibility"><label class="fr-label" for="avis_visibility-2">Visible par les administrations
                               <!---->
                             </label></div>
                         </div>
                       </fieldset>
                     </div>
                     <div class="fr-fieldset__element">
-                      <div class="fr-input-group"><label class="fr-label" for="textarea_878">Description (optionnel)
+                      <div class="fr-input-group"><label class="fr-label" for="avis_description">Description (optionnel)
                           <!---->
-                        </label><textarea class="fr-input" name="textarea_878" id="textarea_878" value=""></textarea></div>
+                        </label><textarea class="fr-input" name="avis_description" id="avis_description" value=""></textarea></div>
                     </div>
                   </fieldset>
                 </form>
diff --git a/packages/ui/src/components/etape/add-etape-avis-popup.tsx b/packages/ui/src/components/etape/add-etape-avis-popup.tsx
index 4f7c3605d521d2fdd5ae0921d9696e2d825fa214..0bec488bb3e52fa69bc9fbc774f68ce810ec67b8 100644
--- a/packages/ui/src/components/etape/add-etape-avis-popup.tsx
+++ b/packages/ui/src/components/etape/add-etape-avis-popup.tsx
@@ -85,10 +85,11 @@ export const AddEtapeAvisPopup = defineComponent<Props>(props => {
         </div>
 
         <div class="fr-fieldset__element">
-          <DsfrInput legend={{ main: 'Date' }} required={true} type={{ type: 'date' }} initialValue={avisDate.value} valueChanged={setAvisDate} />
+          <DsfrInput id="nouvel_avis_date" legend={{ main: 'Date' }} required={true} type={{ type: 'date' }} initialValue={avisDate.value} valueChanged={setAvisDate} />
         </div>
         <div class="fr-fieldset__element">
           <DsfrSelect
+            id="nouvel_avis_statut"
             legend={{ main: 'Statut' }}
             disabled={isNullOrUndefined(etapeAvisTypeId.value)}
             required={true}
@@ -99,10 +100,23 @@ export const AddEtapeAvisPopup = defineComponent<Props>(props => {
         </div>
 
         <div class="fr-fieldset__element">
-          <DsfrInputRadio legend={{ main: 'Visibilité' }} required={true} elements={visibilityChoices.value} initialValue={avisVisibilityId.value} valueChanged={visibilityChange} />
+          <DsfrInputRadio
+            id="avis_visibility"
+            legend={{ main: 'Visibilité' }}
+            required={true}
+            elements={visibilityChoices.value}
+            initialValue={avisVisibilityId.value}
+            valueChanged={visibilityChange}
+          />
         </div>
         <div class="fr-fieldset__element" style={{ order: etapeAvisTypeId.value === AVIS_TYPES.autreAvis ? -1 : undefined }}>
-          <DsfrTextarea required={etapeAvisTypeId.value === AVIS_TYPES.autreAvis} legend={{ main: 'Description' }} initialValue={avisDescription.value} valueChanged={descriptionChange} />
+          <DsfrTextarea
+            id="avis_description"
+            required={etapeAvisTypeId.value === AVIS_TYPES.autreAvis}
+            legend={{ main: 'Description' }}
+            initialValue={avisDescription.value}
+            valueChanged={descriptionChange}
+          />
         </div>
       </fieldset>
     </form>
diff --git a/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_Default.html b/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_Default.html
index a238d873891eecc7614ab4375ffb309f156724b8..a2c5e63bf6df6936383b4873a5810785d9f6539b 100644
--- a/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_Default.html
+++ b/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_Default.html
@@ -32,31 +32,31 @@
                         </label><input class="fr-upload" type="file" id="file-upload" name="file-upload" accept=".pdf"></div>
                     </div>
                     <div class="fr-fieldset__element" style="order: 2;">
-                      <fieldset class="fr-fieldset" id="radio_271" aria-labelledby="radio_271-legend" style="flex-direction: column; align-items: flex-start;">
-                        <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_271-legend">Visibilité
+                      <fieldset class="fr-fieldset" id="document_visibility" aria-labelledby="document_visibility-legend" style="flex-direction: column; align-items: flex-start;">
+                        <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="document_visibility-legend">Visibilité
                           <!---->
                         </legend>
                         <div class="fr-fieldset__element">
-                          <div class="fr-radio-group"><input type="radio" id="radio_271-0" name="radio_271"><label class="fr-label" for="radio_271-0">Visible par les administrations
+                          <div class="fr-radio-group"><input type="radio" id="document_visibility-0" name="document_visibility"><label class="fr-label" for="document_visibility-0">Visible par les administrations
                               <!---->
                             </label></div>
                         </div>
                         <div class="fr-fieldset__element">
-                          <div class="fr-radio-group"><input type="radio" id="radio_271-1" name="radio_271"><label class="fr-label" for="radio_271-1">Visible par les administrations et les entreprises titulaires
+                          <div class="fr-radio-group"><input type="radio" id="document_visibility-1" name="document_visibility"><label class="fr-label" for="document_visibility-1">Visible par les administrations et les entreprises titulaires
                               <!---->
                             </label></div>
                         </div>
                         <div class="fr-fieldset__element">
-                          <div class="fr-radio-group"><input type="radio" id="radio_271-2" name="radio_271"><label class="fr-label" for="radio_271-2">Public
+                          <div class="fr-radio-group"><input type="radio" id="document_visibility-2" name="document_visibility"><label class="fr-label" for="document_visibility-2">Public
                               <!---->
                             </label></div>
                         </div>
                       </fieldset>
                     </div>
                     <div class="fr-fieldset__element" style="order: 3;">
-                      <div class="fr-input-group"><label class="fr-label" for="textarea_670">Description (optionnel)
+                      <div class="fr-input-group"><label class="fr-label" for="document_description">Description (optionnel)
                           <!---->
-                        </label><textarea class="fr-input" name="textarea_670" id="textarea_670" value=""></textarea></div>
+                        </label><textarea class="fr-input" name="document_description" id="document_description" value=""></textarea></div>
                     </div>
                   </fieldset>
                 </form>
diff --git a/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_DocumentInitial.html b/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_DocumentInitial.html
index 4102d3b0614ba3cf1d0368571f4b1da5009c66b9..265b730ba1974dd3f63300f9704edcb16a56ed21 100644
--- a/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_DocumentInitial.html
+++ b/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_DocumentInitial.html
@@ -18,31 +18,31 @@
                         </label><input class="fr-upload" type="file" id="file-upload" name="file-upload" accept=".pdf"></div>
                     </div>
                     <div class="fr-fieldset__element" style="order: 2;">
-                      <fieldset class="fr-fieldset" id="radio_271" aria-labelledby="radio_271-legend" style="flex-direction: column; align-items: flex-start;">
-                        <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_271-legend">Visibilité
+                      <fieldset class="fr-fieldset" id="document_visibility" aria-labelledby="document_visibility-legend" style="flex-direction: column; align-items: flex-start;">
+                        <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="document_visibility-legend">Visibilité
                           <!---->
                         </legend>
                         <div class="fr-fieldset__element">
-                          <div class="fr-radio-group"><input type="radio" id="radio_271-0" name="radio_271"><label class="fr-label" for="radio_271-0">Visible par les administrations
+                          <div class="fr-radio-group"><input type="radio" id="document_visibility-0" name="document_visibility"><label class="fr-label" for="document_visibility-0">Visible par les administrations
                               <!---->
                             </label></div>
                         </div>
                         <div class="fr-fieldset__element">
-                          <div class="fr-radio-group"><input type="radio" id="radio_271-1" checked="" name="radio_271"><label class="fr-label" for="radio_271-1">Visible par les administrations et les entreprises titulaires
+                          <div class="fr-radio-group"><input type="radio" id="document_visibility-1" checked="" name="document_visibility"><label class="fr-label" for="document_visibility-1">Visible par les administrations et les entreprises titulaires
                               <!---->
                             </label></div>
                         </div>
                         <div class="fr-fieldset__element">
-                          <div class="fr-radio-group"><input type="radio" id="radio_271-2" name="radio_271"><label class="fr-label" for="radio_271-2">Public
+                          <div class="fr-radio-group"><input type="radio" id="document_visibility-2" name="document_visibility"><label class="fr-label" for="document_visibility-2">Public
                               <!---->
                             </label></div>
                         </div>
                       </fieldset>
                     </div>
                     <div class="fr-fieldset__element" style="order: 3;">
-                      <div class="fr-input-group"><label class="fr-label" for="textarea_670">Description (optionnel)
+                      <div class="fr-input-group"><label class="fr-label" for="document_description">Description (optionnel)
                           <!---->
-                        </label><textarea class="fr-input" name="textarea_670" id="textarea_670" value="description"></textarea></div>
+                        </label><textarea class="fr-input" name="document_description" id="document_description" value="description"></textarea></div>
                     </div>
                   </fieldset>
                 </form>
diff --git a/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_DocumentInitialAutre.html b/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_DocumentInitialAutre.html
index cd7b2e033f1621a3ed17e2b10e0a6912b657f47a..13dfb8b2ffa5aec934578f8543b896f1824a3b51 100644
--- a/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_DocumentInitialAutre.html
+++ b/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_DocumentInitialAutre.html
@@ -18,32 +18,32 @@
                         </label><input class="fr-upload" type="file" id="file-upload" name="file-upload" accept=".pdf"></div>
                     </div>
                     <div class="fr-fieldset__element" style="order: 2;">
-                      <fieldset class="fr-fieldset" id="radio_271" aria-labelledby="radio_271-legend" style="flex-direction: column; align-items: flex-start;">
-                        <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_271-legend">Visibilité
+                      <fieldset class="fr-fieldset" id="document_visibility" aria-labelledby="document_visibility-legend" style="flex-direction: column; align-items: flex-start;">
+                        <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="document_visibility-legend">Visibilité
                           <!---->
                         </legend>
                         <div class="fr-fieldset__element">
-                          <div class="fr-radio-group"><input type="radio" id="radio_271-0" name="radio_271"><label class="fr-label" for="radio_271-0">Visible par les administrations
+                          <div class="fr-radio-group"><input type="radio" id="document_visibility-0" name="document_visibility"><label class="fr-label" for="document_visibility-0">Visible par les administrations
                               <!---->
                             </label></div>
                         </div>
                         <div class="fr-fieldset__element">
-                          <div class="fr-radio-group"><input type="radio" id="radio_271-1" checked="" name="radio_271"><label class="fr-label" for="radio_271-1">Visible par les administrations et les entreprises titulaires
+                          <div class="fr-radio-group"><input type="radio" id="document_visibility-1" checked="" name="document_visibility"><label class="fr-label" for="document_visibility-1">Visible par les administrations et les entreprises titulaires
                               <!---->
                             </label></div>
                         </div>
                         <div class="fr-fieldset__element">
-                          <div class="fr-radio-group"><input type="radio" id="radio_271-2" name="radio_271"><label class="fr-label" for="radio_271-2">Public
+                          <div class="fr-radio-group"><input type="radio" id="document_visibility-2" name="document_visibility"><label class="fr-label" for="document_visibility-2">Public
                               <!---->
                             </label></div>
                         </div>
                       </fieldset>
                     </div>
                     <div class="fr-fieldset__element" style="order: -1;">
-                      <div class="fr-input-group"><label class="fr-label" for="textarea_670">Description
+                      <div class="fr-input-group"><label class="fr-label" for="document_description">Description
                           <!---->
                           <!---->
-                        </label><textarea class="fr-input" name="textarea_670" id="textarea_670" required="" value="description"></textarea></div>
+                        </label><textarea class="fr-input" name="document_description" id="document_description" required="" value="description"></textarea></div>
                     </div>
                   </fieldset>
                 </form>
diff --git a/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_Entreprise.html b/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_Entreprise.html
index 11b8d91a0bc1212e40fb626a15f8c5f832d3d4a9..57bfe1a6f69041a78c87981b8f6dc1a016975a6d 100644
--- a/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_Entreprise.html
+++ b/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_Entreprise.html
@@ -31,26 +31,26 @@
                         </label><input class="fr-upload" type="file" id="file-upload" name="file-upload" accept=".pdf"></div>
                     </div>
                     <div class="fr-fieldset__element" style="order: 2;">
-                      <fieldset class="fr-fieldset" id="radio_271" aria-labelledby="radio_271-legend" style="flex-direction: column; align-items: flex-start;">
-                        <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_271-legend">Visibilité
+                      <fieldset class="fr-fieldset" id="document_visibility" aria-labelledby="document_visibility-legend" style="flex-direction: column; align-items: flex-start;">
+                        <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="document_visibility-legend">Visibilité
                           <!---->
                         </legend>
                         <div class="fr-fieldset__element">
-                          <div class="fr-radio-group"><input type="radio" id="radio_271-0" name="radio_271"><label class="fr-label" for="radio_271-0">Visible par les administrations et les entreprises titulaires
+                          <div class="fr-radio-group"><input type="radio" id="document_visibility-0" name="document_visibility"><label class="fr-label" for="document_visibility-0">Visible par les administrations et les entreprises titulaires
                               <!---->
                             </label></div>
                         </div>
                         <div class="fr-fieldset__element">
-                          <div class="fr-radio-group"><input type="radio" id="radio_271-1" name="radio_271"><label class="fr-label" for="radio_271-1">Public
+                          <div class="fr-radio-group"><input type="radio" id="document_visibility-1" name="document_visibility"><label class="fr-label" for="document_visibility-1">Public
                               <!---->
                             </label></div>
                         </div>
                       </fieldset>
                     </div>
                     <div class="fr-fieldset__element" style="order: 3;">
-                      <div class="fr-input-group"><label class="fr-label" for="textarea_670">Description (optionnel)
+                      <div class="fr-input-group"><label class="fr-label" for="document_description">Description (optionnel)
                           <!---->
-                        </label><textarea class="fr-input" name="textarea_670" id="textarea_670" value=""></textarea></div>
+                        </label><textarea class="fr-input" name="document_description" id="document_description" value=""></textarea></div>
                     </div>
                   </fieldset>
                 </form>
diff --git a/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_UnSeulDocumentPossible.html b/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_UnSeulDocumentPossible.html
index bced2be9d0d5bf028be4128a3bd858f5097873fe..93df513e56b4c5d58b102cfa5b29d528aada0811 100644
--- a/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_UnSeulDocumentPossible.html
+++ b/packages/ui/src/components/etape/add-etape-document-popup.stories_snapshots_UnSeulDocumentPossible.html
@@ -18,26 +18,26 @@
                         </label><input class="fr-upload" type="file" id="file-upload" name="file-upload" accept=".pdf"></div>
                     </div>
                     <div class="fr-fieldset__element" style="order: 2;">
-                      <fieldset class="fr-fieldset" id="radio_271" aria-labelledby="radio_271-legend" style="flex-direction: column; align-items: flex-start;">
-                        <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_271-legend">Visibilité
+                      <fieldset class="fr-fieldset" id="document_visibility" aria-labelledby="document_visibility-legend" style="flex-direction: column; align-items: flex-start;">
+                        <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="document_visibility-legend">Visibilité
                           <!---->
                         </legend>
                         <div class="fr-fieldset__element">
-                          <div class="fr-radio-group"><input type="radio" id="radio_271-0" name="radio_271"><label class="fr-label" for="radio_271-0">Visible par les administrations et les entreprises titulaires
+                          <div class="fr-radio-group"><input type="radio" id="document_visibility-0" name="document_visibility"><label class="fr-label" for="document_visibility-0">Visible par les administrations et les entreprises titulaires
                               <!---->
                             </label></div>
                         </div>
                         <div class="fr-fieldset__element">
-                          <div class="fr-radio-group"><input type="radio" id="radio_271-1" name="radio_271"><label class="fr-label" for="radio_271-1">Public
+                          <div class="fr-radio-group"><input type="radio" id="document_visibility-1" name="document_visibility"><label class="fr-label" for="document_visibility-1">Public
                               <!---->
                             </label></div>
                         </div>
                       </fieldset>
                     </div>
                     <div class="fr-fieldset__element" style="order: 3;">
-                      <div class="fr-input-group"><label class="fr-label" for="textarea_670">Description (optionnel)
+                      <div class="fr-input-group"><label class="fr-label" for="document_description">Description (optionnel)
                           <!---->
-                        </label><textarea class="fr-input" name="textarea_670" id="textarea_670" value=""></textarea></div>
+                        </label><textarea class="fr-input" name="document_description" id="document_description" value=""></textarea></div>
                     </div>
                   </fieldset>
                 </form>
diff --git a/packages/ui/src/components/etape/add-etape-document-popup.tsx b/packages/ui/src/components/etape/add-etape-document-popup.tsx
index 85857faf6b4a9f67ed5d45a00ce2d69875b5a27e..042e134af1ce48400ee3b7d8844849802d358544 100644
--- a/packages/ui/src/components/etape/add-etape-document-popup.tsx
+++ b/packages/ui/src/components/etape/add-etape-document-popup.tsx
@@ -97,10 +97,18 @@ export const AddEtapeDocumentPopup = defineComponent<Props>(props => {
         </div>
 
         <div class="fr-fieldset__element" style={{ order: 2 }}>
-          <DsfrInputRadio legend={{ main: 'Visibilité' }} required={true} elements={visibilityChoices.value} initialValue={etapeDocumentVisibility.value} valueChanged={visibilityChange} />
+          <DsfrInputRadio
+            id="document_visibility"
+            legend={{ main: 'Visibilité' }}
+            required={true}
+            elements={visibilityChoices.value}
+            initialValue={etapeDocumentVisibility.value}
+            valueChanged={visibilityChange}
+          />
         </div>
         <div class="fr-fieldset__element" style={{ order: etapeDocumentTypeId.value === DOCUMENTS_TYPES_IDS.autreDocument ? -1 : 3 }}>
           <DsfrTextarea
+            id="document_description"
             legend={{ main: 'Description' }}
             required={etapeDocumentTypeId.value === DOCUMENTS_TYPES_IDS.autreDocument}
             initialValue={documentDescription.value}
diff --git a/packages/ui/src/components/etape/date-type-edit.stories_snapshots_Default.html b/packages/ui/src/components/etape/date-type-edit.stories_snapshots_Default.html
index f89dec68de6bd28dcc273f6ea480308b2ef5c0ae..aabce2d8acd22cf51ccb4e069cf71efb4bbd1a44 100644
--- a/packages/ui/src/components/etape/date-type-edit.stories_snapshots_Default.html
+++ b/packages/ui/src/components/etape/date-type-edit.stories_snapshots_Default.html
@@ -1,9 +1,9 @@
 <div class="fr-grid-row">
   <div class="fr-col-12 fr-col-xl-6">
-    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Date
+    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="etape_date">Date
         <!----><span class="fr-hint-text">au format jj/mm/aaaa</span>
         <!---->
-      </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2023-01-01">
+      </label><input class="fr-input" name="etape_date" id="etape_date" required="" type="date" value="2023-01-01">
       <!---->
     </div>
     <div class="fr-mt-2w">
diff --git a/packages/ui/src/components/etape/date-type-edit.stories_snapshots_Loading.html b/packages/ui/src/components/etape/date-type-edit.stories_snapshots_Loading.html
index a6eedfd81d02df8ddd1b71b046dc46ef60489b61..76fc7255b4422eedf8818f4ee8febb084d73c4a9 100644
--- a/packages/ui/src/components/etape/date-type-edit.stories_snapshots_Loading.html
+++ b/packages/ui/src/components/etape/date-type-edit.stories_snapshots_Loading.html
@@ -1,9 +1,9 @@
 <div class="fr-grid-row">
   <div class="fr-col-12 fr-col-xl-6">
-    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Date
+    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="etape_date">Date
         <!----><span class="fr-hint-text">au format jj/mm/aaaa</span>
         <!---->
-      </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2023-01-01">
+      </label><input class="fr-input" name="etape_date" id="etape_date" required="" type="date" value="2023-01-01">
       <!---->
     </div>
     <div class="_top-level_3306d0 fr-mt-2w" style="display: flex; justify-content: center;">
diff --git a/packages/ui/src/components/etape/date-type-edit.stories_snapshots_WithError.html b/packages/ui/src/components/etape/date-type-edit.stories_snapshots_WithError.html
index 4e87cb4ecdd289ecafa4d68a3049d9b81cd9fc11..8ad2fe94f2f8aed76e8dce42338370371c15a045 100644
--- a/packages/ui/src/components/etape/date-type-edit.stories_snapshots_WithError.html
+++ b/packages/ui/src/components/etape/date-type-edit.stories_snapshots_WithError.html
@@ -1,12 +1,12 @@
 <div class="fr-grid-row">
   <div class="fr-col-12 fr-col-xl-6">
-    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Date
+    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="etape_date">Date
         <!----><span class="fr-hint-text">au format jj/mm/aaaa</span>
         <!---->
-      </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2023-01-01">
+      </label><input class="fr-input" name="etape_date" id="etape_date" required="" type="date" value="2023-01-01">
       <!---->
     </div>
-    <div class=" fr-mt-2w" style="display: flex; justify-content: center;">
+    <div class="fr-mt-2w" style="display: flex; justify-content: center;">
       <!---->
       <div class="fr-alert fr-alert--error fr-alert--sm" role="alert">
         <p>Une erreur est survenue</p>
diff --git a/packages/ui/src/components/etape/date-type-edit.stories_snapshots_WithTypeId.html b/packages/ui/src/components/etape/date-type-edit.stories_snapshots_WithTypeId.html
index 1482d1a9081f8c877a4d98a69d2cd570380d452d..a7e66d3288f381a5f5bb66c0252f6a4fc66ec60c 100644
--- a/packages/ui/src/components/etape/date-type-edit.stories_snapshots_WithTypeId.html
+++ b/packages/ui/src/components/etape/date-type-edit.stories_snapshots_WithTypeId.html
@@ -1,9 +1,9 @@
 <div class="fr-grid-row">
   <div class="fr-col-12 fr-col-xl-6">
-    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Date
+    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="etape_date">Date
         <!----><span class="fr-hint-text">au format jj/mm/aaaa</span>
         <!---->
-      </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2023-01-01">
+      </label><input class="fr-input" name="etape_date" id="etape_date" required="" type="date" value="2023-01-01">
       <!---->
     </div>
     <div class="fr-mt-2w">
diff --git a/packages/ui/src/components/etape/date-type-edit.stories_snapshots_WithTypeIdAndStatutId.html b/packages/ui/src/components/etape/date-type-edit.stories_snapshots_WithTypeIdAndStatutId.html
index 1482d1a9081f8c877a4d98a69d2cd570380d452d..a7e66d3288f381a5f5bb66c0252f6a4fc66ec60c 100644
--- a/packages/ui/src/components/etape/date-type-edit.stories_snapshots_WithTypeIdAndStatutId.html
+++ b/packages/ui/src/components/etape/date-type-edit.stories_snapshots_WithTypeIdAndStatutId.html
@@ -1,9 +1,9 @@
 <div class="fr-grid-row">
   <div class="fr-col-12 fr-col-xl-6">
-    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Date
+    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="etape_date">Date
         <!----><span class="fr-hint-text">au format jj/mm/aaaa</span>
         <!---->
-      </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2023-01-01">
+      </label><input class="fr-input" name="etape_date" id="etape_date" required="" type="date" value="2023-01-01">
       <!---->
     </div>
     <div class="fr-mt-2w">
diff --git a/packages/ui/src/components/etape/date-type-edit.tsx b/packages/ui/src/components/etape/date-type-edit.tsx
index 184580fde73196680f7470b74bee2d17451e17de..08f481afc9c2df1b4a79ba81d3e3f35e13802beb 100644
--- a/packages/ui/src/components/etape/date-type-edit.tsx
+++ b/packages/ui/src/components/etape/date-type-edit.tsx
@@ -50,7 +50,7 @@ export const DateTypeEdit = defineComponent<Props>(props => {
   return () => (
     <div class="fr-grid-row">
       <div class="fr-col-12 fr-col-xl-6">
-        <DsfrInput required={true} type={{ type: 'date' }} valueChanged={onDateChanged} initialValue={props.etape.date} legend={{ main: 'Date' }} />
+        <DsfrInput id="etape_date" required={true} type={{ type: 'date' }} valueChanged={onDateChanged} initialValue={props.etape.date} legend={{ main: 'Date' }} />
         {isNotNullNorUndefined(date.value) ? (
           <TypeEdit class="fr-mt-2w" etape={{ ...props.etape, date: date.value }} demarcheId={props.demarcheId} apiClient={props.apiClient} onEtapeChange={onEtapeTypeChange} />
         ) : null}
diff --git a/packages/ui/src/components/etape/entreprises-documents-edit.stories_snapshots_ArmDocumentOptionnel.html b/packages/ui/src/components/etape/entreprises-documents-edit.stories_snapshots_ArmDocumentOptionnel.html
index 5c06643b623f7f8209cb31d8127ca6203b01ae71..9b54a5d196fa98bc5ab58dfe85e87e2c025a4b3f 100644
--- a/packages/ui/src/components/etape/entreprises-documents-edit.stories_snapshots_ArmDocumentOptionnel.html
+++ b/packages/ui/src/components/etape/entreprises-documents-edit.stories_snapshots_ArmDocumentOptionnel.html
@@ -17,7 +17,7 @@
                 <tr>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_271" aria-label="Ajouter un nouveau type de document" name="select_271">
+                      <!----><select class="fr-select" id="nouveau_document_type" aria-label="Ajouter un nouveau type de document" name="nouveau_document_type">
                         <option value="atf">Attestation fiscale</option>
                         <option value="jcf">Justificatif des capacités financières</option>
                         <option selected="" disabled="" hidden="" value="">Selectionnez une option</option>
diff --git a/packages/ui/src/components/etape/entreprises-documents-edit.stories_snapshots_ArmUneEntrepriseAvecDocumentDEntrepriseComplet.html b/packages/ui/src/components/etape/entreprises-documents-edit.stories_snapshots_ArmUneEntrepriseAvecDocumentDEntrepriseComplet.html
index 23fa23968d5d5ee0ea53f280703f560b3683cab0..d98774128bdd74c3c43a548aa2b867d985bef613 100644
--- a/packages/ui/src/components/etape/entreprises-documents-edit.stories_snapshots_ArmUneEntrepriseAvecDocumentDEntrepriseComplet.html
+++ b/packages/ui/src/components/etape/entreprises-documents-edit.stories_snapshots_ArmUneEntrepriseAvecDocumentDEntrepriseComplet.html
@@ -22,7 +22,7 @@
                   </td>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_271" aria-label="Choix du document pour [object Object]" name="select_271" value="2023-06-03-atf-ueoau">
+                      <!----><select class="fr-select" id="2023-06-03-atf-ueoau" aria-label="Choix du document pour [object Object]" name="2023-06-03-atf-ueoau" value="2023-06-03-atf-ueoau">
                         <option selected="" disabled="" value="2023-06-03-atf-ueoau">Attestation fiscale : Attestation sur l'honneur (03-06-2023)</option>
                         <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                         <option disabled="" hidden="" value="">Selectionnez une option</option>
@@ -41,7 +41,7 @@
                   </td>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_670" aria-label="Choix du document pour [object Object]" name="select_670" value="2023-06-23-cur-ueoau">
+                      <!----><select class="fr-select" id="2023-06-23-cur-ueoau" aria-label="Choix du document pour [object Object]" name="2023-06-23-cur-ueoau" value="2023-06-23-cur-ueoau">
                         <option selected="" disabled="" value="2023-06-23-cur-ueoau">Curriculum vitae : Jon. Doe (23-06-2023)</option>
                         <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                         <option disabled="" hidden="" value="">Selectionnez une option</option>
@@ -60,7 +60,7 @@
                   </td>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_74" aria-label="Choix du document pour [object Object]" name="select_74" value="2023-06-23-idm-ueoaue">
+                      <!----><select class="fr-select" id="2023-06-23-idm-ueoaue" aria-label="Choix du document pour [object Object]" name="2023-06-23-idm-ueoaue" value="2023-06-23-idm-ueoaue">
                         <option selected="" disabled="" value="2023-06-23-idm-ueoaue">Identification de matériel : Facture pelle (23-06-2023)</option>
                         <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                         <option disabled="" hidden="" value="">Selectionnez une option</option>
@@ -79,7 +79,7 @@
                   </td>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_878" aria-label="Choix du document pour [object Object]" name="select_878" value="2023-06-23-jid-eaoueo">
+                      <!----><select class="fr-select" id="2023-06-23-jid-eaoueo" aria-label="Choix du document pour [object Object]" name="2023-06-23-jid-eaoueo" value="2023-06-23-jid-eaoueo">
                         <option selected="" disabled="" value="2023-06-23-jid-eaoueo">Justificatif d'identité : Jon. Doe (23-06-2023)</option>
                         <option value="2023-06-23-jid-ueoau">Justificatif d'identité : Arm. Strong (23-06-2023)</option>
                         <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
@@ -99,7 +99,7 @@
                   </td>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_967" aria-label="Choix du document pour [object Object]" name="select_967" value="2023-06-23-jct-ueoau">
+                      <!----><select class="fr-select" id="2023-06-23-jct-ueoau" aria-label="Choix du document pour [object Object]" name="2023-06-23-jct-ueoau" value="2023-06-23-jct-ueoau">
                         <option selected="" disabled="" value="2023-06-23-jct-ueoau">Justificatif des capacités techniques : (23-06-2023)</option>
                         <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                         <option disabled="" hidden="" value="">Selectionnez une option</option>
@@ -118,7 +118,7 @@
                   </td>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_25" aria-label="Choix du document pour [object Object]" name="select_25" value="2023-06-08-kbi-ueoau">
+                      <!----><select class="fr-select" id="2023-06-08-kbi-ueoau" aria-label="Choix du document pour [object Object]" name="2023-06-08-kbi-ueoau" value="2023-06-08-kbi-ueoau">
                         <option selected="" disabled="" value="2023-06-08-kbi-ueoau">Kbis : (08-06-2023)</option>
                         <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                         <option disabled="" hidden="" value="">Selectionnez une option</option>
@@ -137,7 +137,7 @@
                   </td>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_128" aria-label="Choix du document pour [object Object]" name="select_128" value="2023-06-23-jcf-uueoau">
+                      <!----><select class="fr-select" id="2023-06-23-jcf-uueoau" aria-label="Choix du document pour [object Object]" name="2023-06-23-jcf-uueoau" value="2023-06-23-jcf-uueoau">
                         <option selected="" disabled="" value="2023-06-23-jcf-uueoau">Justificatif des capacités financières : (23-06-2023)</option>
                         <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                         <option disabled="" hidden="" value="">Selectionnez une option</option>
@@ -151,7 +151,7 @@
                 <tr>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_772" aria-label="Ajouter un nouveau type de document" name="select_772">
+                      <!----><select class="fr-select" id="nouveau_document_type" aria-label="Ajouter un nouveau type de document" name="nouveau_document_type">
                         <option value="atf">Attestation fiscale</option>
                         <option value="sir">Avis de situation au répertoire Sirene</option>
                         <option value="cur">Curriculum vitae</option>
diff --git a/packages/ui/src/components/etape/entreprises-documents-edit.stories_snapshots_ArmUneEntrepriseSansDocumentDEntreprise.html b/packages/ui/src/components/etape/entreprises-documents-edit.stories_snapshots_ArmUneEntrepriseSansDocumentDEntreprise.html
index 9021f0d1f4f2e16084d8426c6e1428456d4f121d..b1888ef65dab857935b45c563f1f427d0875e79f 100644
--- a/packages/ui/src/components/etape/entreprises-documents-edit.stories_snapshots_ArmUneEntrepriseSansDocumentDEntreprise.html
+++ b/packages/ui/src/components/etape/entreprises-documents-edit.stories_snapshots_ArmUneEntrepriseSansDocumentDEntreprise.html
@@ -23,7 +23,7 @@
                   </td>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_271" aria-label="Choix du document pour [object Object]" name="select_271" value="">
+                      <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                         <option value="2023-06-03-atf-ueoau">Attestation fiscale : Attestation sur l'honneur (03-06-2023)</option>
                         <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                         <option disabled="" hidden="" value="">Selectionnez une option</option>
@@ -43,7 +43,7 @@
                   </td>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_670" aria-label="Choix du document pour [object Object]" name="select_670" value="">
+                      <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                         <option value="2023-06-23-cur-ueoau">Curriculum vitae : Jon. Doe (23-06-2023)</option>
                         <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                         <option disabled="" hidden="" value="">Selectionnez une option</option>
@@ -63,7 +63,7 @@
                   </td>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_74" aria-label="Choix du document pour [object Object]" name="select_74" value="">
+                      <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                         <option value="2023-06-23-jid-eaoueo">Justificatif d'identité : Jon. Doe (23-06-2023)</option>
                         <option value="2023-06-23-jid-ueoau">Justificatif d'identité : Arm. Strong (23-06-2023)</option>
                         <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
@@ -84,7 +84,7 @@
                   </td>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_878" aria-label="Choix du document pour [object Object]" name="select_878" value="">
+                      <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                         <option value="2023-06-23-jct-ueoau">Justificatif des capacités techniques : (23-06-2023)</option>
                         <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                         <option disabled="" hidden="" value="">Selectionnez une option</option>
@@ -104,7 +104,7 @@
                   </td>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_967" aria-label="Choix du document pour [object Object]" name="select_967" value="">
+                      <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                         <option value="2023-06-08-kbi-ueoau">Kbis : (08-06-2023)</option>
                         <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                         <option disabled="" hidden="" value="">Selectionnez une option</option>
@@ -124,7 +124,7 @@
                   </td>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_25" aria-label="Choix du document pour [object Object]" name="select_25" value="">
+                      <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                         <option value="2023-06-23-jcf-uueoau">Justificatif des capacités financières : (23-06-2023)</option>
                         <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                         <option disabled="" hidden="" value="">Selectionnez une option</option>
@@ -138,7 +138,7 @@
                 <tr>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_128" aria-label="Ajouter un nouveau type de document" name="select_128">
+                      <!----><select class="fr-select" id="nouveau_document_type" aria-label="Ajouter un nouveau type de document" name="nouveau_document_type">
                         <option value="atf">Attestation fiscale</option>
                         <option value="sir">Avis de situation au répertoire Sirene</option>
                         <option value="cur">Curriculum vitae</option>
diff --git a/packages/ui/src/components/etape/entreprises-documents-edit.stories_snapshots_AxmDeuxEntreprisesDocumentDEntrepriseComplet.html b/packages/ui/src/components/etape/entreprises-documents-edit.stories_snapshots_AxmDeuxEntreprisesDocumentDEntrepriseComplet.html
index b221906cd19091bd81cd57377ef282f5b0c9e312..5b3f3493d6ab443e223623eaea934d9349a8ffb0 100644
--- a/packages/ui/src/components/etape/entreprises-documents-edit.stories_snapshots_AxmDeuxEntreprisesDocumentDEntrepriseComplet.html
+++ b/packages/ui/src/components/etape/entreprises-documents-edit.stories_snapshots_AxmDeuxEntreprisesDocumentDEntrepriseComplet.html
@@ -20,7 +20,7 @@
                   </td>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_271" aria-label="Choix du document pour [object Object]" name="select_271" value="2023-06-03-atf-ueoau">
+                      <!----><select class="fr-select" id="2023-06-03-atf-ueoau" aria-label="Choix du document pour [object Object]" name="2023-06-03-atf-ueoau" value="2023-06-03-atf-ueoau">
                         <option selected="" disabled="" value="2023-06-03-atf-ueoau">Attestation fiscale : Attestation sur l'honneur (03-06-2023)</option>
                         <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                         <option disabled="" hidden="" value="">Selectionnez une option</option>
@@ -39,7 +39,7 @@
                   </td>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_670" aria-label="Choix du document pour [object Object]" name="select_670" value="2023-06-23-cur-ueoau">
+                      <!----><select class="fr-select" id="2023-06-23-cur-ueoau" aria-label="Choix du document pour [object Object]" name="2023-06-23-cur-ueoau" value="2023-06-23-cur-ueoau">
                         <option selected="" disabled="" value="2023-06-23-cur-ueoau">Curriculum vitae : Jon. Doe (23-06-2023)</option>
                         <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                         <option disabled="" hidden="" value="">Selectionnez une option</option>
@@ -58,7 +58,7 @@
                   </td>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_74" aria-label="Choix du document pour [object Object]" name="select_74" value="2023-06-23-idm-ueoaue">
+                      <!----><select class="fr-select" id="2023-06-23-idm-ueoaue" aria-label="Choix du document pour [object Object]" name="2023-06-23-idm-ueoaue" value="2023-06-23-idm-ueoaue">
                         <option selected="" disabled="" value="2023-06-23-idm-ueoaue">Identification de matériel : Facture pelle (23-06-2023)</option>
                         <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                         <option disabled="" hidden="" value="">Selectionnez une option</option>
@@ -75,7 +75,7 @@
                   </td>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_878" aria-label="Choix du document pour [object Object]" name="select_878" value="2023-06-23-jid-eaoueo">
+                      <!----><select class="fr-select" id="2023-06-23-jid-eaoueo" aria-label="Choix du document pour [object Object]" name="2023-06-23-jid-eaoueo" value="2023-06-23-jid-eaoueo">
                         <option selected="" disabled="" value="2023-06-23-jid-eaoueo">Justificatif d'identité : Jon. Doe (23-06-2023)</option>
                         <option value="2023-06-23-jid-ueoau">Justificatif d'identité : Arm. Strong (23-06-2023)</option>
                         <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
@@ -93,7 +93,7 @@
                   </td>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_967" aria-label="Choix du document pour [object Object]" name="select_967" value="2023-06-23-jct-ueoau">
+                      <!----><select class="fr-select" id="2023-06-23-jct-ueoau" aria-label="Choix du document pour [object Object]" name="2023-06-23-jct-ueoau" value="2023-06-23-jct-ueoau">
                         <option selected="" disabled="" value="2023-06-23-jct-ueoau">Justificatif des capacités techniques : (23-06-2023)</option>
                         <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                         <option disabled="" hidden="" value="">Selectionnez une option</option>
@@ -112,7 +112,7 @@
                   </td>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_25" aria-label="Choix du document pour [object Object]" name="select_25" value="2023-06-08-kbi-ueoau">
+                      <!----><select class="fr-select" id="2023-06-08-kbi-ueoau" aria-label="Choix du document pour [object Object]" name="2023-06-08-kbi-ueoau" value="2023-06-08-kbi-ueoau">
                         <option selected="" disabled="" value="2023-06-08-kbi-ueoau">Kbis : (08-06-2023)</option>
                         <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                         <option disabled="" hidden="" value="">Selectionnez une option</option>
@@ -131,7 +131,7 @@
                   </td>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_128" aria-label="Choix du document pour [object Object]" name="select_128" value="2023-06-23-jcf-uueoau">
+                      <!----><select class="fr-select" id="2023-06-23-jcf-uueoau" aria-label="Choix du document pour [object Object]" name="2023-06-23-jcf-uueoau" value="2023-06-23-jcf-uueoau">
                         <option selected="" disabled="" value="2023-06-23-jcf-uueoau">Justificatif des capacités financières : (23-06-2023)</option>
                         <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                         <option disabled="" hidden="" value="">Selectionnez une option</option>
@@ -150,7 +150,7 @@
                   </td>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_772" aria-label="Choix du document pour [object Object]" name="select_772" value="">
+                      <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                         <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                         <option disabled="" hidden="" value="">Selectionnez une option</option>
                       </select>
@@ -169,7 +169,7 @@
                   </td>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_453" aria-label="Choix du document pour [object Object]" name="select_453" value="">
+                      <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                         <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                         <option disabled="" hidden="" value="">Selectionnez une option</option>
                       </select>
@@ -187,7 +187,7 @@
                   </td>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_556" aria-label="Choix du document pour [object Object]" name="select_556" value="">
+                      <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                         <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                         <option disabled="" hidden="" value="">Selectionnez une option</option>
                       </select>
@@ -207,7 +207,7 @@
                   </td>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_487" aria-label="Choix du document pour [object Object]" name="select_487" value="">
+                      <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                         <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                         <option disabled="" hidden="" value="">Selectionnez une option</option>
                       </select>
@@ -225,7 +225,7 @@
                   </td>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_796" aria-label="Choix du document pour [object Object]" name="select_796" value="">
+                      <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                         <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                         <option disabled="" hidden="" value="">Selectionnez une option</option>
                       </select>
@@ -238,7 +238,7 @@
                 <tr>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_216" aria-label="Ajouter un nouveau type de document" name="select_216">
+                      <!----><select class="fr-select" id="nouveau_document_type" aria-label="Ajouter un nouveau type de document" name="nouveau_document_type">
                         <option value="atf">Attestation fiscale</option>
                         <option value="sir">Avis de situation au répertoire Sirene</option>
                         <option value="cur">Curriculum vitae</option>
@@ -289,7 +289,7 @@
                   </td>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_482" aria-label="Choix du document pour [object Object]" name="select_482" value="">
+                      <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                         <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                         <option disabled="" hidden="" value="">Selectionnez une option</option>
                       </select>
@@ -307,7 +307,7 @@
                   </td>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_585" aria-label="Choix du document pour [object Object]" name="select_585" value="">
+                      <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                         <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                         <option disabled="" hidden="" value="">Selectionnez une option</option>
                       </select>
@@ -325,7 +325,7 @@
                   </td>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_759" aria-label="Choix du document pour [object Object]" name="select_759" value="">
+                      <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                         <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                         <option disabled="" hidden="" value="">Selectionnez une option</option>
                       </select>
@@ -343,7 +343,7 @@
                   </td>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_58" aria-label="Choix du document pour [object Object]" name="select_58" value="">
+                      <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                         <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                         <option disabled="" hidden="" value="">Selectionnez une option</option>
                       </select>
@@ -362,7 +362,7 @@
                   </td>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_661" aria-label="Choix du document pour [object Object]" name="select_661" value="">
+                      <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                         <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                         <option disabled="" hidden="" value="">Selectionnez une option</option>
                       </select>
@@ -380,7 +380,7 @@
                   </td>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_684" aria-label="Choix du document pour [object Object]" name="select_684" value="">
+                      <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                         <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                         <option disabled="" hidden="" value="">Selectionnez une option</option>
                       </select>
@@ -400,7 +400,7 @@
                   </td>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_624" aria-label="Choix du document pour [object Object]" name="select_624" value="">
+                      <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                         <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                         <option disabled="" hidden="" value="">Selectionnez une option</option>
                       </select>
@@ -418,7 +418,7 @@
                   </td>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_267" aria-label="Choix du document pour [object Object]" name="select_267" value="">
+                      <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                         <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                         <option disabled="" hidden="" value="">Selectionnez une option</option>
                       </select>
@@ -431,7 +431,7 @@
                 <tr>
                   <td>
                     <div class="fr-select-group">
-                      <!----><select class="fr-select" id="select_119" aria-label="Ajouter un nouveau type de document" name="select_119">
+                      <!----><select class="fr-select" id="nouveau_document_type" aria-label="Ajouter un nouveau type de document" name="nouveau_document_type">
                         <option value="atf">Attestation fiscale</option>
                         <option value="sir">Avis de situation au répertoire Sirene</option>
                         <option value="cur">Curriculum vitae</option>
diff --git a/packages/ui/src/components/etape/entreprises-documents-edit.stories_snapshots_Loading.html b/packages/ui/src/components/etape/entreprises-documents-edit.stories_snapshots_Loading.html
index a3ef9f153e3d85e7cee9bee07fa7e245eba4da0b..c5f6bb573b32886f6379bf1c5b391015fac5acbe 100644
--- a/packages/ui/src/components/etape/entreprises-documents-edit.stories_snapshots_Loading.html
+++ b/packages/ui/src/components/etape/entreprises-documents-edit.stories_snapshots_Loading.html
@@ -1,4 +1,4 @@
-<div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+<div class="_top-level_3306d0" style="display: flex; justify-content: center;">
   <!---->
   <!---->
   <div class="_spinner_3306d0"></div>
diff --git a/packages/ui/src/components/etape/entreprises-documents-edit.tsx b/packages/ui/src/components/etape/entreprises-documents-edit.tsx
index 2e18f597e57b15b1838851a504c604920dc9362c..73f25a8180d01f99dd61bd587ea6cf6d86cb675a 100644
--- a/packages/ui/src/components/etape/entreprises-documents-edit.tsx
+++ b/packages/ui/src/components/etape/entreprises-documents-edit.tsx
@@ -300,6 +300,7 @@ const InternalEntrepriseDocumentsEdit = defineComponent<Props & { etapeEntrepris
             value: 'addEid',
             jsxElement: (
               <DsfrSelect
+                id="nouveau_document_type"
                 required={false}
                 items={map(tdeEntrepriseDocuments.value, ({ id, nom }) => ({ id, label: nom }))}
                 legend={{ main: 'Ajouter un nouveau type de document', visible: false }}
@@ -403,6 +404,7 @@ const EntrepriseSelect: FunctionalComponent<{
     <>
       {isNotNullNorUndefinedNorEmpty(options) ? (
         <DsfrSelect
+          id={props.entrepriseDocuments.id ?? 'nouveau_document'}
           required={true}
           initialValue={props.entrepriseDocuments.id === '' ? entrepriseDocumentIdValidator.parse('') : props.entrepriseDocuments.id}
           items={options}
diff --git a/packages/ui/src/components/etape/etape-documents-edit.stories_snapshots_Loading.html b/packages/ui/src/components/etape/etape-documents-edit.stories_snapshots_Loading.html
index a3ef9f153e3d85e7cee9bee07fa7e245eba4da0b..c5f6bb573b32886f6379bf1c5b391015fac5acbe 100644
--- a/packages/ui/src/components/etape/etape-documents-edit.stories_snapshots_Loading.html
+++ b/packages/ui/src/components/etape/etape-documents-edit.stories_snapshots_Loading.html
@@ -1,4 +1,4 @@
-<div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+<div class="_top-level_3306d0" style="display: flex; justify-content: center;">
   <!---->
   <!---->
   <div class="_spinner_3306d0"></div>
diff --git a/packages/ui/src/components/etape/etape-documents-edit.stories_snapshots_WithError.html b/packages/ui/src/components/etape/etape-documents-edit.stories_snapshots_WithError.html
index 1581df2f5625237870f316caea15a3943a794bbe..5cd6a49518801e7d551131667e88a40de522a282 100644
--- a/packages/ui/src/components/etape/etape-documents-edit.stories_snapshots_WithError.html
+++ b/packages/ui/src/components/etape/etape-documents-edit.stories_snapshots_WithError.html
@@ -1,4 +1,4 @@
-<div class=" undefined" style="display: flex; justify-content: center;">
+<div class="" style="display: flex; justify-content: center;">
   <div class="fr-alert fr-alert--error fr-alert--sm">
     <p>Une erreur est survenue</p>
   </div>
diff --git a/packages/ui/src/components/etape/etape-edit-form.stories_snapshots_Default.html b/packages/ui/src/components/etape/etape-edit-form.stories_snapshots_Default.html
index 602109e607953db539a5a167c9ee9f1b6477f383..96825de35b5adbaf36b6e0c8848a09c78b0b463a 100644
--- a/packages/ui/src/components/etape/etape-edit-form.stories_snapshots_Default.html
+++ b/packages/ui/src/components/etape/etape-edit-form.stories_snapshots_Default.html
@@ -9,10 +9,10 @@
     <div>
       <div class="fr-grid-row">
         <div class="fr-col-12 fr-col-xl-6">
-          <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Date
+          <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="etape_date">Date
               <!----><span class="fr-hint-text">au format jj/mm/aaaa</span>
               <!---->
-            </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2022-02-02">
+            </label><input class="fr-input" name="etape_date" id="etape_date" required="" type="date" value="2022-02-02">
             <!---->
           </div>
           <div class="fr-mt-2w">
@@ -51,23 +51,23 @@
           <div class="fr-col-12 fr-col-xl-6">
             <div class="fr-mb-1w">
               <div style="display: flex;">
-                <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Durée (années)
+                <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="fondamentale_duree_annees">Durée (années)
                     <!---->
                     <!---->
                     <!---->
-                  </label><input class="fr-input" name="input_74" id="input_74" required="" type="number" value="0">
+                  </label><input class="fr-input" name="fondamentale_duree_annees" id="fondamentale_duree_annees" required="" type="number" value="0">
                   <!---->
                 </div>
-                <div class="fr-input-group fr-ml-2w" style="margin-bottom: 0px;"><label class="fr-label" for="input_878">Durée (mois)
+                <div class="fr-input-group fr-ml-2w" style="margin-bottom: 0px;"><label class="fr-label" for="fondamentale_duree_mois">Durée (mois)
                     <!---->
                     <!---->
                     <!---->
-                  </label><input class="fr-input" name="input_878" id="input_878" required="" type="number" value="4">
+                  </label><input class="fr-input" name="fondamentale_duree_mois" id="fondamentale_duree_mois" required="" type="number" value="4">
                   <!---->
                 </div>
               </div>
               <div class="fr-pt-2w fr-pb-2w">
-                <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" id="toggle_967"><label class="fr-toggle__label" for="toggle_967" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
+                <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" id="heritage_duree"><label class="fr-toggle__label" for="heritage_duree" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
                   <!---->
                 </div>
               </div>
@@ -100,7 +100,7 @@
                 </div>
               </div>
               <div class="fr-pt-2w fr-pb-2w">
-                <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="toggle_772"><label class="fr-toggle__label" for="toggle_772" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
+                <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="heritage_substances"><label class="fr-toggle__label" for="heritage_substances" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
                   <!---->
                 </div>
               </div>
@@ -145,9 +145,9 @@
               </div>
               <div class="fr-mb-1w">
                 <div>
-                  <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_487">Franchissements de cours d'eau (optionnel)
+                  <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="franchissements">Franchissements de cours d'eau (optionnel)
                       <!----><span class="fr-hint-text">Nombre de franchissements de cours d'eau</span>
-                    </label><input class="fr-input" name="input_487" id="input_487" type="number" min="0" value="2">
+                    </label><input class="fr-input" name="franchissements" id="franchissements" type="number" min="0" value="2">
                     <!---->
                   </div>
                 </div>
@@ -312,7 +312,7 @@
                           </td>
                           <td>
                             <div class="fr-select-group">
-                              <!----><select class="fr-select" id="select_482" aria-label="Choix du document pour [object Object]" name="select_482" value="">
+                              <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                                 <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                                 <option disabled="" hidden="" value="">Selectionnez une option</option>
                               </select>
@@ -331,7 +331,7 @@
                           </td>
                           <td>
                             <div class="fr-select-group">
-                              <!----><select class="fr-select" id="select_585" aria-label="Choix du document pour [object Object]" name="select_585" value="">
+                              <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                                 <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                                 <option disabled="" hidden="" value="">Selectionnez une option</option>
                               </select>
@@ -350,7 +350,7 @@
                           </td>
                           <td>
                             <div class="fr-select-group">
-                              <!----><select class="fr-select" id="select_759" aria-label="Choix du document pour [object Object]" name="select_759" value="">
+                              <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                                 <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                                 <option disabled="" hidden="" value="">Selectionnez une option</option>
                               </select>
@@ -369,7 +369,7 @@
                           </td>
                           <td>
                             <div class="fr-select-group">
-                              <!----><select class="fr-select" id="select_58" aria-label="Choix du document pour [object Object]" name="select_58" value="">
+                              <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                                 <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                                 <option disabled="" hidden="" value="">Selectionnez une option</option>
                               </select>
@@ -388,7 +388,7 @@
                           </td>
                           <td>
                             <div class="fr-select-group">
-                              <!----><select class="fr-select" id="select_661" aria-label="Choix du document pour [object Object]" name="select_661" value="">
+                              <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                                 <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                                 <option disabled="" hidden="" value="">Selectionnez une option</option>
                               </select>
@@ -407,7 +407,7 @@
                           </td>
                           <td>
                             <div class="fr-select-group">
-                              <!----><select class="fr-select" id="select_684" aria-label="Choix du document pour [object Object]" name="select_684" value="">
+                              <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                                 <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                                 <option disabled="" hidden="" value="">Selectionnez une option</option>
                               </select>
@@ -420,7 +420,7 @@
                         <tr>
                           <td>
                             <div class="fr-select-group">
-                              <!----><select class="fr-select" id="select_624" aria-label="Ajouter un nouveau type de document" name="select_624">
+                              <!----><select class="fr-select" id="nouveau_document_type" aria-label="Ajouter un nouveau type de document" name="nouveau_document_type">
                                 <option value="atf">Attestation fiscale</option>
                                 <option value="sir">Avis de situation au répertoire Sirene</option>
                                 <option value="cur">Curriculum vitae</option>
@@ -467,7 +467,7 @@
                           </td>
                           <td>
                             <div class="fr-select-group">
-                              <!----><select class="fr-select" id="select_267" aria-label="Choix du document pour [object Object]" name="select_267" value="">
+                              <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                                 <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                                 <option disabled="" hidden="" value="">Selectionnez une option</option>
                               </select>
@@ -486,7 +486,7 @@
                           </td>
                           <td>
                             <div class="fr-select-group">
-                              <!----><select class="fr-select" id="select_119" aria-label="Choix du document pour [object Object]" name="select_119" value="">
+                              <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                                 <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                                 <option disabled="" hidden="" value="">Selectionnez une option</option>
                               </select>
@@ -505,7 +505,7 @@
                           </td>
                           <td>
                             <div class="fr-select-group">
-                              <!----><select class="fr-select" id="select_827" aria-label="Choix du document pour [object Object]" name="select_827" value="">
+                              <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                                 <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                                 <option disabled="" hidden="" value="">Selectionnez une option</option>
                               </select>
@@ -524,7 +524,7 @@
                           </td>
                           <td>
                             <div class="fr-select-group">
-                              <!----><select class="fr-select" id="select_173" aria-label="Choix du document pour [object Object]" name="select_173" value="">
+                              <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                                 <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                                 <option disabled="" hidden="" value="">Selectionnez une option</option>
                               </select>
@@ -543,7 +543,7 @@
                           </td>
                           <td>
                             <div class="fr-select-group">
-                              <!----><select class="fr-select" id="select_211" aria-label="Choix du document pour [object Object]" name="select_211" value="">
+                              <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                                 <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                                 <option disabled="" hidden="" value="">Selectionnez une option</option>
                               </select>
@@ -562,7 +562,7 @@
                           </td>
                           <td>
                             <div class="fr-select-group">
-                              <!----><select class="fr-select" id="select_619" aria-label="Choix du document pour [object Object]" name="select_619" value="">
+                              <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                                 <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                                 <option disabled="" hidden="" value="">Selectionnez une option</option>
                               </select>
@@ -575,7 +575,7 @@
                         <tr>
                           <td>
                             <div class="fr-select-group">
-                              <!----><select class="fr-select" id="select_686" aria-label="Ajouter un nouveau type de document" name="select_686">
+                              <!----><select class="fr-select" id="nouveau_document_type" aria-label="Ajouter un nouveau type de document" name="nouveau_document_type">
                                 <option value="atf">Attestation fiscale</option>
                                 <option value="sir">Avis de situation au répertoire Sirene</option>
                                 <option value="cur">Curriculum vitae</option>
@@ -622,7 +622,7 @@
                           </td>
                           <td>
                             <div class="fr-select-group">
-                              <!----><select class="fr-select" id="select_954" aria-label="Choix du document pour [object Object]" name="select_954" value="">
+                              <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                                 <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                                 <option disabled="" hidden="" value="">Selectionnez une option</option>
                               </select>
@@ -641,7 +641,7 @@
                           </td>
                           <td>
                             <div class="fr-select-group">
-                              <!----><select class="fr-select" id="select_132" aria-label="Choix du document pour [object Object]" name="select_132" value="">
+                              <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                                 <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                                 <option disabled="" hidden="" value="">Selectionnez une option</option>
                               </select>
@@ -660,7 +660,7 @@
                           </td>
                           <td>
                             <div class="fr-select-group">
-                              <!----><select class="fr-select" id="select_773" aria-label="Choix du document pour [object Object]" name="select_773" value="">
+                              <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                                 <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                                 <option disabled="" hidden="" value="">Selectionnez une option</option>
                               </select>
@@ -679,7 +679,7 @@
                           </td>
                           <td>
                             <div class="fr-select-group">
-                              <!----><select class="fr-select" id="select_785" aria-label="Choix du document pour [object Object]" name="select_785" value="">
+                              <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                                 <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                                 <option disabled="" hidden="" value="">Selectionnez une option</option>
                               </select>
@@ -698,7 +698,7 @@
                           </td>
                           <td>
                             <div class="fr-select-group">
-                              <!----><select class="fr-select" id="select_253" aria-label="Choix du document pour [object Object]" name="select_253" value="">
+                              <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                                 <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                                 <option disabled="" hidden="" value="">Selectionnez une option</option>
                               </select>
@@ -717,7 +717,7 @@
                           </td>
                           <td>
                             <div class="fr-select-group">
-                              <!----><select class="fr-select" id="select_19" aria-label="Choix du document pour [object Object]" name="select_19" value="">
+                              <!----><select class="fr-select" id="" aria-label="Choix du document pour [object Object]" name="" value="">
                                 <option value="newDocument">Ajouter un nouveau document d'entreprise</option>
                                 <option disabled="" hidden="" value="">Selectionnez une option</option>
                               </select>
@@ -730,7 +730,7 @@
                         <tr>
                           <td>
                             <div class="fr-select-group">
-                              <!----><select class="fr-select" id="select_35" aria-label="Ajouter un nouveau type de document" name="select_35">
+                              <!----><select class="fr-select" id="nouveau_document_type" aria-label="Ajouter un nouveau type de document" name="nouveau_document_type">
                                 <option value="atf">Attestation fiscale</option>
                                 <option value="sir">Avis de situation au répertoire Sirene</option>
                                 <option value="cur">Curriculum vitae</option>
@@ -757,9 +757,9 @@
         <!---->
       </div>
     </div>
-    <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="textarea_216">Notes (optionnel)
+    <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="etape_notes">Notes (optionnel)
         <!---->
-      </label><textarea class="fr-input" name="textarea_216" id="textarea_216" value="Super notes de cette story"></textarea></div>
+      </label><textarea class="fr-input" name="etape_notes" id="etape_notes" value="Super notes de cette story"></textarea></div>
     <div class="fr-checkbox-group"><input name="archive" id="is_avertissement" type="checkbox"><label class="fr-label" for="is_avertissement">Cette note est un avertissement<span class="fr-hint-text">Apparait sur le résumé de la démarche</span></label></div>
   </div>
   <!---->
diff --git a/packages/ui/src/components/etape/etape-edit-form.stories_snapshots_EtapeConsultationAdministrationsCentrales.html b/packages/ui/src/components/etape/etape-edit-form.stories_snapshots_EtapeConsultationAdministrationsCentrales.html
index f686bd1691b0637da3fbc4bd8936064bc37e0338..970125d2f70b22e5890ba61c4740f412c8d23a6c 100644
--- a/packages/ui/src/components/etape/etape-edit-form.stories_snapshots_EtapeConsultationAdministrationsCentrales.html
+++ b/packages/ui/src/components/etape/etape-edit-form.stories_snapshots_EtapeConsultationAdministrationsCentrales.html
@@ -9,10 +9,10 @@
     <div>
       <div class="fr-grid-row">
         <div class="fr-col-12 fr-col-xl-6">
-          <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Date
+          <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="etape_date">Date
               <!----><span class="fr-hint-text">au format jj/mm/aaaa</span>
               <!---->
-            </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2022-02-02">
+            </label><input class="fr-input" name="etape_date" id="etape_date" required="" type="date" value="2022-02-02">
             <!---->
           </div>
           <div class="fr-mt-2w">
@@ -146,9 +146,9 @@
       </div>
     </div>
     <!---->
-    <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="textarea_670">Notes (optionnel)
+    <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="etape_notes">Notes (optionnel)
         <!---->
-      </label><textarea class="fr-input" name="textarea_670" id="textarea_670" value="Super notes de cette story"></textarea></div>
+      </label><textarea class="fr-input" name="etape_notes" id="etape_notes" value="Super notes de cette story"></textarea></div>
     <div class="fr-checkbox-group"><input name="archive" id="is_avertissement" type="checkbox"><label class="fr-label" for="is_avertissement">Cette note est un avertissement<span class="fr-hint-text">Apparait sur le résumé de la démarche</span></label></div>
   </div>
   <!---->
diff --git a/packages/ui/src/components/etape/etape-edit-form.stories_snapshots_EtapeDecisionAdministration.html b/packages/ui/src/components/etape/etape-edit-form.stories_snapshots_EtapeDecisionAdministration.html
index 1aef2910c23974145599c4186252b762131997f0..1552fddf179a32c8710015603500cccb9d907483 100644
--- a/packages/ui/src/components/etape/etape-edit-form.stories_snapshots_EtapeDecisionAdministration.html
+++ b/packages/ui/src/components/etape/etape-edit-form.stories_snapshots_EtapeDecisionAdministration.html
@@ -9,10 +9,10 @@
     <div>
       <div class="fr-grid-row">
         <div class="fr-col-12 fr-col-xl-6">
-          <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Date
+          <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="etape_date">Date
               <!----><span class="fr-hint-text">au format jj/mm/aaaa</span>
               <!---->
-            </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2022-02-02">
+            </label><input class="fr-input" name="etape_date" id="etape_date" required="" type="date" value="2022-02-02">
             <!---->
           </div>
           <div class="fr-mt-2w">
@@ -52,23 +52,23 @@
           <div class="fr-col-12 fr-col-xl-6">
             <div class="fr-mb-1w">
               <div style="display: flex;">
-                <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Durée (années)
+                <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="fondamentale_duree_annees">Durée (années)
                     <!---->
                     <!---->
                     <!---->
-                  </label><input class="fr-input" name="input_74" id="input_74" required="" type="number" value="0">
+                  </label><input class="fr-input" name="fondamentale_duree_annees" id="fondamentale_duree_annees" required="" type="number" value="0">
                   <!---->
                 </div>
-                <div class="fr-input-group fr-ml-2w" style="margin-bottom: 0px;"><label class="fr-label" for="input_878">Durée (mois)
+                <div class="fr-input-group fr-ml-2w" style="margin-bottom: 0px;"><label class="fr-label" for="fondamentale_duree_mois">Durée (mois)
                     <!---->
                     <!---->
                     <!---->
-                  </label><input class="fr-input" name="input_878" id="input_878" required="" type="number" value="4">
+                  </label><input class="fr-input" name="fondamentale_duree_mois" id="fondamentale_duree_mois" required="" type="number" value="4">
                   <!---->
                 </div>
               </div>
               <div class="fr-pt-2w fr-pb-2w">
-                <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" id="toggle_967"><label class="fr-toggle__label" for="toggle_967" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
+                <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" id="heritage_duree"><label class="fr-toggle__label" for="heritage_duree" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
                   <!---->
                 </div>
               </div>
@@ -102,7 +102,7 @@
                 </div>
               </div>
               <div class="fr-pt-2w fr-pb-2w">
-                <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="toggle_772"><label class="fr-toggle__label" for="toggle_772" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
+                <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="heritage_amodiataires"><label class="fr-toggle__label" for="heritage_amodiataires" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
                   <!---->
                 </div>
               </div>
@@ -116,7 +116,7 @@
                 </div>
               </div>
               <div class="fr-pt-2w fr-pb-2w">
-                <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="toggle_556"><label class="fr-toggle__label" for="toggle_556" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
+                <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="heritage_substances"><label class="fr-toggle__label" for="heritage_substances" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
                   <!---->
                 </div>
               </div>
@@ -186,9 +186,9 @@
     </div>
     <!---->
     <!---->
-    <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="textarea_796">Notes (optionnel)
+    <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="etape_notes">Notes (optionnel)
         <!---->
-      </label><textarea class="fr-input" name="textarea_796" id="textarea_796" value="Super notes de cette story"></textarea></div>
+      </label><textarea class="fr-input" name="etape_notes" id="etape_notes" value="Super notes de cette story"></textarea></div>
     <div class="fr-checkbox-group"><input name="archive" id="is_avertissement" type="checkbox"><label class="fr-label" for="is_avertissement">Cette note est un avertissement<span class="fr-hint-text">Apparait sur le résumé de la démarche</span></label></div>
   </div>
   <!---->
diff --git a/packages/ui/src/components/etape/etape-edit-form.stories_snapshots_EtapeModification.html b/packages/ui/src/components/etape/etape-edit-form.stories_snapshots_EtapeModification.html
index 39340aed2589400e814671c0c49c2318762de899..e18aa5b3022f87fac2b9cffd73022346a66c7dcf 100644
--- a/packages/ui/src/components/etape/etape-edit-form.stories_snapshots_EtapeModification.html
+++ b/packages/ui/src/components/etape/etape-edit-form.stories_snapshots_EtapeModification.html
@@ -9,10 +9,10 @@
     <div>
       <div class="fr-grid-row">
         <div class="fr-col-12 fr-col-xl-6">
-          <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Date
+          <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="etape_date">Date
               <!----><span class="fr-hint-text">au format jj/mm/aaaa</span>
               <!---->
-            </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2022-02-02">
+            </label><input class="fr-input" name="etape_date" id="etape_date" required="" type="date" value="2022-02-02">
             <!---->
           </div>
           <div class="fr-mt-2w">
@@ -51,23 +51,23 @@
           <div class="fr-col-12 fr-col-xl-6">
             <div class="fr-mb-1w">
               <div style="display: flex;">
-                <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Durée (années)
+                <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="fondamentale_duree_annees">Durée (années)
                     <!---->
                     <!---->
                     <!---->
-                  </label><input class="fr-input" name="input_74" id="input_74" required="" type="number" value="0">
+                  </label><input class="fr-input" name="fondamentale_duree_annees" id="fondamentale_duree_annees" required="" type="number" value="0">
                   <!---->
                 </div>
-                <div class="fr-input-group fr-ml-2w" style="margin-bottom: 0px;"><label class="fr-label" for="input_878">Durée (mois)
+                <div class="fr-input-group fr-ml-2w" style="margin-bottom: 0px;"><label class="fr-label" for="fondamentale_duree_mois">Durée (mois)
                     <!---->
                     <!---->
                     <!---->
-                  </label><input class="fr-input" name="input_878" id="input_878" required="" type="number" value="4">
+                  </label><input class="fr-input" name="fondamentale_duree_mois" id="fondamentale_duree_mois" required="" type="number" value="4">
                   <!---->
                 </div>
               </div>
               <div class="fr-pt-2w fr-pb-2w">
-                <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" id="toggle_967"><label class="fr-toggle__label" for="toggle_967" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
+                <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" id="heritage_duree"><label class="fr-toggle__label" for="heritage_duree" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
                   <!---->
                 </div>
               </div>
@@ -101,7 +101,7 @@
                 </div>
               </div>
               <div class="fr-pt-2w fr-pb-2w">
-                <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="toggle_772"><label class="fr-toggle__label" for="toggle_772" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
+                <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="heritage_amodiataires"><label class="fr-toggle__label" for="heritage_amodiataires" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
                   <!---->
                 </div>
               </div>
@@ -115,7 +115,7 @@
                 </div>
               </div>
               <div class="fr-pt-2w fr-pb-2w">
-                <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="toggle_556"><label class="fr-toggle__label" for="toggle_556" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
+                <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="heritage_substances"><label class="fr-toggle__label" for="heritage_substances" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
                   <!---->
                 </div>
               </div>
@@ -138,10 +138,10 @@
               <h3>Propriétés de la concession</h3>
               <div class="fr-mb-1w">
                 <div>
-                  <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_796">Volume (optionnel)
+                  <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="volume">Volume (optionnel)
                       <!---->
                       <!---->
-                    </label><input class="fr-input" name="input_796" id="input_796" type="number" min="0">
+                    </label><input class="fr-input" name="volume" id="volume" type="number" min="0">
                     <!---->
                   </div>
                 </div>
@@ -149,9 +149,9 @@
               </div>
               <div class="fr-mb-1w">
                 <div>
-                  <div class="fr-select-group"><label class="fr-label" for="select_482">Unité du volume (optionnel)
+                  <div class="fr-select-group"><label class="fr-label" for="volumeUniteId">Unité du volume (optionnel)
                       <!---->
-                    </label><select class="fr-select" id="select_482" aria-label="Unité du volume" name="select_482">
+                    </label><select class="fr-select" id="volumeUniteId" aria-label="Unité du volume" name="volumeUniteId">
                       <option value="deg">degré</option>
                       <option value="gon">grade</option>
                       <option value="km3">kilomètre cube</option>
@@ -195,85 +195,85 @@
                 <div>
                   <div class="fr-tabs" style="--tabs-height: 0px;">
                     <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-                      <li role="presentation"><button id="tabpanel-carte-759" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-759-panel">Carte</button></li>
-                      <li role="presentation"><button id="tabpanel-points-759" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-759-panel">Tableau</button></li>
+                      <li role="presentation"><button id="tabpanel-carte-perimetre_edit" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-perimetre_edit-panel">Carte</button></li>
+                      <li role="presentation"><button id="tabpanel-points-perimetre_edit" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-perimetre_edit-panel">Tableau</button></li>
                     </ul>
-                    <div id="tabpanel-carte-759-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-759" tabindex="0">
+                    <div id="tabpanel-carte-perimetre_edit-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-perimetre_edit" tabindex="0">
                       <!---->
                     </div>
-                    <div id="tabpanel-points-759-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-759" tabindex="0">
+                    <div id="tabpanel-points-perimetre_edit-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-perimetre_edit" tabindex="0">
                       <div style="display: flex; flex-direction: column;">
-                        <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_58">Système géographique</label>
-                          <div id="typeahead_geosysteme_58_wrapper" class="_typeahead_8eddf1">
-                            <div class="flex"><input id="typeahead_geosysteme_58" type="text" title="" name="typeahead_geosysteme_58" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_58-control" aria-activedescendant="typeahead_geosysteme_58-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
-                            <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_58-control" role="listbox">
-                              <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_58-control-0">
+                        <div class="fr-select-group"><label class="fr-label" for="4326">Système géographique</label>
+                          <div id="4326_wrapper" class="_typeahead_8eddf1">
+                            <div class="flex"><input id="4326" type="text" title="" name="4326" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="4326-control" aria-activedescendant="4326-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+                            <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="4326-control" role="listbox">
+                              <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="4326-control-0">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_58-control-1">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-1">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_58-control-2">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-2">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_58-control-3">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-3">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_58-control-4">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-4">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_58-control-5">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-5">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_58-control-6">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-6">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_58-control-7">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-7">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_58-control-8">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-8">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_58-control-9">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-9">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_58-control-10">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-10">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_58-control-11">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-11">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_58-control-12">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-12">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_58-control-13">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-13">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_58-control-14">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-14">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_58-control-15">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-15">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_58-control-16">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-16">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_58-control-17">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-17">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_58-control-18">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-18">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_58-control-19">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-19">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_58-control-20">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-20">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_58-control-21">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-21">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_58-control-22">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-22">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                               </li>
                             </ul>
@@ -412,7 +412,7 @@
                         <tr>
                           <td>
                             <div class="fr-select-group">
-                              <!----><select class="fr-select" id="select_684" aria-label="Ajouter un nouveau type de document" name="select_684">
+                              <!----><select class="fr-select" id="nouveau_document_type" aria-label="Ajouter un nouveau type de document" name="nouveau_document_type">
                                 <option value="atf">Attestation fiscale</option>
                                 <option value="sir">Avis de situation au répertoire Sirene</option>
                                 <option value="cur">Curriculum vitae</option>
@@ -453,7 +453,7 @@
                         <tr>
                           <td>
                             <div class="fr-select-group">
-                              <!----><select class="fr-select" id="select_624" aria-label="Ajouter un nouveau type de document" name="select_624">
+                              <!----><select class="fr-select" id="nouveau_document_type" aria-label="Ajouter un nouveau type de document" name="nouveau_document_type">
                                 <option value="atf">Attestation fiscale</option>
                                 <option value="sir">Avis de situation au répertoire Sirene</option>
                                 <option value="cur">Curriculum vitae</option>
@@ -494,7 +494,7 @@
                         <tr>
                           <td>
                             <div class="fr-select-group">
-                              <!----><select class="fr-select" id="select_267" aria-label="Ajouter un nouveau type de document" name="select_267">
+                              <!----><select class="fr-select" id="nouveau_document_type" aria-label="Ajouter un nouveau type de document" name="nouveau_document_type">
                                 <option value="atf">Attestation fiscale</option>
                                 <option value="sir">Avis de situation au répertoire Sirene</option>
                                 <option value="cur">Curriculum vitae</option>
@@ -521,9 +521,9 @@
         <!---->
       </div>
     </div>
-    <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="textarea_661">Notes (optionnel)
+    <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="etape_notes">Notes (optionnel)
         <!---->
-      </label><textarea class="fr-input" name="textarea_661" id="textarea_661" value="Super notes de cette story"></textarea></div>
+      </label><textarea class="fr-input" name="etape_notes" id="etape_notes" value="Super notes de cette story"></textarea></div>
     <div class="fr-checkbox-group"><input name="archive" id="is_avertissement" type="checkbox"><label class="fr-label" for="is_avertissement">Cette note est un avertissement<span class="fr-hint-text">Apparait sur le résumé de la démarche</span></label></div>
   </div>
   <!---->
diff --git a/packages/ui/src/components/etape/etape-edit-form.stories_snapshots_EtapeModificationAvis.html b/packages/ui/src/components/etape/etape-edit-form.stories_snapshots_EtapeModificationAvis.html
index c8623bf671d862eeefa8f7f98096d5cd3d06488d..f0e207c42d0a00e3fab37d866b3aa944ad7843c8 100644
--- a/packages/ui/src/components/etape/etape-edit-form.stories_snapshots_EtapeModificationAvis.html
+++ b/packages/ui/src/components/etape/etape-edit-form.stories_snapshots_EtapeModificationAvis.html
@@ -9,10 +9,10 @@
     <div>
       <div class="fr-grid-row">
         <div class="fr-col-12 fr-col-xl-6">
-          <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Date
+          <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="etape_date">Date
               <!----><span class="fr-hint-text">au format jj/mm/aaaa</span>
               <!---->
-            </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2022-02-02">
+            </label><input class="fr-input" name="etape_date" id="etape_date" required="" type="date" value="2022-02-02">
             <!---->
           </div>
           <div class="fr-mt-2w">
@@ -146,9 +146,9 @@
       </div>
     </div>
     <!---->
-    <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="textarea_670">Notes (optionnel)
+    <div class="fr-input-group fr-mt-2w" style="flex-grow: 1;"><label class="fr-label" for="etape_notes">Notes (optionnel)
         <!---->
-      </label><textarea class="fr-input" name="textarea_670" id="textarea_670" value="Super notes de cette story"></textarea></div>
+      </label><textarea class="fr-input" name="etape_notes" id="etape_notes" value="Super notes de cette story"></textarea></div>
     <div class="fr-checkbox-group"><input name="archive" id="is_avertissement" type="checkbox"><label class="fr-label" for="is_avertissement">Cette note est un avertissement<span class="fr-hint-text">Apparait sur le résumé de la démarche</span></label></div>
   </div>
   <!---->
diff --git a/packages/ui/src/components/etape/etape-edit-form.tsx b/packages/ui/src/components/etape/etape-edit-form.tsx
index cd4e8541e45592a474402697394e22a5c19b71c2..554591a0ca0d782180088b1870e28b4966fa0c5f 100644
--- a/packages/ui/src/components/etape/etape-edit-form.tsx
+++ b/packages/ui/src/components/etape/etape-edit-form.tsx
@@ -696,7 +696,7 @@ const EtapeEditFormInternal = defineComponent<
         </Bloc>
       ) : null}
 
-      <DsfrTextarea required={false} initialValue={props.etape.note.valeur} class="fr-mt-2w" style="flex-grow: 1" legend={{ main: 'Notes' }} valueChanged={onUpdateNotes} />
+      <DsfrTextarea id="etape_notes" required={false} initialValue={props.etape.note.valeur} class="fr-mt-2w" style="flex-grow: 1" legend={{ main: 'Notes' }} valueChanged={onUpdateNotes} />
       <DsfrInputCheckbox
         id="is_avertissement"
         legend={{ main: 'Cette note est un avertissement', description: 'Apparait sur le résumé de la démarche' }}
diff --git a/packages/ui/src/components/etape/fondamentales-edit.stories_snapshots_ArmDemandeONF.html b/packages/ui/src/components/etape/fondamentales-edit.stories_snapshots_ArmDemandeONF.html
index 7b0f426cab56535e2d55a6fa0df1d74ff5b2adb2..ab352e047c4941b02a455440f560c772f0ae5851 100644
--- a/packages/ui/src/components/etape/fondamentales-edit.stories_snapshots_ArmDemandeONF.html
+++ b/packages/ui/src/components/etape/fondamentales-edit.stories_snapshots_ArmDemandeONF.html
@@ -2,23 +2,23 @@
   <div class="fr-col-12 fr-col-xl-6">
     <div class="fr-mb-1w">
       <div style="display: flex;">
-        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Durée (années)
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="fondamentale_duree_annees">Durée (années)
             <!---->
             <!---->
             <!---->
-          </label><input class="fr-input" name="input_670" id="input_670" required="" type="number" value="0">
+          </label><input class="fr-input" name="fondamentale_duree_annees" id="fondamentale_duree_annees" required="" type="number" value="0">
           <!---->
         </div>
-        <div class="fr-input-group fr-ml-2w" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Durée (mois)
+        <div class="fr-input-group fr-ml-2w" style="margin-bottom: 0px;"><label class="fr-label" for="fondamentale_duree_mois">Durée (mois)
             <!---->
             <!---->
             <!---->
-          </label><input class="fr-input" name="input_74" id="input_74" required="" type="number" value="4">
+          </label><input class="fr-input" name="fondamentale_duree_mois" id="fondamentale_duree_mois" required="" type="number" value="4">
           <!---->
         </div>
       </div>
       <div class="fr-pt-2w fr-pb-2w">
-        <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" id="toggle_878"><label class="fr-toggle__label" for="toggle_878" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
+        <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" id="heritage_duree"><label class="fr-toggle__label" for="heritage_duree" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
           <!---->
         </div>
       </div>
@@ -46,7 +46,7 @@
         </div>
       </div>
       <div class="fr-pt-2w fr-pb-2w">
-        <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="toggle_128"><label class="fr-toggle__label" for="toggle_128" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
+        <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="heritage_substances"><label class="fr-toggle__label" for="heritage_substances" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
           <!---->
         </div>
       </div>
diff --git a/packages/ui/src/components/etape/fondamentales-edit.stories_snapshots_ArmDemandeOperateur.html b/packages/ui/src/components/etape/fondamentales-edit.stories_snapshots_ArmDemandeOperateur.html
index e9c7330c420c1bd7511fdcc9428caa3a6eb8ed06..ee20e89d0c151708d8502561aff58b079cae060a 100644
--- a/packages/ui/src/components/etape/fondamentales-edit.stories_snapshots_ArmDemandeOperateur.html
+++ b/packages/ui/src/components/etape/fondamentales-edit.stories_snapshots_ArmDemandeOperateur.html
@@ -2,23 +2,23 @@
   <div class="fr-col-12 fr-col-xl-6">
     <div class="fr-mb-1w">
       <div style="display: flex;">
-        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Durée (années)
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="fondamentale_duree_annees">Durée (années)
             <!---->
             <!---->
             <!---->
-          </label><input class="fr-input" name="input_670" id="input_670" required="" type="number" value="0">
+          </label><input class="fr-input" name="fondamentale_duree_annees" id="fondamentale_duree_annees" required="" type="number" value="0">
           <!---->
         </div>
-        <div class="fr-input-group fr-ml-2w" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Durée (mois)
+        <div class="fr-input-group fr-ml-2w" style="margin-bottom: 0px;"><label class="fr-label" for="fondamentale_duree_mois">Durée (mois)
             <!---->
             <!---->
             <!---->
-          </label><input class="fr-input" name="input_74" id="input_74" required="" type="number" value="4">
+          </label><input class="fr-input" name="fondamentale_duree_mois" id="fondamentale_duree_mois" required="" type="number" value="4">
           <!---->
         </div>
       </div>
       <div class="fr-pt-2w fr-pb-2w">
-        <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" id="toggle_878"><label class="fr-toggle__label" for="toggle_878" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
+        <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" id="heritage_duree"><label class="fr-toggle__label" for="heritage_duree" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
           <!---->
         </div>
       </div>
@@ -35,7 +35,7 @@
         </div>
       </div>
       <div class="fr-pt-2w fr-pb-2w">
-        <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="toggle_25"><label class="fr-toggle__label" for="toggle_25" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
+        <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="heritage_substances"><label class="fr-toggle__label" for="heritage_substances" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
           <!---->
         </div>
       </div>
diff --git a/packages/ui/src/components/etape/fondamentales-edit.stories_snapshots_ArmJorfONF.html b/packages/ui/src/components/etape/fondamentales-edit.stories_snapshots_ArmJorfONF.html
index db0758a48496b55ddb00b933ac65cd2ff6b30bf0..02844130cf073666405b18fcb491d9535052c45c 100644
--- a/packages/ui/src/components/etape/fondamentales-edit.stories_snapshots_ArmJorfONF.html
+++ b/packages/ui/src/components/etape/fondamentales-edit.stories_snapshots_ArmJorfONF.html
@@ -2,39 +2,39 @@
   <div class="fr-col-12 fr-col-xl-6">
     <div class="fr-mb-1w">
       <div style="display: flex;">
-        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Durée (années)
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="fondamentale_duree_annees">Durée (années)
             <!---->
             <!---->
             <!---->
-          </label><input class="fr-input" name="input_670" id="input_670" required="" type="number" value="0">
+          </label><input class="fr-input" name="fondamentale_duree_annees" id="fondamentale_duree_annees" required="" type="number" value="0">
           <!---->
         </div>
-        <div class="fr-input-group fr-ml-2w" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Durée (mois)
+        <div class="fr-input-group fr-ml-2w" style="margin-bottom: 0px;"><label class="fr-label" for="fondamentale_duree_mois">Durée (mois)
             <!---->
             <!---->
             <!---->
-          </label><input class="fr-input" name="input_74" id="input_74" required="" type="number" value="4">
+          </label><input class="fr-input" name="fondamentale_duree_mois" id="fondamentale_duree_mois" required="" type="number" value="4">
           <!---->
         </div>
       </div>
       <div class="fr-pt-2w fr-pb-2w">
-        <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" id="toggle_878"><label class="fr-toggle__label" for="toggle_878" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
+        <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" id="heritage_duree"><label class="fr-toggle__label" for="heritage_duree" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
           <!---->
         </div>
       </div>
     </div>
     <div class="fr-mb-1w">
-      <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_25">Date de début (optionnel)<span class="fr-hint-text">au format jj/mm/aaaa</span>
+      <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="fondamentale_date_de_debut">Date de début (optionnel)<span class="fr-hint-text">au format jj/mm/aaaa</span>
           <!---->
-        </label><input class="fr-input" name="input_25" id="input_25" type="date" value="2022-02-02">
+        </label><input class="fr-input" name="fondamentale_date_de_debut" id="fondamentale_date_de_debut" type="date" value="2022-02-02">
         <!---->
       </div>
       <!---->
     </div>
     <div class="fr-mb-1w">
-      <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_772">Date d’échéance (optionnel)<span class="fr-hint-text">au format jj/mm/aaaa</span>
+      <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="fondamentale_date_echeance">Date d’échéance (optionnel)<span class="fr-hint-text">au format jj/mm/aaaa</span>
           <!---->
-        </label><input class="fr-input" name="input_772" id="input_772" type="date">
+        </label><input class="fr-input" name="fondamentale_date_echeance" id="fondamentale_date_echeance" type="date">
         <!---->
       </div>
       <!---->
@@ -61,7 +61,7 @@
         </div>
       </div>
       <div class="fr-pt-2w fr-pb-2w">
-        <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="toggle_487"><label class="fr-toggle__label" for="toggle_487" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
+        <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="heritage_substances"><label class="fr-toggle__label" for="heritage_substances" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
           <!---->
         </div>
       </div>
diff --git a/packages/ui/src/components/etape/fondamentales-edit.stories_snapshots_AxmDemandeONF.html b/packages/ui/src/components/etape/fondamentales-edit.stories_snapshots_AxmDemandeONF.html
index 7b0f426cab56535e2d55a6fa0df1d74ff5b2adb2..ab352e047c4941b02a455440f560c772f0ae5851 100644
--- a/packages/ui/src/components/etape/fondamentales-edit.stories_snapshots_AxmDemandeONF.html
+++ b/packages/ui/src/components/etape/fondamentales-edit.stories_snapshots_AxmDemandeONF.html
@@ -2,23 +2,23 @@
   <div class="fr-col-12 fr-col-xl-6">
     <div class="fr-mb-1w">
       <div style="display: flex;">
-        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Durée (années)
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="fondamentale_duree_annees">Durée (années)
             <!---->
             <!---->
             <!---->
-          </label><input class="fr-input" name="input_670" id="input_670" required="" type="number" value="0">
+          </label><input class="fr-input" name="fondamentale_duree_annees" id="fondamentale_duree_annees" required="" type="number" value="0">
           <!---->
         </div>
-        <div class="fr-input-group fr-ml-2w" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Durée (mois)
+        <div class="fr-input-group fr-ml-2w" style="margin-bottom: 0px;"><label class="fr-label" for="fondamentale_duree_mois">Durée (mois)
             <!---->
             <!---->
             <!---->
-          </label><input class="fr-input" name="input_74" id="input_74" required="" type="number" value="4">
+          </label><input class="fr-input" name="fondamentale_duree_mois" id="fondamentale_duree_mois" required="" type="number" value="4">
           <!---->
         </div>
       </div>
       <div class="fr-pt-2w fr-pb-2w">
-        <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" id="toggle_878"><label class="fr-toggle__label" for="toggle_878" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
+        <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" id="heritage_duree"><label class="fr-toggle__label" for="heritage_duree" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
           <!---->
         </div>
       </div>
@@ -46,7 +46,7 @@
         </div>
       </div>
       <div class="fr-pt-2w fr-pb-2w">
-        <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="toggle_128"><label class="fr-toggle__label" for="toggle_128" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
+        <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="heritage_substances"><label class="fr-toggle__label" for="heritage_substances" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
           <!---->
         </div>
       </div>
diff --git a/packages/ui/src/components/etape/fondamentales-edit.stories_snapshots_AxmDemandeSuper.html b/packages/ui/src/components/etape/fondamentales-edit.stories_snapshots_AxmDemandeSuper.html
index 7b0f426cab56535e2d55a6fa0df1d74ff5b2adb2..ab352e047c4941b02a455440f560c772f0ae5851 100644
--- a/packages/ui/src/components/etape/fondamentales-edit.stories_snapshots_AxmDemandeSuper.html
+++ b/packages/ui/src/components/etape/fondamentales-edit.stories_snapshots_AxmDemandeSuper.html
@@ -2,23 +2,23 @@
   <div class="fr-col-12 fr-col-xl-6">
     <div class="fr-mb-1w">
       <div style="display: flex;">
-        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Durée (années)
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="fondamentale_duree_annees">Durée (années)
             <!---->
             <!---->
             <!---->
-          </label><input class="fr-input" name="input_670" id="input_670" required="" type="number" value="0">
+          </label><input class="fr-input" name="fondamentale_duree_annees" id="fondamentale_duree_annees" required="" type="number" value="0">
           <!---->
         </div>
-        <div class="fr-input-group fr-ml-2w" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Durée (mois)
+        <div class="fr-input-group fr-ml-2w" style="margin-bottom: 0px;"><label class="fr-label" for="fondamentale_duree_mois">Durée (mois)
             <!---->
             <!---->
             <!---->
-          </label><input class="fr-input" name="input_74" id="input_74" required="" type="number" value="4">
+          </label><input class="fr-input" name="fondamentale_duree_mois" id="fondamentale_duree_mois" required="" type="number" value="4">
           <!---->
         </div>
       </div>
       <div class="fr-pt-2w fr-pb-2w">
-        <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" id="toggle_878"><label class="fr-toggle__label" for="toggle_878" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
+        <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" id="heritage_duree"><label class="fr-toggle__label" for="heritage_duree" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
           <!---->
         </div>
       </div>
@@ -46,7 +46,7 @@
         </div>
       </div>
       <div class="fr-pt-2w fr-pb-2w">
-        <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="toggle_128"><label class="fr-toggle__label" for="toggle_128" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
+        <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="heritage_substances"><label class="fr-toggle__label" for="heritage_substances" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
           <!---->
         </div>
       </div>
diff --git a/packages/ui/src/components/etape/fondamentales-edit.stories_snapshots_AxmDemandeTropLongue.html b/packages/ui/src/components/etape/fondamentales-edit.stories_snapshots_AxmDemandeTropLongue.html
index b8bc5955d5811e90e6726cc04d6eed18875a8ebb..d843bdb0d9469717ce11c8cfc9c1a34707d36f8a 100644
--- a/packages/ui/src/components/etape/fondamentales-edit.stories_snapshots_AxmDemandeTropLongue.html
+++ b/packages/ui/src/components/etape/fondamentales-edit.stories_snapshots_AxmDemandeTropLongue.html
@@ -2,18 +2,18 @@
   <div class="fr-col-12 fr-col-xl-6">
     <div class="fr-mb-1w">
       <div style="display: flex;">
-        <div class="fr-input-group fr-input-group--error" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Durée (années)
+        <div class="fr-input-group fr-input-group--error" style="margin-bottom: 0px;"><label class="fr-label" for="fondamentale_duree_annees">Durée (années)
             <!---->
             <!---->
             <!---->
-          </label><input class="fr-input fr-input--error" name="input_670" id="input_670" required="" type="number" aria-describedby="input_670-info" value="10">
-          <p id="input_670-info" class="fr-error-text">Un octroi d'AEX inférieur ou égal à 25 hectares ne peut pas dépasser 4 ans</p>
+          </label><input class="fr-input fr-input--error" name="fondamentale_duree_annees" id="fondamentale_duree_annees" required="" type="number" aria-describedby="fondamentale_duree_annees-info" value="10">
+          <p id="fondamentale_duree_annees-info" class="fr-error-text">Un octroi d'AEX inférieur ou égal à 25 hectares ne peut pas dépasser 4 ans</p>
         </div>
-        <div class="fr-input-group fr-ml-2w" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Durée (mois)
+        <div class="fr-input-group fr-ml-2w" style="margin-bottom: 0px;"><label class="fr-label" for="fondamentale_duree_mois">Durée (mois)
             <!---->
             <!---->
             <!---->
-          </label><input class="fr-input" name="input_74" id="input_74" required="" type="number" value="0">
+          </label><input class="fr-input" name="fondamentale_duree_mois" id="fondamentale_duree_mois" required="" type="number" value="0">
           <!---->
         </div>
       </div>
@@ -42,7 +42,7 @@
         </div>
       </div>
       <div class="fr-pt-2w fr-pb-2w">
-        <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="toggle_25"><label class="fr-toggle__label" for="toggle_25" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
+        <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="heritage_substances"><label class="fr-toggle__label" for="heritage_substances" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
           <!---->
         </div>
       </div>
diff --git a/packages/ui/src/components/etape/fondamentales-edit.stories_snapshots_PrmDemandeONF.html b/packages/ui/src/components/etape/fondamentales-edit.stories_snapshots_PrmDemandeONF.html
index d888ea386898200472f4eb85a922117d40d46bf5..b3a552daddf1df4425c30008694b7c050122b70d 100644
--- a/packages/ui/src/components/etape/fondamentales-edit.stories_snapshots_PrmDemandeONF.html
+++ b/packages/ui/src/components/etape/fondamentales-edit.stories_snapshots_PrmDemandeONF.html
@@ -2,23 +2,23 @@
   <div class="fr-col-12 fr-col-xl-6">
     <div class="fr-mb-1w">
       <div style="display: flex;">
-        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Durée (années)
+        <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="fondamentale_duree_annees">Durée (années)
             <!---->
             <!---->
             <!---->
-          </label><input class="fr-input" name="input_670" id="input_670" required="" type="number" value="0">
+          </label><input class="fr-input" name="fondamentale_duree_annees" id="fondamentale_duree_annees" required="" type="number" value="0">
           <!---->
         </div>
-        <div class="fr-input-group fr-ml-2w" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Durée (mois)
+        <div class="fr-input-group fr-ml-2w" style="margin-bottom: 0px;"><label class="fr-label" for="fondamentale_duree_mois">Durée (mois)
             <!---->
             <!---->
             <!---->
-          </label><input class="fr-input" name="input_74" id="input_74" required="" type="number" value="4">
+          </label><input class="fr-input" name="fondamentale_duree_mois" id="fondamentale_duree_mois" required="" type="number" value="4">
           <!---->
         </div>
       </div>
       <div class="fr-pt-2w fr-pb-2w">
-        <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" id="toggle_878"><label class="fr-toggle__label" for="toggle_878" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
+        <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" id="heritage_duree"><label class="fr-toggle__label" for="heritage_duree" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
           <!---->
         </div>
       </div>
@@ -57,7 +57,7 @@
         </div>
       </div>
       <div class="fr-pt-2w fr-pb-2w">
-        <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="toggle_772"><label class="fr-toggle__label" for="toggle_772" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
+        <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="heritage_substances"><label class="fr-toggle__label" for="heritage_substances" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
           <!---->
         </div>
       </div>
diff --git a/packages/ui/src/components/etape/fondamentales-edit.stories_snapshots_PrmDeplacementDePerimetreONF.html b/packages/ui/src/components/etape/fondamentales-edit.stories_snapshots_PrmDeplacementDePerimetreONF.html
index 28b091beb9c8f7fe05eaad6625e9fbf4c97642f1..11267ad5699b010a32907761341bc855a4429cef 100644
--- a/packages/ui/src/components/etape/fondamentales-edit.stories_snapshots_PrmDeplacementDePerimetreONF.html
+++ b/packages/ui/src/components/etape/fondamentales-edit.stories_snapshots_PrmDeplacementDePerimetreONF.html
@@ -13,7 +13,7 @@
         </div>
       </div>
       <div class="fr-pt-2w fr-pb-2w">
-        <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="toggle_670"><label class="fr-toggle__label" for="toggle_670" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
+        <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="heritage_substances"><label class="fr-toggle__label" for="heritage_substances" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2022</span></label>
           <!---->
         </div>
       </div>
diff --git a/packages/ui/src/components/etape/fondamentales-edit.tsx b/packages/ui/src/components/etape/fondamentales-edit.tsx
index 2298844bf70292bbb510a979a1e13a35a5aafd87..2878bb4b8bf36db078d0b9cb4851d480fa3d0d1d 100644
--- a/packages/ui/src/components/etape/fondamentales-edit.tsx
+++ b/packages/ui/src/components/etape/fondamentales-edit.tsx
@@ -153,6 +153,7 @@ export const FondamentalesEdit = defineComponent<Props>(props => {
             write={() => (
               <div style={{ display: 'flex' }}>
                 <DsfrInput
+                  id="fondamentale_duree_annees"
                   legend={{ main: 'Durée (années)', info: !dureeValid.value.valid ? { type: 'error', value: dureeValid.value.message } : undefined }}
                   required={!dureeOptionalCheck.value}
                   type={{ type: 'number' }}
@@ -160,6 +161,7 @@ export const FondamentalesEdit = defineComponent<Props>(props => {
                   initialValue={ans.value}
                 />
                 <DsfrInput
+                  id="fondamentale_duree_mois"
                   legend={{ main: 'Durée (mois)' }}
                   required={!dureeOptionalCheck.value}
                   type={{ type: 'number' }}
@@ -172,6 +174,7 @@ export const FondamentalesEdit = defineComponent<Props>(props => {
             read={heritagePropEtape => (
               <div style={{ display: 'flex' }}>
                 <DsfrInput
+                  id="fondamentale_duree_annees_heritee"
                   legend={{ main: 'Durée (années)' }}
                   required={!dureeOptionalCheck.value}
                   type={{ type: 'number' }}
@@ -180,6 +183,7 @@ export const FondamentalesEdit = defineComponent<Props>(props => {
                   initialValue={dureeToAns(heritagePropEtape?.value)}
                 />
                 <DsfrInput
+                  id="fondamentale_duree_mois_heritee"
                   legend={{ main: 'Durée (mois)' }}
                   required={!dureeOptionalCheck.value}
                   type={{ type: 'number' }}
@@ -202,10 +206,18 @@ export const FondamentalesEdit = defineComponent<Props>(props => {
               prop={editedEtape.value.dateDebut}
               label="Date de début"
               write={() => (
-                <DsfrInput required={datesRequiredCheck.value} type={{ type: 'date' }} legend={{ main: 'Date de début' }} initialValue={props.etape.dateDebut.value} valueChanged={dateDebutChanged} />
+                <DsfrInput
+                  id="fondamentale_date_de_debut"
+                  required={datesRequiredCheck.value}
+                  type={{ type: 'date' }}
+                  legend={{ main: 'Date de début' }}
+                  initialValue={props.etape.dateDebut.value}
+                  valueChanged={dateDebutChanged}
+                />
               )}
               read={heritagePropEtape => (
                 <DsfrInput
+                  id="fondamentale_date_de_debut_heritee"
                   required={datesRequiredCheck.value}
                   type={{ type: 'date' }}
                   legend={{ main: 'Date de début' }}
@@ -220,15 +232,23 @@ export const FondamentalesEdit = defineComponent<Props>(props => {
               updateHeritage={updateDateFinHeritage}
               hasHeritageValue={isNotNullNorUndefined(props.etape.dateFin.etapeHeritee?.value)}
               prop={editedEtape.value.dateFin}
-              label="Date d’échéance"
+              label="Date d'échéance"
               write={() => (
-                <DsfrInput required={datesRequiredCheck.value} type={{ type: 'date' }} legend={{ main: 'Date d’échéance' }} initialValue={props.etape.dateFin.value} valueChanged={dateFinChanged} />
+                <DsfrInput
+                  id="fondamentale_date_echeance"
+                  required={datesRequiredCheck.value}
+                  type={{ type: 'date' }}
+                  legend={{ main: 'Date d’échéance' }}
+                  initialValue={props.etape.dateFin.value}
+                  valueChanged={dateFinChanged}
+                />
               )}
               read={heritagePropEtape => (
                 <DsfrInput
+                  id="fondamentale_date_echeance_heritee"
                   required={datesRequiredCheck.value}
                   type={{ type: 'date' }}
-                  legend={{ main: 'Date d’échéance' }}
+                  legend={{ main: "Date d'échéance" }}
                   initialValue={heritagePropEtape?.value}
                   valueChanged={() => {}}
                   disabled={true}
diff --git a/packages/ui/src/components/etape/forages-import-popup.stories_snapshots_CsvSelected.html b/packages/ui/src/components/etape/forages-import-popup.stories_snapshots_CsvSelected.html
index 3dc63c466df41071d184b16684b3f9745058088e..4fbb41428f124484b16efecbe270a410d62241fc 100644
--- a/packages/ui/src/components/etape/forages-import-popup.stories_snapshots_CsvSelected.html
+++ b/packages/ui/src/components/etape/forages-import-popup.stories_snapshots_CsvSelected.html
@@ -13,77 +13,77 @@
                   <fieldset class="fr-fieldset fr-mt-2w" id="geographic">
                     <div class="fr-fieldset__element">
                       <div class="fr-select-group"><label class="fr-label" for="type">Système géographique</label>
-                        <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_271">Système géographique</label>
-                          <div id="typeahead_geosysteme_271_wrapper" class="_typeahead_8eddf1">
-                            <div class="flex"><input id="typeahead_geosysteme_271" type="text" title="" name="typeahead_geosysteme_271" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_271-control" aria-activedescendant="typeahead_geosysteme_271-control" aria-expanded="false" aria-autocomplete="list" value="RGF93 / Lambert-93 - (2154)"></div>
-                            <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_271-control" role="listbox">
-                              <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_271-control-0">
+                        <div class="fr-select-group"><label class="fr-label" for="forages_2154">Système géographique</label>
+                          <div id="forages_2154_wrapper" class="_typeahead_8eddf1">
+                            <div class="flex"><input id="forages_2154" type="text" title="" name="forages_2154" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="forages_2154-control" aria-activedescendant="forages_2154-control" aria-expanded="false" aria-autocomplete="list" value="RGF93 / Lambert-93 - (2154)"></div>
+                            <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="forages_2154-control" role="listbox">
+                              <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="forages_2154-control-0">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-1">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-1">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-2">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-2">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-3">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-3">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-4">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-4">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-5">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-5">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">WGS84 - (4326)</span><span class="fr-text">Monde</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-6">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-6">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-7">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-7">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-8">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-8">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-9">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-9">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-10">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-10">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-11">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-11">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-12">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-12">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-13">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-13">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-14">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-14">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-15">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-15">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-16">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-16">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-17">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-17">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-18">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-18">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-19">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-19">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-20">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-20">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-21">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-21">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-22">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-22">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                               </li>
                             </ul>
@@ -92,22 +92,22 @@
                       </div>
                     </div>
                   </fieldset>
-                  <fieldset class="fr-fieldset" id="radio_670" aria-labelledby="radio_670-legend" style="flex-direction: row; align-items: flex-start;">
-                    <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_670-legend">Type de fichier
+                  <fieldset class="fr-fieldset" id="forages_type_de_fichier" aria-labelledby="forages_type_de_fichier-legend" style="flex-direction: row; align-items: flex-start;">
+                    <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="forages_type_de_fichier-legend">Type de fichier
                       <!---->
                     </legend>
                     <div class="fr-fieldset__element fr-fieldset__element--inline">
-                      <div class="fr-radio-group"><input type="radio" id="radio_670-0" checked="" name="radio_670"><label class="fr-label" for="radio_670-0">csv
+                      <div class="fr-radio-group"><input type="radio" id="forages_type_de_fichier-0" checked="" name="forages_type_de_fichier"><label class="fr-label" for="forages_type_de_fichier-0">csv
                           <!---->
                         </label></div>
                     </div>
                     <div class="fr-fieldset__element fr-fieldset__element--inline">
-                      <div class="fr-radio-group"><input type="radio" id="radio_670-1" name="radio_670"><label class="fr-label" for="radio_670-1">geojson
+                      <div class="fr-radio-group"><input type="radio" id="forages_type_de_fichier-1" name="forages_type_de_fichier"><label class="fr-label" for="forages_type_de_fichier-1">geojson
                           <!---->
                         </label></div>
                     </div>
                     <div class="fr-fieldset__element fr-fieldset__element--inline">
-                      <div class="fr-radio-group"><input type="radio" id="radio_670-2" name="radio_670"><label class="fr-label" for="radio_670-2">shape
+                      <div class="fr-radio-group"><input type="radio" id="forages_type_de_fichier-2" name="forages_type_de_fichier"><label class="fr-label" for="forages_type_de_fichier-2">shape
                           <!---->
                         </label></div>
                     </div>
diff --git a/packages/ui/src/components/etape/forages-import-popup.stories_snapshots_Default.html b/packages/ui/src/components/etape/forages-import-popup.stories_snapshots_Default.html
index b990461b922ed8566ab5cb198707e9b3c33fcf49..c80e9996740cf199a07c40dd89bae81dbcb5c1fb 100644
--- a/packages/ui/src/components/etape/forages-import-popup.stories_snapshots_Default.html
+++ b/packages/ui/src/components/etape/forages-import-popup.stories_snapshots_Default.html
@@ -13,77 +13,77 @@
                   <fieldset class="fr-fieldset fr-mt-2w" id="geographic">
                     <div class="fr-fieldset__element">
                       <div class="fr-select-group"><label class="fr-label" for="type">Système géographique</label>
-                        <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_271">Système géographique</label>
-                          <div id="typeahead_geosysteme_271_wrapper" class="_typeahead_8eddf1">
-                            <div class="flex"><input id="typeahead_geosysteme_271" type="text" title="" name="typeahead_geosysteme_271" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_271-control" aria-activedescendant="typeahead_geosysteme_271-control" aria-expanded="false" aria-autocomplete="list" value="RGF93 / Lambert-93 - (2154)"></div>
-                            <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_271-control" role="listbox">
-                              <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_271-control-0">
+                        <div class="fr-select-group"><label class="fr-label" for="forages_2154">Système géographique</label>
+                          <div id="forages_2154_wrapper" class="_typeahead_8eddf1">
+                            <div class="flex"><input id="forages_2154" type="text" title="" name="forages_2154" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="forages_2154-control" aria-activedescendant="forages_2154-control" aria-expanded="false" aria-autocomplete="list" value="RGF93 / Lambert-93 - (2154)"></div>
+                            <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="forages_2154-control" role="listbox">
+                              <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="forages_2154-control-0">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-1">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-1">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-2">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-2">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-3">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-3">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-4">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-4">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-5">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-5">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">WGS84 - (4326)</span><span class="fr-text">Monde</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-6">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-6">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-7">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-7">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-8">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-8">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-9">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-9">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-10">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-10">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-11">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-11">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-12">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-12">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-13">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-13">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-14">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-14">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-15">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-15">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-16">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-16">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-17">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-17">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-18">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-18">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-19">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-19">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-20">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-20">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-21">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-21">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-22">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="forages_2154-control-22">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                               </li>
                             </ul>
@@ -92,22 +92,22 @@
                       </div>
                     </div>
                   </fieldset>
-                  <fieldset class="fr-fieldset" id="radio_670" aria-labelledby="radio_670-legend" style="flex-direction: row; align-items: flex-start;">
-                    <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_670-legend">Type de fichier
+                  <fieldset class="fr-fieldset" id="forages_type_de_fichier" aria-labelledby="forages_type_de_fichier-legend" style="flex-direction: row; align-items: flex-start;">
+                    <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="forages_type_de_fichier-legend">Type de fichier
                       <!---->
                     </legend>
                     <div class="fr-fieldset__element fr-fieldset__element--inline">
-                      <div class="fr-radio-group"><input type="radio" id="radio_670-0" name="radio_670"><label class="fr-label" for="radio_670-0">csv
+                      <div class="fr-radio-group"><input type="radio" id="forages_type_de_fichier-0" name="forages_type_de_fichier"><label class="fr-label" for="forages_type_de_fichier-0">csv
                           <!---->
                         </label></div>
                     </div>
                     <div class="fr-fieldset__element fr-fieldset__element--inline">
-                      <div class="fr-radio-group"><input type="radio" id="radio_670-1" name="radio_670"><label class="fr-label" for="radio_670-1">geojson
+                      <div class="fr-radio-group"><input type="radio" id="forages_type_de_fichier-1" name="forages_type_de_fichier"><label class="fr-label" for="forages_type_de_fichier-1">geojson
                           <!---->
                         </label></div>
                     </div>
                     <div class="fr-fieldset__element fr-fieldset__element--inline">
-                      <div class="fr-radio-group"><input type="radio" id="radio_670-2" name="radio_670"><label class="fr-label" for="radio_670-2">shape
+                      <div class="fr-radio-group"><input type="radio" id="forages_type_de_fichier-2" name="forages_type_de_fichier"><label class="fr-label" for="forages_type_de_fichier-2">shape
                           <!---->
                         </label></div>
                     </div>
diff --git a/packages/ui/src/components/etape/forages-import-popup.tsx b/packages/ui/src/components/etape/forages-import-popup.tsx
index 844369121f1505a308789cf4f80fafb4bba13fe6..1266d4e62bd38544082509365cd06e53522e6c53 100644
--- a/packages/ui/src/components/etape/forages-import-popup.tsx
+++ b/packages/ui/src/components/etape/forages-import-popup.tsx
@@ -39,11 +39,12 @@ export const ForagesImportPopup = defineComponent<Props>(props => {
             <label class="fr-label" for="type">
               Système géographique
             </label>
-            <GeoSystemeTypeahead geoSystemeId={props.geoSystemeId} disabled={true} />
+            <GeoSystemeTypeahead id={`forages_${props.geoSystemeId}`} geoSystemeId={props.geoSystemeId} disabled={true} />
           </div>
         </div>
       </fieldset>
       <DsfrInputRadio
+        id="forages_type_de_fichier"
         required={true}
         legend={{ main: 'Type de fichier' }}
         orientation="horizontal"
diff --git a/packages/ui/src/components/etape/heritage-edit.stories.tsx b/packages/ui/src/components/etape/heritage-edit.stories.tsx
index d69e470f401c58ba5a04ab75a2f4979ece427e8f..6493fcd0d03410961f54a1e3429c8ae043136093 100644
--- a/packages/ui/src/components/etape/heritage-edit.stories.tsx
+++ b/packages/ui/src/components/etape/heritage-edit.stories.tsx
@@ -21,7 +21,7 @@ export const HeritageDisabled: StoryFn = () => (
     hasHeritageValue={true}
     prop={{ value: null, heritee: false, etapeHeritee: { date: toCaminoDate('2024-01-01'), etapeTypeId: 'mfr', value: toCaminoDate('2022-01-01') } }}
     label="Date de début"
-    write={() => <DsfrInput required={true} legend={{ main: '' }} type={{ type: 'date' }} valueChanged={dateChangedAction} class="mb-s" />}
+    write={() => <DsfrInput id="test" required={true} legend={{ main: '' }} type={{ type: 'date' }} valueChanged={dateChangedAction} class="mb-s" />}
     read={heritagePropEtape => <div class="border p-s mb-s bold">{heritagePropEtape?.value !== undefined ? dateFormat(heritagePropEtape.value) : 'Pas de date'}</div>}
   />
 )
@@ -33,7 +33,7 @@ export const HeritageEnabled: StoryFn = () => (
     hasHeritageValue={true}
     prop={{ value: toCaminoDate('2022-01-01'), heritee: true, etapeHeritee: { date: toCaminoDate('2024-01-01'), etapeTypeId: 'mfr', value: toCaminoDate('2022-01-01') } }}
     label="Date de début"
-    write={() => <DsfrInput required={true} legend={{ main: '' }} type={{ type: 'date' }} valueChanged={dateChangedAction} class="mb-s" />}
+    write={() => <DsfrInput id="test" required={true} legend={{ main: '' }} type={{ type: 'date' }} valueChanged={dateChangedAction} class="mb-s" />}
     read={heritagePropEtape => <div class="border p-s mb-s bold">{heritagePropEtape?.value !== undefined ? dateFormat(heritagePropEtape.value) : 'Pas de date'}</div>}
   />
 )
@@ -45,7 +45,7 @@ export const HeritageEnabledWithoutValue: StoryFn = () => (
     hasHeritageValue={false}
     prop={{ value: toCaminoDate('2024-01-01'), heritee: true, etapeHeritee: { date: toCaminoDate('2024-01-01'), etapeTypeId: 'mfr', value: null } }}
     label="Date de début"
-    write={() => <DsfrInput required={true} legend={{ main: '' }} type={{ type: 'date' }} valueChanged={dateChangedAction} class="mb-s" />}
+    write={() => <DsfrInput id="test" required={true} legend={{ main: '' }} type={{ type: 'date' }} valueChanged={dateChangedAction} class="mb-s" />}
     read={heritagePropEtape => <div class="border p-s mb-s bold">{heritagePropEtape?.value !== undefined ? dateFormat(heritagePropEtape.value) : 'Pas de date'}</div>}
   />
 )
@@ -57,7 +57,7 @@ export const NoHeritage: StoryFn = () => (
     hasHeritageValue={false}
     prop={{ value: null, heritee: false, etapeHeritee: null }}
     label="Date de début"
-    write={() => <DsfrInput required={true} legend={{ main: '' }} type={{ type: 'date' }} valueChanged={dateChangedAction} class="mb-s" />}
+    write={() => <DsfrInput id="test" required={true} legend={{ main: '' }} type={{ type: 'date' }} valueChanged={dateChangedAction} class="mb-s" />}
     read={() => <div class="border p-s mb-s bold">Pas de date</div>}
   />
 )
@@ -69,7 +69,7 @@ export const Optional: StoryFn = () => (
     hasHeritageValue={false}
     prop={{ value: null, heritee: false, etapeHeritee: null }}
     label="Date de début"
-    write={() => <DsfrInput required={false} legend={{ main: '' }} type={{ type: 'date' }} valueChanged={dateChangedAction} class="mb-s" />}
+    write={() => <DsfrInput id="test" required={false} legend={{ main: '' }} type={{ type: 'date' }} valueChanged={dateChangedAction} class="mb-s" />}
     read={() => <div class="border p-s mb-s bold">Pas de date</div>}
   />
 )
diff --git a/packages/ui/src/components/etape/heritage-edit.stories_snapshots_HeritageDisabled.html b/packages/ui/src/components/etape/heritage-edit.stories_snapshots_HeritageDisabled.html
index ed8a11c7ad82e518097fe736a345617c232041ca..b87d93d78f4f5227e054a716365993bb01e6bc09 100644
--- a/packages/ui/src/components/etape/heritage-edit.stories_snapshots_HeritageDisabled.html
+++ b/packages/ui/src/components/etape/heritage-edit.stories_snapshots_HeritageDisabled.html
@@ -1,12 +1,12 @@
 <div class="fr-mb-1w">
-  <div class="fr-input-group mb-s" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">
+  <div class="fr-input-group mb-s" style="margin-bottom: 0px;"><label class="fr-label" for="test">
       <!----><span class="fr-hint-text">au format jj/mm/aaaa</span>
       <!---->
-    </label><input class="fr-input" name="input_670" id="input_670" required="" type="date">
+    </label><input class="fr-input" name="test" id="test" required="" type="date">
     <!---->
   </div>
   <div class="fr-pt-2w fr-pb-2w">
-    <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" id="toggle_74"><label class="fr-toggle__label" for="toggle_74" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2024</span></label>
+    <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" id="heritage_date-de-debut"><label class="fr-toggle__label" for="heritage_date-de-debut" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2024</span></label>
       <!---->
     </div>
   </div>
diff --git a/packages/ui/src/components/etape/heritage-edit.stories_snapshots_HeritageEnabled.html b/packages/ui/src/components/etape/heritage-edit.stories_snapshots_HeritageEnabled.html
index 519578194b998e69b0552aa8f3235ab11412bbc1..500da8d41b120f0453309ae816af24b5654e268c 100644
--- a/packages/ui/src/components/etape/heritage-edit.stories_snapshots_HeritageEnabled.html
+++ b/packages/ui/src/components/etape/heritage-edit.stories_snapshots_HeritageEnabled.html
@@ -3,7 +3,7 @@
     <div class="border p-s mb-s bold">01-01-2022</div>
   </div>
   <div class="fr-pt-2w fr-pb-2w">
-    <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="toggle_670"><label class="fr-toggle__label" for="toggle_670" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2024</span></label>
+    <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="heritage_date-de-debut"><label class="fr-toggle__label" for="heritage_date-de-debut" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2024</span></label>
       <!---->
     </div>
   </div>
diff --git a/packages/ui/src/components/etape/heritage-edit.stories_snapshots_HeritageEnabledWithoutValue.html b/packages/ui/src/components/etape/heritage-edit.stories_snapshots_HeritageEnabledWithoutValue.html
index 6f743d08ea57484e156c6ee1695817740f5b59f0..40b7c0135f4dd76f809b54a0350cf70ba5775307 100644
--- a/packages/ui/src/components/etape/heritage-edit.stories_snapshots_HeritageEnabledWithoutValue.html
+++ b/packages/ui/src/components/etape/heritage-edit.stories_snapshots_HeritageEnabledWithoutValue.html
@@ -1,15 +1,15 @@
 <div class="fr-mb-1w">
   <div>
-    <div class="fr-input-group fr-input-group--disabled" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Date de début
+    <div class="fr-input-group fr-input-group--disabled" style="margin-bottom: 0px;"><label class="fr-label" for="date-de-debut">Date de début
         <!---->
         <!---->
         <!---->
-      </label><input class="fr-input" name="input_670" id="input_670" disabled="" required="" type="text" value="Non renseigné">
+      </label><input class="fr-input" name="date-de-debut" id="date-de-debut" disabled="" required="" type="text" value="Non renseigné">
       <!---->
     </div>
   </div>
   <div class="fr-pt-2w fr-pb-2w">
-    <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="toggle_74"><label class="fr-toggle__label" for="toggle_74" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2024</span></label>
+    <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="heritage_date-de-debut"><label class="fr-toggle__label" for="heritage_date-de-debut" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2024</span></label>
       <!---->
     </div>
   </div>
diff --git a/packages/ui/src/components/etape/heritage-edit.stories_snapshots_NoHeritage.html b/packages/ui/src/components/etape/heritage-edit.stories_snapshots_NoHeritage.html
index d2308ba2876007f09b1ab8c158881e5845c35b9c..0255ee5b9d6fc7ab2a0dba171dfe4dfabdeba8f6 100644
--- a/packages/ui/src/components/etape/heritage-edit.stories_snapshots_NoHeritage.html
+++ b/packages/ui/src/components/etape/heritage-edit.stories_snapshots_NoHeritage.html
@@ -1,8 +1,8 @@
 <div class="fr-mb-1w">
-  <div class="fr-input-group mb-s" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">
+  <div class="fr-input-group mb-s" style="margin-bottom: 0px;"><label class="fr-label" for="test">
       <!----><span class="fr-hint-text">au format jj/mm/aaaa</span>
       <!---->
-    </label><input class="fr-input" name="input_670" id="input_670" required="" type="date">
+    </label><input class="fr-input" name="test" id="test" required="" type="date">
     <!---->
   </div>
   <!---->
diff --git a/packages/ui/src/components/etape/heritage-edit.stories_snapshots_Optional.html b/packages/ui/src/components/etape/heritage-edit.stories_snapshots_Optional.html
index c0492dd7625ae3b2eb3a4304188d024eaf5f4ccd..25983815a18f4fc430a6ccd085a2c292b5bcf0c8 100644
--- a/packages/ui/src/components/etape/heritage-edit.stories_snapshots_Optional.html
+++ b/packages/ui/src/components/etape/heritage-edit.stories_snapshots_Optional.html
@@ -1,7 +1,7 @@
 <div class="fr-mb-1w">
-  <div class="fr-input-group mb-s" style="margin-bottom: 0px;"><label class="fr-label" for="input_670"> (optionnel)<span class="fr-hint-text">au format jj/mm/aaaa</span>
+  <div class="fr-input-group mb-s" style="margin-bottom: 0px;"><label class="fr-label" for="test"> (optionnel)<span class="fr-hint-text">au format jj/mm/aaaa</span>
       <!---->
-    </label><input class="fr-input" name="input_670" id="input_670" type="date">
+    </label><input class="fr-input" name="test" id="test" type="date">
     <!---->
   </div>
   <!---->
diff --git a/packages/ui/src/components/etape/heritage-edit.tsx b/packages/ui/src/components/etape/heritage-edit.tsx
index a3daae52eb97b52769a76a03eae9de8c68b9ca81..2a23b4e1ba8e9723b2fdf58f7976ccaa094b329b 100644
--- a/packages/ui/src/components/etape/heritage-edit.tsx
+++ b/packages/ui/src/components/etape/heritage-edit.tsx
@@ -3,10 +3,9 @@ import { HTMLAttributes } from 'vue'
 import { isNotNullNorUndefined } from 'camino-common/src/typescript-tools'
 import { DsfrToggle } from '../_ui/dsfr-toggle'
 import { EtapesTypes } from 'camino-common/src/static/etapesTypes'
-import { capitalize } from 'camino-common/src/strings'
+import { capitalize, slugify } from 'camino-common/src/strings'
 import type { JSX } from 'vue/jsx-runtime'
 import { DsfrInput } from '@/components/_ui/dsfr-input'
-import { random } from '../../utils/vue-tsx-utils'
 import { FlattenedContenuElement, FlattenEtape } from 'camino-common/src/etape-form'
 import { fr } from '@codegouvfr/react-dsfr'
 
@@ -25,7 +24,7 @@ type Props<T extends HeritagePossible> = {
   write: () => JSX.Element
   required: boolean
   read: (heritagePropEtape?: NoInfer<T>['etapeHeritee']) => JSX.Element
-  label: string | null
+  label: string
   hasHeritageValue: boolean
   class?: HTMLAttributes['class']
   updateHeritage: (update: NoInfer<T>) => void
@@ -44,7 +43,7 @@ export const HeritageEdit = <T extends HeritagePossible>(props: Props<T>): JSX.E
 
   const dummyValueChanged = () => {}
   // TODO 2024-05-14 WTF! Sans la clé il récupère un ancien input et le modifie que à moitié. Le bug est présent sur le champ « Durée » quand on a passe d’une valeur saisie à un héritage Non Renseigné
-  const dummyKey = `empty_input_${(random() * 1000).toFixed()}`
+  const dummyKey = `empty_input_${self.crypto.randomUUID()}`
 
   const etapeHeritee = props.prop.etapeHeritee ?? null
   return (
@@ -57,12 +56,13 @@ export const HeritageEdit = <T extends HeritagePossible>(props: Props<T>): JSX.E
             props.read(etapeHeritee)
           ) : (
             <DsfrInput
+              id={slugify(props.label)}
               key={dummyKey}
               type={{ type: 'text' }}
               disabled={true}
               required={props.required}
               initialValue={'Non renseigné'}
-              legend={{ main: props.label ?? '', visible: props.label !== null }}
+              legend={{ main: props.label, visible: true }}
               valueChanged={dummyValueChanged}
             />
           )}
@@ -72,6 +72,7 @@ export const HeritageEdit = <T extends HeritagePossible>(props: Props<T>): JSX.E
       {isNotNullNorUndefined(etapeHeritee) ? (
         <div class={[fr.cx('fr-pt-2w'), fr.cx('fr-pb-2w')]}>
           <DsfrToggle
+            id={`heritage_${slugify(props.label)}`}
             initialValue={props.prop.heritee}
             valueChanged={updateHeritage}
             legendLabel={`Hériter de l’étape "${capitalize(EtapesTypes[etapeHeritee.etapeTypeId].nom)}" du ${dateFormat(etapeHeritee.date)}`}
diff --git a/packages/ui/src/components/etape/perimetre-edit.stories_snapshots_EmptyHeritage.html b/packages/ui/src/components/etape/perimetre-edit.stories_snapshots_EmptyHeritage.html
index 52d56dab41b5ebedabaf1777c39a1287b5a2d263..c3d1503f8b8c7fbd9f63261d054c1e8940f64db0 100644
--- a/packages/ui/src/components/etape/perimetre-edit.stories_snapshots_EmptyHeritage.html
+++ b/packages/ui/src/components/etape/perimetre-edit.stories_snapshots_EmptyHeritage.html
@@ -1,13 +1,16 @@
 <div>
   <div class="fr-mb-1w">
     <div>
-      <div class="fr-input-group fr-input-group--disabled" style="margin-bottom: 0px;">
-        <!----><input class="fr-input" name="input_670" id="input_670" disabled="" required="" type="text" value="Non renseigné">
+      <div class="fr-input-group fr-input-group--disabled" style="margin-bottom: 0px;"><label class="fr-label" for="perimetre">Périmètre
+          <!---->
+          <!---->
+          <!---->
+        </label><input class="fr-input" name="perimetre" id="perimetre" disabled="" required="" type="text" value="Non renseigné">
         <!---->
       </div>
     </div>
     <div class="fr-pt-2w fr-pb-2w">
-      <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="toggle_74"><label class="fr-toggle__label" for="toggle_74" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2023</span></label>
+      <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="heritage_perimetre"><label class="fr-toggle__label" for="heritage_perimetre" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2023</span></label>
         <!---->
       </div>
     </div>
diff --git a/packages/ui/src/components/etape/perimetre-edit.stories_snapshots_FilledNoHeritage.html b/packages/ui/src/components/etape/perimetre-edit.stories_snapshots_FilledNoHeritage.html
index ac57ab60582f65eb222cac25eb7c481b960aa96b..109c9cd1978c9677a79bdb8535fe48a3c830dece 100644
--- a/packages/ui/src/components/etape/perimetre-edit.stories_snapshots_FilledNoHeritage.html
+++ b/packages/ui/src/components/etape/perimetre-edit.stories_snapshots_FilledNoHeritage.html
@@ -7,85 +7,85 @@
         <div>
           <div class="fr-tabs" style="--tabs-height: 0px;">
             <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-              <li role="presentation"><button id="tabpanel-carte-670" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-670-panel">Carte</button></li>
-              <li role="presentation"><button id="tabpanel-points-670" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-670-panel">Tableau</button></li>
+              <li role="presentation"><button id="tabpanel-carte-perimetre_edit" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-perimetre_edit-panel">Carte</button></li>
+              <li role="presentation"><button id="tabpanel-points-perimetre_edit" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-perimetre_edit-panel">Tableau</button></li>
             </ul>
-            <div id="tabpanel-carte-670-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-670" tabindex="0">
+            <div id="tabpanel-carte-perimetre_edit-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-perimetre_edit" tabindex="0">
               <!---->
             </div>
-            <div id="tabpanel-points-670-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-670" tabindex="0">
+            <div id="tabpanel-points-perimetre_edit-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-perimetre_edit" tabindex="0">
               <div style="display: flex; flex-direction: column;">
-                <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_74">Système géographique</label>
-                  <div id="typeahead_geosysteme_74_wrapper" class="_typeahead_8eddf1">
-                    <div class="flex"><input id="typeahead_geosysteme_74" type="text" title="" name="typeahead_geosysteme_74" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_74-control" aria-activedescendant="typeahead_geosysteme_74-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
-                    <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_74-control" role="listbox">
-                      <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_74-control-0">
+                <div class="fr-select-group"><label class="fr-label" for="4326">Système géographique</label>
+                  <div id="4326_wrapper" class="_typeahead_8eddf1">
+                    <div class="flex"><input id="4326" type="text" title="" name="4326" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="4326-control" aria-activedescendant="4326-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+                    <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="4326-control" role="listbox">
+                      <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="4326-control-0">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-1">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-1">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-2">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-2">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-3">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-3">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-4">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-4">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-5">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-5">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-6">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-6">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-7">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-7">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-8">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-8">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-9">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-9">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-10">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-10">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-11">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-11">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-12">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-12">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-13">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-13">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-14">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-14">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-15">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-15">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-16">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-16">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-17">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-17">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-18">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-18">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-19">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-19">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-20">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-20">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-21">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-21">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-22">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-22">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                       </li>
                     </ul>
diff --git a/packages/ui/src/components/etape/perimetre-edit.stories_snapshots_Heritage.html b/packages/ui/src/components/etape/perimetre-edit.stories_snapshots_Heritage.html
index a25a178995ae7c6de0da900cd4897344eb34cb60..b98292210cbd85b37a792e515bb77d6793a4e9ac 100644
--- a/packages/ui/src/components/etape/perimetre-edit.stories_snapshots_Heritage.html
+++ b/packages/ui/src/components/etape/perimetre-edit.stories_snapshots_Heritage.html
@@ -5,85 +5,85 @@
         <div>
           <div class="fr-tabs" style="--tabs-height: 0px;">
             <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-              <li role="presentation"><button id="tabpanel-carte-670" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-670-panel">Carte</button></li>
-              <li role="presentation"><button id="tabpanel-points-670" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-670-panel">Tableau</button></li>
+              <li role="presentation"><button id="tabpanel-carte-perimetre_edit" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-perimetre_edit-panel">Carte</button></li>
+              <li role="presentation"><button id="tabpanel-points-perimetre_edit" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-perimetre_edit-panel">Tableau</button></li>
             </ul>
-            <div id="tabpanel-carte-670-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-670" tabindex="0">
+            <div id="tabpanel-carte-perimetre_edit-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-perimetre_edit" tabindex="0">
               <!---->
             </div>
-            <div id="tabpanel-points-670-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-670" tabindex="0">
+            <div id="tabpanel-points-perimetre_edit-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-perimetre_edit" tabindex="0">
               <div style="display: flex; flex-direction: column;">
-                <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_74">Système géographique</label>
-                  <div id="typeahead_geosysteme_74_wrapper" class="_typeahead_8eddf1">
-                    <div class="flex"><input id="typeahead_geosysteme_74" type="text" title="" name="typeahead_geosysteme_74" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_74-control" aria-activedescendant="typeahead_geosysteme_74-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
-                    <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_74-control" role="listbox">
-                      <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_74-control-0">
+                <div class="fr-select-group"><label class="fr-label" for="4326">Système géographique</label>
+                  <div id="4326_wrapper" class="_typeahead_8eddf1">
+                    <div class="flex"><input id="4326" type="text" title="" name="4326" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="4326-control" aria-activedescendant="4326-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+                    <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="4326-control" role="listbox">
+                      <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="4326-control-0">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-1">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-1">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-2">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-2">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-3">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-3">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-4">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-4">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-5">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-5">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-6">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-6">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-7">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-7">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-8">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-8">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-9">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-9">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-10">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-10">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-11">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-11">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-12">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-12">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-13">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-13">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-14">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-14">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-15">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-15">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-16">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-16">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-17">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-17">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-18">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-18">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-19">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-19">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-20">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-20">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-21">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-21">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-22">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-22">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                       </li>
                     </ul>
@@ -151,7 +151,7 @@
       </div>
     </div>
     <div class="fr-pt-2w fr-pb-2w">
-      <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="toggle_878"><label class="fr-toggle__label" for="toggle_878" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2023</span></label>
+      <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="heritage_perimetre"><label class="fr-toggle__label" for="heritage_perimetre" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2023</span></label>
         <!---->
       </div>
     </div>
diff --git a/packages/ui/src/components/etape/perimetre-edit.stories_snapshots_LegacyGeoSysteme.html b/packages/ui/src/components/etape/perimetre-edit.stories_snapshots_LegacyGeoSysteme.html
index 310ee0823abb98e2823b7c87386e149f287163ee..e4ce72ff98e83227dd2e502115414826eab46691 100644
--- a/packages/ui/src/components/etape/perimetre-edit.stories_snapshots_LegacyGeoSysteme.html
+++ b/packages/ui/src/components/etape/perimetre-edit.stories_snapshots_LegacyGeoSysteme.html
@@ -7,85 +7,85 @@
         <div>
           <div class="fr-tabs" style="--tabs-height: 0px;">
             <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-              <li role="presentation"><button id="tabpanel-carte-670" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-670-panel">Carte</button></li>
-              <li role="presentation"><button id="tabpanel-points-670" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-670-panel">Tableau</button></li>
+              <li role="presentation"><button id="tabpanel-carte-perimetre_edit" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-perimetre_edit-panel">Carte</button></li>
+              <li role="presentation"><button id="tabpanel-points-perimetre_edit" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-perimetre_edit-panel">Tableau</button></li>
             </ul>
-            <div id="tabpanel-carte-670-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-670" tabindex="0">
+            <div id="tabpanel-carte-perimetre_edit-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-perimetre_edit" tabindex="0">
               <!---->
             </div>
-            <div id="tabpanel-points-670-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-670" tabindex="0">
+            <div id="tabpanel-points-perimetre_edit-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-perimetre_edit" tabindex="0">
               <div style="display: flex; flex-direction: column;">
-                <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_74">Système géographique</label>
-                  <div id="typeahead_geosysteme_74_wrapper" class="_typeahead_8eddf1">
-                    <div class="flex"><input id="typeahead_geosysteme_74" type="text" title="" name="typeahead_geosysteme_74" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_74-control" aria-activedescendant="typeahead_geosysteme_74-control" aria-expanded="false" aria-autocomplete="list" value="RGFG95 - (4624)"></div>
-                    <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_74-control" role="listbox">
-                      <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_74-control-0">
+                <div class="fr-select-group"><label class="fr-label" for="4624">Système géographique</label>
+                  <div id="4624_wrapper" class="_typeahead_8eddf1">
+                    <div class="flex"><input id="4624" type="text" title="" name="4624" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="4624-control" aria-activedescendant="4624-control" aria-expanded="false" aria-autocomplete="list" value="RGFG95 - (4624)"></div>
+                    <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="4624-control" role="listbox">
+                      <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="4624-control-0">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-1">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-1">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-2">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-2">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-3">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-3">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-4">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-4">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-5">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-5">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-6">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-6">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">WGS84 - (4326)</span><span class="fr-text">Monde</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-7">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-7">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-8">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-8">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-9">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-9">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-10">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-10">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-11">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-11">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-12">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-12">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-13">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-13">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-14">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-14">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-15">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-15">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-16">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-16">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-17">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-17">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-18">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-18">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-19">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-19">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-20">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-20">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-21">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-21">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-22">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4624-control-22">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                       </li>
                     </ul>
diff --git a/packages/ui/src/components/etape/perimetre-edit.stories_snapshots_WithForages.html b/packages/ui/src/components/etape/perimetre-edit.stories_snapshots_WithForages.html
index 5a7951295582718f92875dc34d93f0e125abed6f..d5b85b36d5b4b950cb910b530ea2b2bbe278f09f 100644
--- a/packages/ui/src/components/etape/perimetre-edit.stories_snapshots_WithForages.html
+++ b/packages/ui/src/components/etape/perimetre-edit.stories_snapshots_WithForages.html
@@ -6,85 +6,85 @@
         <div>
           <div class="fr-tabs" style="--tabs-height: 0px;">
             <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-              <li role="presentation"><button id="tabpanel-carte-670" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-670-panel">Carte</button></li>
-              <li role="presentation"><button id="tabpanel-points-670" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-670-panel">Tableau</button></li>
+              <li role="presentation"><button id="tabpanel-carte-perimetre_edit" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-perimetre_edit-panel">Carte</button></li>
+              <li role="presentation"><button id="tabpanel-points-perimetre_edit" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-perimetre_edit-panel">Tableau</button></li>
             </ul>
-            <div id="tabpanel-carte-670-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-670" tabindex="0">
+            <div id="tabpanel-carte-perimetre_edit-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-perimetre_edit" tabindex="0">
               <!---->
             </div>
-            <div id="tabpanel-points-670-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-670" tabindex="0">
+            <div id="tabpanel-points-perimetre_edit-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-perimetre_edit" tabindex="0">
               <div style="display: flex; flex-direction: column;">
-                <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_74">Système géographique</label>
-                  <div id="typeahead_geosysteme_74_wrapper" class="_typeahead_8eddf1">
-                    <div class="flex"><input id="typeahead_geosysteme_74" type="text" title="" name="typeahead_geosysteme_74" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_74-control" aria-activedescendant="typeahead_geosysteme_74-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
-                    <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_74-control" role="listbox">
-                      <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_74-control-0">
+                <div class="fr-select-group"><label class="fr-label" for="4326">Système géographique</label>
+                  <div id="4326_wrapper" class="_typeahead_8eddf1">
+                    <div class="flex"><input id="4326" type="text" title="" name="4326" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="4326-control" aria-activedescendant="4326-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+                    <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="4326-control" role="listbox">
+                      <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="4326-control-0">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-1">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-1">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-2">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-2">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-3">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-3">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-4">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-4">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-5">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-5">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-6">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-6">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-7">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-7">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-8">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-8">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-9">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-9">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-10">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-10">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-11">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-11">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-12">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-12">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-13">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-13">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-14">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-14">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-15">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-15">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-16">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-16">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-17">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-17">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-18">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-18">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-19">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-19">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-20">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-20">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-21">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-21">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                       </li>
-                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_74-control-22">
+                      <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-22">
                         <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                       </li>
                     </ul>
diff --git a/packages/ui/src/components/etape/perimetre-edit.tsx b/packages/ui/src/components/etape/perimetre-edit.tsx
index 30bcbbb8dccbc24c47fe7792036fba7f52618fcb..de1d6559d0f9149c6832703fda941a5010d8a855 100644
--- a/packages/ui/src/components/etape/perimetre-edit.tsx
+++ b/packages/ui/src/components/etape/perimetre-edit.tsx
@@ -62,6 +62,7 @@ const DisplayPerimetre: FunctionalComponent<DisplayPerimetreProps> = props => {
           }}
           titreSlug={props.titreSlug}
           titreTypeId={props.titreTypeId}
+          id="perimetre_edit"
           initTab={props.initTab ?? 'carte'}
         />
       </div>
@@ -144,7 +145,7 @@ export const PerimetreEdit = defineComponent<Props>(props => {
         prop={props.etape.perimetre}
         updateHeritage={updateHeritage}
         hasHeritageValue={isNotNullNorUndefined(props.etape.perimetre.etapeHeritee?.value?.geojson4326Perimetre)}
-        label={null}
+        label="Périmètre"
         write={() => (
           <div>
             <DsfrButton onClick={openPerimetrePopup} title="Importer un périmètre" />
diff --git a/packages/ui/src/components/etape/perimetre-import-popup.stories_snapshots_Default.html b/packages/ui/src/components/etape/perimetre-import-popup.stories_snapshots_Default.html
index d706b41c6475e30a87a0c51afb7a709e3777f9d7..3da5bd3640a7460cac2c14df232d41458b088a67 100644
--- a/packages/ui/src/components/etape/perimetre-import-popup.stories_snapshots_Default.html
+++ b/packages/ui/src/components/etape/perimetre-import-popup.stories_snapshots_Default.html
@@ -12,77 +12,77 @@
                 <form>
                   <fieldset class="fr-fieldset fr-mt-2w" id="geographic">
                     <div class="fr-fieldset__element">
-                      <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_271">Système géographique</label>
-                        <div id="typeahead_geosysteme_271_wrapper" class="_typeahead_8eddf1">
-                          <div class="flex"><input id="typeahead_geosysteme_271" type="text" title="" name="typeahead_geosysteme_271" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_271-control" aria-activedescendant="typeahead_geosysteme_271-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
-                          <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_271-control" role="listbox">
-                            <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_271-control-0">
+                      <div class="fr-select-group"><label class="fr-label" for="perimetre_geosysteme">Système géographique</label>
+                        <div id="perimetre_geosysteme_wrapper" class="_typeahead_8eddf1">
+                          <div class="flex"><input id="perimetre_geosysteme" type="text" title="" name="perimetre_geosysteme" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="perimetre_geosysteme-control" aria-activedescendant="perimetre_geosysteme-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+                          <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="perimetre_geosysteme-control" role="listbox">
+                            <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="perimetre_geosysteme-control-0">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-1">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="perimetre_geosysteme-control-1">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-2">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="perimetre_geosysteme-control-2">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-3">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="perimetre_geosysteme-control-3">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-4">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="perimetre_geosysteme-control-4">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-5">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="perimetre_geosysteme-control-5">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-6">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="perimetre_geosysteme-control-6">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-7">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="perimetre_geosysteme-control-7">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-8">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="perimetre_geosysteme-control-8">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-9">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="perimetre_geosysteme-control-9">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-10">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="perimetre_geosysteme-control-10">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-11">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="perimetre_geosysteme-control-11">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-12">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="perimetre_geosysteme-control-12">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-13">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="perimetre_geosysteme-control-13">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-14">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="perimetre_geosysteme-control-14">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-15">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="perimetre_geosysteme-control-15">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-16">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="perimetre_geosysteme-control-16">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-17">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="perimetre_geosysteme-control-17">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-18">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="perimetre_geosysteme-control-18">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-19">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="perimetre_geosysteme-control-19">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-20">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="perimetre_geosysteme-control-20">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-21">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="perimetre_geosysteme-control-21">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-22">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="perimetre_geosysteme-control-22">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                             </li>
                           </ul>
@@ -90,22 +90,22 @@
                       </div>
                     </div>
                   </fieldset>
-                  <fieldset class="fr-fieldset" id="radio_670" aria-labelledby="radio_670-legend" style="flex-direction: row; align-items: flex-start;">
-                    <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_670-legend">Type de fichier
+                  <fieldset class="fr-fieldset" id="perimetre_type_de_fichier" aria-labelledby="perimetre_type_de_fichier-legend" style="flex-direction: row; align-items: flex-start;">
+                    <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="perimetre_type_de_fichier-legend">Type de fichier
                       <!---->
                     </legend>
                     <div class="fr-fieldset__element fr-fieldset__element--inline">
-                      <div class="fr-radio-group"><input type="radio" id="radio_670-0" name="radio_670"><label class="fr-label" for="radio_670-0">csv
+                      <div class="fr-radio-group"><input type="radio" id="perimetre_type_de_fichier-0" name="perimetre_type_de_fichier"><label class="fr-label" for="perimetre_type_de_fichier-0">csv
                           <!---->
                         </label></div>
                     </div>
                     <div class="fr-fieldset__element fr-fieldset__element--inline">
-                      <div class="fr-radio-group"><input type="radio" id="radio_670-1" name="radio_670"><label class="fr-label" for="radio_670-1">geojson
+                      <div class="fr-radio-group"><input type="radio" id="perimetre_type_de_fichier-1" name="perimetre_type_de_fichier"><label class="fr-label" for="perimetre_type_de_fichier-1">geojson
                           <!---->
                         </label></div>
                     </div>
                     <div class="fr-fieldset__element fr-fieldset__element--inline">
-                      <div class="fr-radio-group"><input type="radio" id="radio_670-2" name="radio_670"><label class="fr-label" for="radio_670-2">shape
+                      <div class="fr-radio-group"><input type="radio" id="perimetre_type_de_fichier-2" name="perimetre_type_de_fichier"><label class="fr-label" for="perimetre_type_de_fichier-2">shape
                           <!---->
                         </label></div>
                     </div>
diff --git a/packages/ui/src/components/etape/perimetre-import-popup.tsx b/packages/ui/src/components/etape/perimetre-import-popup.tsx
index 3fff5b7f33223b2d5b49157d9c12d3acf39cd6de..10025e96c00aeb6b443a1fa310070dd048e2518c 100644
--- a/packages/ui/src/components/etape/perimetre-import-popup.tsx
+++ b/packages/ui/src/components/etape/perimetre-import-popup.tsx
@@ -49,10 +49,11 @@ export const PerimetreImportPopup = defineComponent<Props>(props => {
     <form>
       <fieldset class="fr-fieldset fr-mt-2w" id="geographic">
         <div class="fr-fieldset__element">
-          <GeoSystemeTypeahead geoSystemeSelected={onSelectGeographicSystem} disabled={false} />
+          <GeoSystemeTypeahead id="perimetre_geosysteme" geoSystemeSelected={onSelectGeographicSystem} disabled={false} />
         </div>
       </fieldset>
       <DsfrInputRadio
+        id="perimetre_type_de_fichier"
         required={true}
         legend={{ main: 'Type de fichier' }}
         orientation="horizontal"
diff --git a/packages/ui/src/components/etape/points-import-popup.stories_snapshots_Default.html b/packages/ui/src/components/etape/points-import-popup.stories_snapshots_Default.html
index 985887dc35d71bbb8ed84d7366be415a78d37541..79d9d3535c7501cadabc8db9a5310f2671244959 100644
--- a/packages/ui/src/components/etape/points-import-popup.stories_snapshots_Default.html
+++ b/packages/ui/src/components/etape/points-import-popup.stories_snapshots_Default.html
@@ -16,77 +16,77 @@
                   <fieldset class="fr-fieldset fr-mt-2w" id="geographic">
                     <div class="fr-fieldset__element">
                       <div class="fr-select-group"><label class="fr-label" for="type">Système géographique</label>
-                        <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_271">Système géographique</label>
-                          <div id="typeahead_geosysteme_271_wrapper" class="_typeahead_8eddf1">
-                            <div class="flex"><input id="typeahead_geosysteme_271" type="text" title="" name="typeahead_geosysteme_271" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_271-control" aria-activedescendant="typeahead_geosysteme_271-control" aria-expanded="false" aria-autocomplete="list" value="RGF93 / Lambert-93 - (2154)"></div>
-                            <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_271-control" role="listbox">
-                              <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_271-control-0">
+                        <div class="fr-select-group"><label class="fr-label" for="points_geosysteme_2154">Système géographique</label>
+                          <div id="points_geosysteme_2154_wrapper" class="_typeahead_8eddf1">
+                            <div class="flex"><input id="points_geosysteme_2154" type="text" title="" name="points_geosysteme_2154" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="points_geosysteme_2154-control" aria-activedescendant="points_geosysteme_2154-control" aria-expanded="false" aria-autocomplete="list" value="RGF93 / Lambert-93 - (2154)"></div>
+                            <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="points_geosysteme_2154-control" role="listbox">
+                              <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="points_geosysteme_2154-control-0">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-1">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="points_geosysteme_2154-control-1">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-2">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="points_geosysteme_2154-control-2">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-3">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="points_geosysteme_2154-control-3">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-4">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="points_geosysteme_2154-control-4">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-5">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="points_geosysteme_2154-control-5">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">WGS84 - (4326)</span><span class="fr-text">Monde</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-6">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="points_geosysteme_2154-control-6">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-7">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="points_geosysteme_2154-control-7">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-8">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="points_geosysteme_2154-control-8">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-9">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="points_geosysteme_2154-control-9">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-10">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="points_geosysteme_2154-control-10">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-11">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="points_geosysteme_2154-control-11">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-12">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="points_geosysteme_2154-control-12">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-13">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="points_geosysteme_2154-control-13">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-14">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="points_geosysteme_2154-control-14">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-15">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="points_geosysteme_2154-control-15">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-16">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="points_geosysteme_2154-control-16">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-17">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="points_geosysteme_2154-control-17">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-18">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="points_geosysteme_2154-control-18">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-19">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="points_geosysteme_2154-control-19">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-20">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="points_geosysteme_2154-control-20">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-21">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="points_geosysteme_2154-control-21">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                               </li>
-                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_271-control-22">
+                              <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="points_geosysteme_2154-control-22">
                                 <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                               </li>
                             </ul>
diff --git a/packages/ui/src/components/etape/points-import-popup.tsx b/packages/ui/src/components/etape/points-import-popup.tsx
index 7ee6c29dbc0bd13f58222c0274e3d693fd942093..f7bb7b4566ebe24b4a1eda367b9dc81904185cfc 100644
--- a/packages/ui/src/components/etape/points-import-popup.tsx
+++ b/packages/ui/src/components/etape/points-import-popup.tsx
@@ -35,7 +35,7 @@ export const PointsImportPopup = defineComponent<Props>(props => {
             <label class="fr-label" for="type">
               Système géographique
             </label>
-            <GeoSystemeTypeahead geoSystemeId={props.geoSystemeId} disabled={true} />
+            <GeoSystemeTypeahead id={`points_geosysteme_${props.geoSystemeId}`} geoSystemeId={props.geoSystemeId} disabled={true} />
           </div>
         </div>
       </fieldset>
diff --git a/packages/ui/src/components/etape/pure-form-save-btn.stories_snapshots_EnregistrementEnCours.html b/packages/ui/src/components/etape/pure-form-save-btn.stories_snapshots_EnregistrementEnCours.html
index 8b50f2bc1d8b52aa22068d899ea6238dc53f2e6c..244426980674e1a9b415e1634c2e34a73d0ab9f2 100644
--- a/packages/ui/src/components/etape/pure-form-save-btn.stories_snapshots_EnregistrementEnCours.html
+++ b/packages/ui/src/components/etape/pure-form-save-btn.stories_snapshots_EnregistrementEnCours.html
@@ -1,7 +1,7 @@
 <div>
   <div style="display: flex; flex-direction: column;">
     <div style="display: flex; justify-content: end; align-items: center;" class="fr-mt-2w">
-      <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+      <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
         <!---->
         <!---->
         <div class="_spinner_3306d0"></div>
diff --git a/packages/ui/src/components/etape/pure-form-save-btn.stories_snapshots_WithError.html b/packages/ui/src/components/etape/pure-form-save-btn.stories_snapshots_WithError.html
index beb70e272ea96460c275da7ff573066663779327..dc10763a96df762c7b292b5ebab4690b73560150 100644
--- a/packages/ui/src/components/etape/pure-form-save-btn.stories_snapshots_WithError.html
+++ b/packages/ui/src/components/etape/pure-form-save-btn.stories_snapshots_WithError.html
@@ -3,7 +3,7 @@
     <div style="display: flex; justify-content: end; align-items: center;" class="fr-mt-2w">
       <!----><button class="fr-btn fr-btn--secondary fr-btn--md fr-ml-2w" title="Enregistrer l'étape" aria-label="Enregistrer l'étape" type="button">Enregistrer l'étape</button><button class="fr-btn fr-btn--primary fr-btn--md fr-ml-2w" title="Enregistrer puis finaliser l'étape" aria-label="Enregistrer puis finaliser l'étape" type="submit">Enregistrer puis finaliser l'étape</button>
     </div>
-    <div class=" undefined" style="display: flex; justify-content: center;">
+    <div class="" style="display: flex; justify-content: center;">
       <div class="fr-alert fr-alert--error fr-alert--sm">
         <p>Une erreur sauvage apparait</p>
       </div>
diff --git a/packages/ui/src/components/etape/sections-edit.stories_snapshots_AvecHeritage.html b/packages/ui/src/components/etape/sections-edit.stories_snapshots_AvecHeritage.html
index 0d8d666ca96a3a32b3901897b06321a53ce151cc..f5eadcbff33e893b0cd5e286ac07a947348b27eb 100644
--- a/packages/ui/src/components/etape/sections-edit.stories_snapshots_AvecHeritage.html
+++ b/packages/ui/src/components/etape/sections-edit.stories_snapshots_AvecHeritage.html
@@ -21,21 +21,21 @@
           </fieldset>
         </div>
         <div class="fr-pt-2w fr-pb-2w">
-          <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" id="toggle_670"><label class="fr-toggle__label" for="toggle_670" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2024</span></label>
+          <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" id="heritage_prospection-mecanisee"><label class="fr-toggle__label" for="heritage_prospection-mecanisee" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2024</span></label>
             <!---->
           </div>
         </div>
       </div>
       <div class="fr-mb-1w">
         <div>
-          <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_878">Franchissements de cours d'eau (optionnel)
+          <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="franchissements">Franchissements de cours d'eau (optionnel)
               <!----><span class="fr-hint-text">Nombre de franchissements de cours d'eau</span>
-            </label><input class="fr-input" name="input_878" id="input_878" type="number" min="0">
+            </label><input class="fr-input" name="franchissements" id="franchissements" type="number" min="0">
             <!---->
           </div>
         </div>
         <div class="fr-pt-2w fr-pb-2w">
-          <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" id="toggle_967"><label class="fr-toggle__label" for="toggle_967" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2024</span></label>
+          <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" id="heritage_franchissements-de-cours-d-eau"><label class="fr-toggle__label" for="heritage_franchissements-de-cours-d-eau" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2024</span></label>
             <!---->
           </div>
         </div>
diff --git a/packages/ui/src/components/etape/sections-edit.stories_snapshots_AvecHeritageActif.html b/packages/ui/src/components/etape/sections-edit.stories_snapshots_AvecHeritageActif.html
index 6bd76016070c664787ef0e6dd9e156a3130ae985..5c8d5c46356dbd178186c01046cdecfc5d74f986 100644
--- a/packages/ui/src/components/etape/sections-edit.stories_snapshots_AvecHeritageActif.html
+++ b/packages/ui/src/components/etape/sections-edit.stories_snapshots_AvecHeritageActif.html
@@ -12,7 +12,7 @@
           </div>
         </div>
         <div class="fr-pt-2w fr-pb-2w">
-          <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="toggle_670"><label class="fr-toggle__label" for="toggle_670" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2024</span></label>
+          <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="heritage_prospection-mecanisee"><label class="fr-toggle__label" for="heritage_prospection-mecanisee" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2024</span></label>
             <!---->
           </div>
         </div>
@@ -25,7 +25,7 @@
           </div>
         </div>
         <div class="fr-pt-2w fr-pb-2w">
-          <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="toggle_878"><label class="fr-toggle__label" for="toggle_878" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2024</span></label>
+          <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="heritage_franchissements-de-cours-d-eau"><label class="fr-toggle__label" for="heritage_franchissements-de-cours-d-eau" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2024</span></label>
             <!---->
           </div>
         </div>
diff --git a/packages/ui/src/components/etape/sections-edit.stories_snapshots_DecisionJorf.html b/packages/ui/src/components/etape/sections-edit.stories_snapshots_DecisionJorf.html
index 7b0940baf4feea45595ed5d00f5d9a634e64fdc2..8602790372d123c41cc79f7014e91ab1f168c200 100644
--- a/packages/ui/src/components/etape/sections-edit.stories_snapshots_DecisionJorf.html
+++ b/packages/ui/src/components/etape/sections-edit.stories_snapshots_DecisionJorf.html
@@ -4,10 +4,10 @@
       <h3>Références Légifrance</h3>
       <div class="fr-mb-1w">
         <div>
-          <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Numéro JORF
+          <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="jorf">Numéro JORF
               <!---->
               <!----><span class="fr-hint-text">Le numéro de JORF à rentrer est la dernière partie de l'URL du JORF. <br> Par exemple dans l'URL https://www.legifrance.gouv.fr/jorf/id/JORFTEXTXXXXXXXXXX le numéro est <b>JORFTEXTXXXXXXXXXX</b></span>
-            </label><input class="fr-input" name="input_670" id="input_670" required="" type="text">
+            </label><input class="fr-input" name="jorf" id="jorf" required="" type="text">
             <!---->
           </div>
         </div>
@@ -15,16 +15,16 @@
       </div>
       <div class="fr-mb-1w">
         <div>
-          <div class="fr-input-group fr-input-group--disabled" style="margin-bottom: 0px;"><label class="fr-label" for="input_878">Numéro NOR
+          <div class="fr-input-group fr-input-group--disabled" style="margin-bottom: 0px;"><label class="fr-label" for="numero-nor">Numéro NOR
               <!---->
               <!---->
               <!---->
-            </label><input class="fr-input" name="input_878" id="input_878" disabled="" required="" type="text" value="Non renseigné">
+            </label><input class="fr-input" name="numero-nor" id="numero-nor" disabled="" required="" type="text" value="Non renseigné">
             <!---->
           </div>
         </div>
         <div class="fr-pt-2w fr-pb-2w">
-          <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="toggle_967"><label class="fr-toggle__label" for="toggle_967" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Décision de l'autorité administrative" du 16-05-2000</span></label>
+          <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="heritage_numero-nor"><label class="fr-toggle__label" for="heritage_numero-nor" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Décision de l'autorité administrative" du 16-05-2000</span></label>
             <!---->
           </div>
         </div>
diff --git a/packages/ui/src/components/etape/sections-edit.stories_snapshots_SansHeritage.html b/packages/ui/src/components/etape/sections-edit.stories_snapshots_SansHeritage.html
index 96aeb7e1a81f52ac483fd41af224ac8c70a59ede..3131069fad617a4eda2dc4d15633f7ecc7c77182 100644
--- a/packages/ui/src/components/etape/sections-edit.stories_snapshots_SansHeritage.html
+++ b/packages/ui/src/components/etape/sections-edit.stories_snapshots_SansHeritage.html
@@ -24,9 +24,9 @@
       </div>
       <div class="fr-mb-1w">
         <div>
-          <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Franchissements de cours d'eau (optionnel)
+          <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="franchissements">Franchissements de cours d'eau (optionnel)
               <!----><span class="fr-hint-text">Nombre de franchissements de cours d'eau</span>
-            </label><input class="fr-input" name="input_74" id="input_74" type="number" min="0">
+            </label><input class="fr-input" name="franchissements" id="franchissements" type="number" min="0">
             <!---->
           </div>
         </div>
diff --git a/packages/ui/src/components/etape/substances-edit.stories_snapshots_AvecHeritage.html b/packages/ui/src/components/etape/substances-edit.stories_snapshots_AvecHeritage.html
index 56d5437fa3d55e2fccb50f2cd760f61ce2662053..ae6161ba6d95040fd3a2ef07ddef60fefe6f559f 100644
--- a/packages/ui/src/components/etape/substances-edit.stories_snapshots_AvecHeritage.html
+++ b/packages/ui/src/components/etape/substances-edit.stories_snapshots_AvecHeritage.html
@@ -8,7 +8,7 @@
     </div>
   </div>
   <div class="fr-pt-2w fr-pb-2w">
-    <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="toggle_670"><label class="fr-toggle__label" for="toggle_670" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2020</span></label>
+    <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" checked="" id="heritage_substances"><label class="fr-toggle__label" for="heritage_substances" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2020</span></label>
       <!---->
     </div>
   </div>
diff --git a/packages/ui/src/components/etape/substances-edit.stories_snapshots_SansHeritage.html b/packages/ui/src/components/etape/substances-edit.stories_snapshots_SansHeritage.html
index 8640a2ca11b0a72541b952facb2a804049df1e0e..34be780e3e35dfaf6e86b1ee43a132f1eeede420 100644
--- a/packages/ui/src/components/etape/substances-edit.stories_snapshots_SansHeritage.html
+++ b/packages/ui/src/components/etape/substances-edit.stories_snapshots_SansHeritage.html
@@ -106,7 +106,7 @@
     </div>
   </div>
   <div class="fr-pt-2w fr-pb-2w">
-    <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" id="toggle_670"><label class="fr-toggle__label" for="toggle_670" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2020</span></label>
+    <div class="fr-toggle"><input type="checkbox" class="fr-toggle__input" id="heritage_substances"><label class="fr-toggle__label" for="heritage_substances" data-fr-checked-label="Activé" data-fr-unchecked-label="Désactivé"><span class=" fr-ml-4w">Hériter de l’étape "Demande" du 01-01-2020</span></label>
       <!---->
     </div>
   </div>
diff --git a/packages/ui/src/components/etape/type-edit.stories_snapshots_Loading.html b/packages/ui/src/components/etape/type-edit.stories_snapshots_Loading.html
index a3ef9f153e3d85e7cee9bee07fa7e245eba4da0b..c5f6bb573b32886f6379bf1c5b391015fac5acbe 100644
--- a/packages/ui/src/components/etape/type-edit.stories_snapshots_Loading.html
+++ b/packages/ui/src/components/etape/type-edit.stories_snapshots_Loading.html
@@ -1,4 +1,4 @@
-<div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+<div class="_top-level_3306d0" style="display: flex; justify-content: center;">
   <!---->
   <!---->
   <div class="_spinner_3306d0"></div>
diff --git a/packages/ui/src/components/etape/type-edit.stories_snapshots_WithError.html b/packages/ui/src/components/etape/type-edit.stories_snapshots_WithError.html
index ff18c01f702e018dd4ffcecd1e2085a05c6eafda..0c0f52c1d929cce44a9c685fdcdbf2d18913a47b 100644
--- a/packages/ui/src/components/etape/type-edit.stories_snapshots_WithError.html
+++ b/packages/ui/src/components/etape/type-edit.stories_snapshots_WithError.html
@@ -1,4 +1,4 @@
-<div class=" undefined" style="display: flex; justify-content: center;">
+<div class="" style="display: flex; justify-content: center;">
   <!---->
   <div class="fr-alert fr-alert--error fr-alert--sm" role="alert">
     <p>Cassé</p>
diff --git a/packages/ui/src/components/journaux.stories_snapshots_Loading.html b/packages/ui/src/components/journaux.stories_snapshots_Loading.html
index 5fbc6fc1a6d320e253de250b978809b817abd078..a277a2389003cbe31c675bc4df78bc4b54c98a5d 100644
--- a/packages/ui/src/components/journaux.stories_snapshots_Loading.html
+++ b/packages/ui/src/components/journaux.stories_snapshots_Loading.html
@@ -105,7 +105,7 @@
             </div>
           </div>
         </div>
-        <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+        <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
           <!---->
           <!---->
           <div class="_spinner_3306d0"></div>
diff --git a/packages/ui/src/components/journaux.stories_snapshots_WithError.html b/packages/ui/src/components/journaux.stories_snapshots_WithError.html
index 2ebdd2a7331bf7e6933860689ba9095099e0b3df..5b64a308a684eab19be200e2693719c997e5844a 100644
--- a/packages/ui/src/components/journaux.stories_snapshots_WithError.html
+++ b/packages/ui/src/components/journaux.stories_snapshots_WithError.html
@@ -105,7 +105,7 @@
             </div>
           </div>
         </div>
-        <div class=" undefined" style="display: flex; justify-content: center;">
+        <div class="" style="display: flex; justify-content: center;">
           <div class="fr-alert fr-alert--error fr-alert--sm">
             <p>Erreur</p>
           </div>
diff --git a/packages/ui/src/components/statistiques.tsx b/packages/ui/src/components/statistiques.tsx
index bc56317fd4ef41a43a069a0f08f2c2a858e4e36e..47cbaba25bf004d512974897ece2e497e4ef7d6c 100644
--- a/packages/ui/src/components/statistiques.tsx
+++ b/packages/ui/src/components/statistiques.tsx
@@ -50,7 +50,7 @@ export const Statistiques = defineComponent(() => {
   return () => (
     <>
       <h1>Statistiques</h1>
-      <Tabs tabsTitle="Statistiques" tabs={tabs} initTab={initTab} tabClicked={tabId => routerReplaceTabId(tabId, router)} />
+      <Tabs tabsTitle="Statistiques" id="statistiques" tabs={tabs} initTab={initTab} tabClicked={tabId => routerReplaceTabId(tabId, router)} />
     </>
   )
 })
diff --git a/packages/ui/src/components/statistiques/granulats-marins.stories_snapshots_Loading.html b/packages/ui/src/components/statistiques/granulats-marins.stories_snapshots_Loading.html
index 25bb6c6694fc15309f9cdfb21142986ad9a2aa50..ecb6d46dc078dc2985d2d81cbc8d5a87caadb7ed 100644
--- a/packages/ui/src/components/statistiques/granulats-marins.stories_snapshots_Loading.html
+++ b/packages/ui/src/components/statistiques/granulats-marins.stories_snapshots_Loading.html
@@ -9,13 +9,13 @@
       <div class="fr-grid-row">
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+          <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
             <!---->
             <!---->
             <div class="_spinner_3306d0"></div>
           </div>
           </p>
-          <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+          <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
             <!---->
             <!---->
             <div class="_spinner_3306d0"></div>
@@ -24,7 +24,7 @@
         </div>
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+          <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
             <!---->
             <!---->
             <div class="_spinner_3306d0"></div>
@@ -35,7 +35,7 @@
         </div>
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+          <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
             <!---->
             <!---->
             <div class="_spinner_3306d0"></div>
@@ -51,13 +51,13 @@
       <div class="fr-grid-row">
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+          <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
             <!---->
             <!---->
             <div class="_spinner_3306d0"></div>
           </div>
           </p>
-          <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+          <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
             <!---->
             <!---->
             <div class="_spinner_3306d0"></div>
@@ -66,13 +66,13 @@
         </div>
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+          <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
             <!---->
             <!---->
             <div class="_spinner_3306d0"></div>
           </div>
           </p>
-          <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+          <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
             <!---->
             <!---->
             <div class="_spinner_3306d0"></div>
@@ -81,7 +81,7 @@
         </div>
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+          <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
             <!---->
             <!---->
             <div class="_spinner_3306d0"></div>
@@ -96,14 +96,14 @@
   <h2>Production annuelle</h2><span class="separator"></span>
   <p class="fr-mb-3w">Données contenues dans la base de données Camino, stabilisées pour l’année n-1.</p>
   <div class="fr-pt-1w fr-pb-1w">
-    <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+    <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
       <!---->
       <!---->
       <div class="_spinner_3306d0"></div>
     </div>
   </div>
   <div class="fr-mb-3w fr-mt-3w" style="height: 1px; width: 100%; background-color: var(--grey-900-175);"></div>
-  <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+  <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
     <!---->
     <!---->
     <div class="_spinner_3306d0"></div>
@@ -117,7 +117,7 @@
     <div class="fr-grid-row">
       <div class="fr-col-12 fr-col-md-3 fr-mb-3w mt">
         <p class="fr-display--xs _donnee-importante_65867c">
-        <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+        <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
           <!---->
           <!---->
           <div class="_spinner_3306d0"></div>
@@ -126,14 +126,14 @@
         <p>Permis exclusifs de recherches octroyés l’an dernier</p>
       </div>
       <div class="fr-col-12 fr-col-md-9 relative fr-mb-3w">
-        <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+        <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
           <!---->
           <!---->
           <div class="_spinner_3306d0"></div>
         </div>
       </div>
     </div>
-    <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+    <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
       <!---->
       <!---->
       <div class="_spinner_3306d0"></div>
@@ -143,7 +143,7 @@
     <div class="fr-grid-row">
       <div class="fr-col-12 fr-col-md-3 fr-mb-3w mt">
         <p class="fr-display--xs _donnee-importante_65867c">
-        <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+        <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
           <!---->
           <!---->
           <div class="_spinner_3306d0"></div>
@@ -152,7 +152,7 @@
         <p>Concessions octroyées l’an dernier</p>
       </div>
       <div class="fr-col-12 fr-col-md-9 relative fr-mb-3w">
-        <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+        <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
           <!---->
           <!---->
           <div class="_spinner_3306d0"></div>
@@ -164,7 +164,7 @@
     <div class="fr-grid-row">
       <div class="fr-col-12 fr-col-md-3 fr-mb-3w mt">
         <p class="fr-display--xs _donnee-importante_65867c">
-        <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+        <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
           <!---->
           <!---->
           <div class="_spinner_3306d0"></div>
@@ -173,7 +173,7 @@
         <p>Concessions valides l’an dernier</p>
       </div>
       <div class="fr-col-12 fr-col-md-9 relative fr-mb-3w">
-        <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+        <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
           <!---->
           <!---->
           <div class="_spinner_3306d0"></div>
diff --git a/packages/ui/src/components/statistiques/granulats-marins.stories_snapshots_WithError.html b/packages/ui/src/components/statistiques/granulats-marins.stories_snapshots_WithError.html
index b928a2f3f2591ea0f182f86729a895b163eba42b..f54b0147ac8d567b01f4ad3c58b421508d5f5edf 100644
--- a/packages/ui/src/components/statistiques/granulats-marins.stories_snapshots_WithError.html
+++ b/packages/ui/src/components/statistiques/granulats-marins.stories_snapshots_WithError.html
@@ -9,7 +9,7 @@
       <div class="fr-grid-row">
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class=" undefined" style="display: flex; justify-content: center;">
+          <div class="" style="display: flex; justify-content: center;">
             <div class="fr-alert fr-alert--error fr-alert--sm">
               <p>Because reasons</p>
             </div>
@@ -17,7 +17,7 @@
             <!---->
           </div>
           </p>
-          <div class=" undefined" style="display: flex; justify-content: center;">
+          <div class="" style="display: flex; justify-content: center;">
             <div class="fr-alert fr-alert--error fr-alert--sm">
               <p>Because reasons</p>
             </div>
@@ -28,7 +28,7 @@
         </div>
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class=" undefined" style="display: flex; justify-content: center;">
+          <div class="" style="display: flex; justify-content: center;">
             <div class="fr-alert fr-alert--error fr-alert--sm">
               <p>Because reasons</p>
             </div>
@@ -41,7 +41,7 @@
         </div>
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class=" undefined" style="display: flex; justify-content: center;">
+          <div class="" style="display: flex; justify-content: center;">
             <div class="fr-alert fr-alert--error fr-alert--sm">
               <p>Because reasons</p>
             </div>
@@ -59,7 +59,7 @@
       <div class="fr-grid-row">
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class=" undefined" style="display: flex; justify-content: center;">
+          <div class="" style="display: flex; justify-content: center;">
             <div class="fr-alert fr-alert--error fr-alert--sm">
               <p>Because reasons</p>
             </div>
@@ -67,7 +67,7 @@
             <!---->
           </div>
           </p>
-          <div class=" undefined" style="display: flex; justify-content: center;">
+          <div class="" style="display: flex; justify-content: center;">
             <div class="fr-alert fr-alert--error fr-alert--sm">
               <p>Because reasons</p>
             </div>
@@ -78,7 +78,7 @@
         </div>
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class=" undefined" style="display: flex; justify-content: center;">
+          <div class="" style="display: flex; justify-content: center;">
             <div class="fr-alert fr-alert--error fr-alert--sm">
               <p>Because reasons</p>
             </div>
@@ -86,7 +86,7 @@
             <!---->
           </div>
           </p>
-          <div class=" undefined" style="display: flex; justify-content: center;">
+          <div class="" style="display: flex; justify-content: center;">
             <div class="fr-alert fr-alert--error fr-alert--sm">
               <p>Because reasons</p>
             </div>
@@ -97,7 +97,7 @@
         </div>
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class=" undefined" style="display: flex; justify-content: center;">
+          <div class="" style="display: flex; justify-content: center;">
             <div class="fr-alert fr-alert--error fr-alert--sm">
               <p>Because reasons</p>
             </div>
@@ -114,7 +114,7 @@
   <h2>Production annuelle</h2><span class="separator"></span>
   <p class="fr-mb-3w">Données contenues dans la base de données Camino, stabilisées pour l’année n-1.</p>
   <div class="fr-pt-1w fr-pb-1w">
-    <div class=" undefined" style="display: flex; justify-content: center;">
+    <div class="" style="display: flex; justify-content: center;">
       <div class="fr-alert fr-alert--error fr-alert--sm">
         <p>Because reasons</p>
       </div>
@@ -123,7 +123,7 @@
     </div>
   </div>
   <div class="fr-mb-3w fr-mt-3w" style="height: 1px; width: 100%; background-color: var(--grey-900-175);"></div>
-  <div class=" undefined" style="display: flex; justify-content: center;">
+  <div class="" style="display: flex; justify-content: center;">
     <div class="fr-alert fr-alert--error fr-alert--sm">
       <p>Because reasons</p>
     </div>
@@ -139,7 +139,7 @@
     <div class="fr-grid-row">
       <div class="fr-col-12 fr-col-md-3 fr-mb-3w mt">
         <p class="fr-display--xs _donnee-importante_65867c">
-        <div class=" undefined" style="display: flex; justify-content: center;">
+        <div class="" style="display: flex; justify-content: center;">
           <div class="fr-alert fr-alert--error fr-alert--sm">
             <p>Because reasons</p>
           </div>
@@ -150,7 +150,7 @@
         <p>Permis exclusifs de recherches octroyés l’an dernier</p>
       </div>
       <div class="fr-col-12 fr-col-md-9 relative fr-mb-3w">
-        <div class=" undefined" style="display: flex; justify-content: center;">
+        <div class="" style="display: flex; justify-content: center;">
           <div class="fr-alert fr-alert--error fr-alert--sm">
             <p>Because reasons</p>
           </div>
@@ -159,7 +159,7 @@
         </div>
       </div>
     </div>
-    <div class=" undefined" style="display: flex; justify-content: center;">
+    <div class="" style="display: flex; justify-content: center;">
       <div class="fr-alert fr-alert--error fr-alert--sm">
         <p>Because reasons</p>
       </div>
@@ -171,7 +171,7 @@
     <div class="fr-grid-row">
       <div class="fr-col-12 fr-col-md-3 fr-mb-3w mt">
         <p class="fr-display--xs _donnee-importante_65867c">
-        <div class=" undefined" style="display: flex; justify-content: center;">
+        <div class="" style="display: flex; justify-content: center;">
           <div class="fr-alert fr-alert--error fr-alert--sm">
             <p>Because reasons</p>
           </div>
@@ -182,7 +182,7 @@
         <p>Concessions octroyées l’an dernier</p>
       </div>
       <div class="fr-col-12 fr-col-md-9 relative fr-mb-3w">
-        <div class=" undefined" style="display: flex; justify-content: center;">
+        <div class="" style="display: flex; justify-content: center;">
           <div class="fr-alert fr-alert--error fr-alert--sm">
             <p>Because reasons</p>
           </div>
@@ -196,7 +196,7 @@
     <div class="fr-grid-row">
       <div class="fr-col-12 fr-col-md-3 fr-mb-3w mt">
         <p class="fr-display--xs _donnee-importante_65867c">
-        <div class=" undefined" style="display: flex; justify-content: center;">
+        <div class="" style="display: flex; justify-content: center;">
           <div class="fr-alert fr-alert--error fr-alert--sm">
             <p>Because reasons</p>
           </div>
@@ -207,7 +207,7 @@
         <p>Concessions valides l’an dernier</p>
       </div>
       <div class="fr-col-12 fr-col-md-9 relative fr-mb-3w">
-        <div class=" undefined" style="display: flex; justify-content: center;">
+        <div class="" style="display: flex; justify-content: center;">
           <div class="fr-alert fr-alert--error fr-alert--sm">
             <p>Because reasons</p>
           </div>
diff --git a/packages/ui/src/components/statistiques/granulats-marins.tsx b/packages/ui/src/components/statistiques/granulats-marins.tsx
index 520f132ca65874b6d6f0c8a0a6b002089852c5fe..75fb1ee1b1993536cebbe84e5bd63e160716586a 100644
--- a/packages/ui/src/components/statistiques/granulats-marins.tsx
+++ b/packages/ui/src/components/statistiques/granulats-marins.tsx
@@ -396,7 +396,14 @@ export const PureGranulatsMarins = defineComponent<Props>(props => {
               const anneesLabel = map(annees, annee => ({ id: annee.id, label: annee.nom }))
               return (
                 <>
-                  <DsfrSelect required={true} legend={{ main: 'Sélectionner une année' }} items={anneesLabel} initialValue={anneeActive.value} valueChanged={anneeSelect} />
+                  <DsfrSelect
+                    id="statistiques_granulats_marins_annees"
+                    required={true}
+                    legend={{ main: 'Sélectionner une année' }}
+                    items={anneesLabel}
+                    initialValue={anneeActive.value}
+                    valueChanged={anneeSelect}
+                  />
                   <GranulatsMarinsActivite statistiqueGranulatsMarins={item.statistiques[anneeActive.value]} enConstruction={annees.find(t => t.id === anneeActive.value)?.enConstruction} />
                 </>
               )
diff --git a/packages/ui/src/components/statistiques/guyane.stories_snapshots_Loading.html b/packages/ui/src/components/statistiques/guyane.stories_snapshots_Loading.html
index 7935a7ef61401a829cc9cc074b688afc5651083b..73698f0df7bb07cd37fc143c005b6f51de54c1b9 100644
--- a/packages/ui/src/components/statistiques/guyane.stories_snapshots_Loading.html
+++ b/packages/ui/src/components/statistiques/guyane.stories_snapshots_Loading.html
@@ -9,7 +9,7 @@
       <div class="fr-grid-row">
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+          <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
             <!---->
             <!---->
             <div class="_spinner_3306d0"></div>
@@ -20,7 +20,7 @@
         </div>
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+          <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
             <!---->
             <!---->
             <div class="_spinner_3306d0"></div>
@@ -31,7 +31,7 @@
         </div>
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+          <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
             <!---->
             <!---->
             <div class="_spinner_3306d0"></div>
@@ -47,7 +47,7 @@
       <div class="fr-grid-row">
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+          <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
             <!---->
             <!---->
             <div class="_spinner_3306d0"></div>
@@ -58,7 +58,7 @@
         </div>
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+          <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
             <!---->
             <!---->
             <div class="_spinner_3306d0"></div>
@@ -69,7 +69,7 @@
         </div>
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+          <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
             <!---->
             <!---->
             <div class="_spinner_3306d0"></div>
@@ -82,7 +82,7 @@
   </div>
   <h2>Production et activité minière légales</h2><span class="separator"></span>
   <p class="fr-mb-3w">Les données affichées ici sont celles contenues dans la base de donnée Camino. Elles sont stabilisées pour l’année n-2 mais sont susceptibles d’évoluer jusqu’à la cloture de la collecte des déclarations règlementaires de l’année précédente et l'année en cours. Ces données concernent exclusivement le territoire guyanais.</p>
-  <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+  <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
     <!---->
     <!---->
     <div class="_spinner_3306d0"></div>
@@ -93,7 +93,7 @@
     <div class="fr-mb-3w">
       <h3>Autorisations de recherche</h3>
       <hr>
-      <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+      <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
         <!---->
         <!---->
         <div class="_spinner_3306d0"></div>
@@ -102,7 +102,7 @@
     <div class="fr-mb-3w">
       <h3>Permis de recherches</h3>
       <hr>
-      <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+      <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
         <!---->
         <!---->
         <div class="_spinner_3306d0"></div>
@@ -111,7 +111,7 @@
     <div class="fr-mb-3w">
       <h3>Autorisations d'exploitation</h3>
       <hr>
-      <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+      <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
         <!---->
         <!---->
         <div class="_spinner_3306d0"></div>
@@ -120,7 +120,7 @@
     <div class="fr-mb-3w">
       <h3>Concessions</h3>
       <hr>
-      <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+      <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
         <!---->
         <!---->
         <div class="_spinner_3306d0"></div>
diff --git a/packages/ui/src/components/statistiques/guyane.stories_snapshots_WithError.html b/packages/ui/src/components/statistiques/guyane.stories_snapshots_WithError.html
index 5d0bbf73e910c49eeaa9375bd11b2a3a38dbb427..b2c9d63628d1e83a953e3c797b640d13b611d850 100644
--- a/packages/ui/src/components/statistiques/guyane.stories_snapshots_WithError.html
+++ b/packages/ui/src/components/statistiques/guyane.stories_snapshots_WithError.html
@@ -9,7 +9,7 @@
       <div class="fr-grid-row">
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class=" undefined" style="display: flex; justify-content: center;">
+          <div class="" style="display: flex; justify-content: center;">
             <div class="fr-alert fr-alert--error fr-alert--sm">
               <p>Because reasons</p>
             </div>
@@ -22,7 +22,7 @@
         </div>
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class=" undefined" style="display: flex; justify-content: center;">
+          <div class="" style="display: flex; justify-content: center;">
             <div class="fr-alert fr-alert--error fr-alert--sm">
               <p>Because reasons</p>
             </div>
@@ -35,7 +35,7 @@
         </div>
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class=" undefined" style="display: flex; justify-content: center;">
+          <div class="" style="display: flex; justify-content: center;">
             <div class="fr-alert fr-alert--error fr-alert--sm">
               <p>Because reasons</p>
             </div>
@@ -53,7 +53,7 @@
       <div class="fr-grid-row">
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class=" undefined" style="display: flex; justify-content: center;">
+          <div class="" style="display: flex; justify-content: center;">
             <div class="fr-alert fr-alert--error fr-alert--sm">
               <p>Because reasons</p>
             </div>
@@ -66,7 +66,7 @@
         </div>
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class=" undefined" style="display: flex; justify-content: center;">
+          <div class="" style="display: flex; justify-content: center;">
             <div class="fr-alert fr-alert--error fr-alert--sm">
               <p>Because reasons</p>
             </div>
@@ -79,7 +79,7 @@
         </div>
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class=" undefined" style="display: flex; justify-content: center;">
+          <div class="" style="display: flex; justify-content: center;">
             <div class="fr-alert fr-alert--error fr-alert--sm">
               <p>Because reasons</p>
             </div>
@@ -94,7 +94,7 @@
   </div>
   <h2>Production et activité minière légales</h2><span class="separator"></span>
   <p class="fr-mb-3w">Les données affichées ici sont celles contenues dans la base de donnée Camino. Elles sont stabilisées pour l’année n-2 mais sont susceptibles d’évoluer jusqu’à la cloture de la collecte des déclarations règlementaires de l’année précédente et l'année en cours. Ces données concernent exclusivement le territoire guyanais.</p>
-  <div class=" undefined" style="display: flex; justify-content: center;">
+  <div class="" style="display: flex; justify-content: center;">
     <div class="fr-alert fr-alert--error fr-alert--sm">
       <p>Because reasons</p>
     </div>
@@ -107,7 +107,7 @@
     <div class="fr-mb-3w">
       <h3>Autorisations de recherche</h3>
       <hr>
-      <div class=" undefined" style="display: flex; justify-content: center;">
+      <div class="" style="display: flex; justify-content: center;">
         <div class="fr-alert fr-alert--error fr-alert--sm">
           <p>Because reasons</p>
         </div>
@@ -118,7 +118,7 @@
     <div class="fr-mb-3w">
       <h3>Permis de recherches</h3>
       <hr>
-      <div class=" undefined" style="display: flex; justify-content: center;">
+      <div class="" style="display: flex; justify-content: center;">
         <div class="fr-alert fr-alert--error fr-alert--sm">
           <p>Because reasons</p>
         </div>
@@ -129,7 +129,7 @@
     <div class="fr-mb-3w">
       <h3>Autorisations d'exploitation</h3>
       <hr>
-      <div class=" undefined" style="display: flex; justify-content: center;">
+      <div class="" style="display: flex; justify-content: center;">
         <div class="fr-alert fr-alert--error fr-alert--sm">
           <p>Because reasons</p>
         </div>
@@ -140,7 +140,7 @@
     <div class="fr-mb-3w">
       <h3>Concessions</h3>
       <hr>
-      <div class=" undefined" style="display: flex; justify-content: center;">
+      <div class="" style="display: flex; justify-content: center;">
         <div class="fr-alert fr-alert--error fr-alert--sm">
           <p>Because reasons</p>
         </div>
diff --git a/packages/ui/src/components/statistiques/guyane.tsx b/packages/ui/src/components/statistiques/guyane.tsx
index 17c1ac76e8ae7d34430e2df90cc22d2950d40c42..f0d983dcc5622bd3d3eb3a70a34c78a86bde7255 100644
--- a/packages/ui/src/components/statistiques/guyane.tsx
+++ b/packages/ui/src/components/statistiques/guyane.tsx
@@ -421,7 +421,7 @@ export const PureGuyane = defineComponent<Props>(props => {
 
       <LoadingElement
         data={data.value}
-        renderItem={() => (isNotNullNorUndefined(tabs.value) ? <Tabs initTab={tabActive.value} tabClicked={tabToggle} tabs={tabs.value} tabsTitle="Années" /> : null)}
+        renderItem={() => (isNotNullNorUndefined(tabs.value) ? <Tabs id="statistiques_guyane_annees" initTab={tabActive.value} tabClicked={tabToggle} tabs={tabs.value} tabsTitle="Années" /> : null)}
       />
 
       <div id="evolution" class="my-xxl">
diff --git a/packages/ui/src/components/statistiques/mineraux-metaux-metropole.stories_snapshots_Loading.html b/packages/ui/src/components/statistiques/mineraux-metaux-metropole.stories_snapshots_Loading.html
index 39cc9fd9bb481a509e5b417fa76cad0765568600..03625bd5c4f6ad2762a1608760a27489563398bf 100644
--- a/packages/ui/src/components/statistiques/mineraux-metaux-metropole.stories_snapshots_Loading.html
+++ b/packages/ui/src/components/statistiques/mineraux-metaux-metropole.stories_snapshots_Loading.html
@@ -9,7 +9,7 @@
       <div class="fr-grid-row">
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+          <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
             <!---->
             <!---->
             <div class="_spinner_3306d0"></div>
@@ -22,7 +22,7 @@
         </div>
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+          <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
             <!---->
             <!---->
             <div class="_spinner_3306d0"></div>
@@ -33,7 +33,7 @@
         </div>
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+          <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
             <!---->
             <!---->
             <div class="_spinner_3306d0"></div>
@@ -49,7 +49,7 @@
       <div class="fr-grid-row">
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+          <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
             <!---->
             <!---->
             <div class="_spinner_3306d0"></div>
@@ -62,7 +62,7 @@
         </div>
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+          <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
             <!---->
             <!---->
             <div class="_spinner_3306d0"></div>
@@ -75,7 +75,7 @@
         </div>
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+          <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
             <!---->
             <!---->
             <div class="_spinner_3306d0"></div>
@@ -93,7 +93,7 @@
   <div class="_grid-container_72aebd">
     <div style="grid-column-end: span 2;">
       <h3>Bauxite</h3>
-      <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+      <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
         <!---->
         <!---->
         <div class="_spinner_3306d0"></div>
@@ -101,7 +101,7 @@
     </div>
     <div style="grid-column-end: span 2;">
       <h3>Sels (sel de sodium, sel de potassium, sel gemme…)</h3>
-      <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+      <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
         <!---->
         <!---->
         <div class="_spinner_3306d0"></div>
@@ -119,7 +119,7 @@
   <div class="fr-mb-3w">
     <h3>Permis Exclusif de Recherche (PER)</h3>
     <hr>
-    <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+    <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
       <!---->
       <!---->
       <div class="_spinner_3306d0"></div>
@@ -128,7 +128,7 @@
   <div class="fr-mb-3w">
     <h3>Concession</h3>
     <hr>
-    <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+    <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
       <!---->
       <!---->
       <div class="_spinner_3306d0"></div>
diff --git a/packages/ui/src/components/statistiques/mineraux-metaux-metropole.stories_snapshots_WithError.html b/packages/ui/src/components/statistiques/mineraux-metaux-metropole.stories_snapshots_WithError.html
index 373f7a667b774dc8aabe73cfefe51ad7993b0058..5b64561bc861eeb715ed415b1c85f425b78b03ea 100644
--- a/packages/ui/src/components/statistiques/mineraux-metaux-metropole.stories_snapshots_WithError.html
+++ b/packages/ui/src/components/statistiques/mineraux-metaux-metropole.stories_snapshots_WithError.html
@@ -9,7 +9,7 @@
       <div class="fr-grid-row">
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class=" undefined" style="display: flex; justify-content: center;">
+          <div class="" style="display: flex; justify-content: center;">
             <div class="fr-alert fr-alert--error fr-alert--sm">
               <p>Because reasons</p>
             </div>
@@ -24,7 +24,7 @@
         </div>
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class=" undefined" style="display: flex; justify-content: center;">
+          <div class="" style="display: flex; justify-content: center;">
             <div class="fr-alert fr-alert--error fr-alert--sm">
               <p>Because reasons</p>
             </div>
@@ -37,7 +37,7 @@
         </div>
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class=" undefined" style="display: flex; justify-content: center;">
+          <div class="" style="display: flex; justify-content: center;">
             <div class="fr-alert fr-alert--error fr-alert--sm">
               <p>Because reasons</p>
             </div>
@@ -55,7 +55,7 @@
       <div class="fr-grid-row">
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class=" undefined" style="display: flex; justify-content: center;">
+          <div class="" style="display: flex; justify-content: center;">
             <div class="fr-alert fr-alert--error fr-alert--sm">
               <p>Because reasons</p>
             </div>
@@ -70,7 +70,7 @@
         </div>
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class=" undefined" style="display: flex; justify-content: center;">
+          <div class="" style="display: flex; justify-content: center;">
             <div class="fr-alert fr-alert--error fr-alert--sm">
               <p>Because reasons</p>
             </div>
@@ -85,7 +85,7 @@
         </div>
         <div class="fr-col-12 fr-col-md-4">
           <p class="fr-display--xs _donnee-importante_65867c">
-          <div class=" undefined" style="display: flex; justify-content: center;">
+          <div class="" style="display: flex; justify-content: center;">
             <div class="fr-alert fr-alert--error fr-alert--sm">
               <p>Because reasons</p>
             </div>
@@ -105,7 +105,7 @@
   <div class="_grid-container_72aebd">
     <div style="grid-column-end: span 2;">
       <h3>Bauxite</h3>
-      <div class=" undefined" style="display: flex; justify-content: center;">
+      <div class="" style="display: flex; justify-content: center;">
         <div class="fr-alert fr-alert--error fr-alert--sm">
           <p>Because reasons</p>
         </div>
@@ -115,7 +115,7 @@
     </div>
     <div style="grid-column-end: span 2;">
       <h3>Sels (sel de sodium, sel de potassium, sel gemme…)</h3>
-      <div class=" undefined" style="display: flex; justify-content: center;">
+      <div class="" style="display: flex; justify-content: center;">
         <div class="fr-alert fr-alert--error fr-alert--sm">
           <p>Because reasons</p>
         </div>
@@ -135,7 +135,7 @@
   <div class="fr-mb-3w">
     <h3>Permis Exclusif de Recherche (PER)</h3>
     <hr>
-    <div class=" undefined" style="display: flex; justify-content: center;">
+    <div class="" style="display: flex; justify-content: center;">
       <div class="fr-alert fr-alert--error fr-alert--sm">
         <p>Because reasons</p>
       </div>
@@ -146,7 +146,7 @@
   <div class="fr-mb-3w">
     <h3>Concession</h3>
     <hr>
-    <div class=" undefined" style="display: flex; justify-content: center;">
+    <div class="" style="display: flex; justify-content: center;">
       <div class="fr-alert fr-alert--error fr-alert--sm">
         <p>Because reasons</p>
       </div>
diff --git a/packages/ui/src/components/titre-creation.stories_snapshots_DefaultUserSuper.html b/packages/ui/src/components/titre-creation.stories_snapshots_DefaultUserSuper.html
index 5749e5f082f8e7f5ca5c6490116d0ec3e557bcc4..d19cb4c05b9c14fe061006fbd73105ee884174ef 100644
--- a/packages/ui/src/components/titre-creation.stories_snapshots_DefaultUserSuper.html
+++ b/packages/ui/src/components/titre-creation.stories_snapshots_DefaultUserSuper.html
@@ -2,9 +2,9 @@
   <h1>Demande de titre</h1>
   <form>
     <!---->
-    <div class="fr-select-group"><label class="fr-label" for="select_271">Domaine
+    <div class="fr-select-group"><label class="fr-label" for="titre_domaine">Domaine
         <!---->
-      </label><select class="fr-select" id="select_271" aria-label="Domaine" name="select_271">
+      </label><select class="fr-select" id="titre_domaine" aria-label="Domaine" name="titre_domaine">
         <option value="c">carrières</option>
         <option value="f">combustibles fossiles</option>
         <option value="r">éléments radioactifs</option>
diff --git a/packages/ui/src/components/titre-creation.stories_snapshots_DisplayErrorMessageUserSuper.html b/packages/ui/src/components/titre-creation.stories_snapshots_DisplayErrorMessageUserSuper.html
index 0d5a9927a5bf945602f73ae27fa145158b3c6516..076dccf90ae42a56b326750464570dfbbacebd35 100644
--- a/packages/ui/src/components/titre-creation.stories_snapshots_DisplayErrorMessageUserSuper.html
+++ b/packages/ui/src/components/titre-creation.stories_snapshots_DisplayErrorMessageUserSuper.html
@@ -2,9 +2,9 @@
   <h1>Demande de titre</h1>
   <form>
     <!---->
-    <div class="fr-select-group"><label class="fr-label" for="select_271">Domaine
+    <div class="fr-select-group"><label class="fr-label" for="titre_domaine">Domaine
         <!---->
-      </label><select class="fr-select" id="select_271" aria-label="Domaine" name="select_271" value="m">
+      </label><select class="fr-select" id="titre_domaine" aria-label="Domaine" name="titre_domaine" value="m">
         <option value="c">carrières</option>
         <option value="f">combustibles fossiles</option>
         <option value="r">éléments radioactifs</option>
@@ -15,9 +15,9 @@
         <option value="s">stockages souterrains</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="titre_type">Type
         <!---->
-      </label><select class="fr-select" id="select_670" aria-label="Type" name="select_670" value="ax">
+      </label><select class="fr-select" id="titre_type" aria-label="Type" name="titre_type" value="ax">
         <option value="ap">autorisation de prospections préalables</option>
         <option value="ar">autorisation de recherches</option>
         <option selected="" value="ax">autorisation d'exploitation</option>
@@ -27,11 +27,11 @@
         <option value="px">permis d'exploitation</option>
         <option disabled="" hidden="" value="">Selectionnez une option</option>
       </select></div>
-    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Nom du titre
+    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="titre_nom">Nom du titre
         <!---->
         <!---->
         <!---->
-      </label><input class="fr-input" name="input_74" id="input_74" required="" type="text" value="Titre full">
+      </label><input class="fr-input" name="titre_nom" id="titre_nom" required="" type="text" value="Titre full">
       <!---->
     </div>
     <div class="fr-input-group fr-mb-0 fr-mt-3w"><label class="fr-label fr-mb-1w" for="references">Références</label>
diff --git a/packages/ui/src/components/titre-creation.stories_snapshots_FullEntreprise.html b/packages/ui/src/components/titre-creation.stories_snapshots_FullEntreprise.html
index f1a3ad210fa6bf2208677fa38674ef601e8312af..dd3547f54b2a3ee38c3e4e635186d6fba3fe5227 100644
--- a/packages/ui/src/components/titre-creation.stories_snapshots_FullEntreprise.html
+++ b/packages/ui/src/components/titre-creation.stories_snapshots_FullEntreprise.html
@@ -7,24 +7,24 @@
         <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="input_entreprise-control" role="listbox"></ul>
       </div>
     </div>
-    <div class="fr-select-group"><label class="fr-label" for="select_271">Domaine
+    <div class="fr-select-group"><label class="fr-label" for="titre_domaine">Domaine
         <!---->
-      </label><select class="fr-select" id="select_271" aria-label="Domaine" name="select_271" value="m">
+      </label><select class="fr-select" id="titre_domaine" aria-label="Domaine" name="titre_domaine" 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="titre_type">Type
         <!---->
-      </label><select class="fr-select" id="select_670" aria-label="Type" name="select_670" value="ax">
+      </label><select class="fr-select" id="titre_type" aria-label="Type" name="titre_type" value="ax">
         <option value="ar">autorisation de recherches</option>
         <option selected="" value="ax">autorisation d'exploitation</option>
         <option disabled="" hidden="" value="">Selectionnez une option</option>
       </select></div>
-    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Nom du titre
+    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="titre_nom">Nom du titre
         <!---->
         <!---->
         <!---->
-      </label><input class="fr-input" name="input_74" id="input_74" required="" type="text" value="Titre full">
+      </label><input class="fr-input" name="titre_nom" id="titre_nom" required="" type="text" value="Titre full">
       <!---->
     </div>
     <!---->
diff --git a/packages/ui/src/components/titre-creation.stories_snapshots_FullSuper.html b/packages/ui/src/components/titre-creation.stories_snapshots_FullSuper.html
index 0d5a9927a5bf945602f73ae27fa145158b3c6516..076dccf90ae42a56b326750464570dfbbacebd35 100644
--- a/packages/ui/src/components/titre-creation.stories_snapshots_FullSuper.html
+++ b/packages/ui/src/components/titre-creation.stories_snapshots_FullSuper.html
@@ -2,9 +2,9 @@
   <h1>Demande de titre</h1>
   <form>
     <!---->
-    <div class="fr-select-group"><label class="fr-label" for="select_271">Domaine
+    <div class="fr-select-group"><label class="fr-label" for="titre_domaine">Domaine
         <!---->
-      </label><select class="fr-select" id="select_271" aria-label="Domaine" name="select_271" value="m">
+      </label><select class="fr-select" id="titre_domaine" aria-label="Domaine" name="titre_domaine" value="m">
         <option value="c">carrières</option>
         <option value="f">combustibles fossiles</option>
         <option value="r">éléments radioactifs</option>
@@ -15,9 +15,9 @@
         <option value="s">stockages souterrains</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="titre_type">Type
         <!---->
-      </label><select class="fr-select" id="select_670" aria-label="Type" name="select_670" value="ax">
+      </label><select class="fr-select" id="titre_type" aria-label="Type" name="titre_type" value="ax">
         <option value="ap">autorisation de prospections préalables</option>
         <option value="ar">autorisation de recherches</option>
         <option selected="" value="ax">autorisation d'exploitation</option>
@@ -27,11 +27,11 @@
         <option value="px">permis d'exploitation</option>
         <option disabled="" hidden="" value="">Selectionnez une option</option>
       </select></div>
-    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_74">Nom du titre
+    <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="titre_nom">Nom du titre
         <!---->
         <!---->
         <!---->
-      </label><input class="fr-input" name="input_74" id="input_74" required="" type="text" value="Titre full">
+      </label><input class="fr-input" name="titre_nom" id="titre_nom" required="" type="text" value="Titre full">
       <!---->
     </div>
     <div class="fr-input-group fr-mb-0 fr-mt-3w"><label class="fr-label fr-mb-1w" for="references">Références</label>
diff --git a/packages/ui/src/components/titre-creation.stories_snapshots_OnlyOneEntrepriseUserEntreprise.html b/packages/ui/src/components/titre-creation.stories_snapshots_OnlyOneEntrepriseUserEntreprise.html
index e232c2a0410bec6d8747a953d2baf484aa6afef5..ae6c5a011620d055f582f4ea3129d40c04455359 100644
--- a/packages/ui/src/components/titre-creation.stories_snapshots_OnlyOneEntrepriseUserEntreprise.html
+++ b/packages/ui/src/components/titre-creation.stories_snapshots_OnlyOneEntrepriseUserEntreprise.html
@@ -7,15 +7,15 @@
         <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="input_entreprise-control" role="listbox"></ul>
       </div>
     </div>
-    <div class="fr-select-group"><label class="fr-label" for="select_670">Domaine
+    <div class="fr-select-group"><label class="fr-label" for="titre_domaine">Domaine
         <!---->
-      </label><select class="fr-select" id="select_670" aria-label="Domaine" name="select_670" value="m">
+      </label><select class="fr-select" id="titre_domaine" aria-label="Domaine" name="titre_domaine" 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="titre_type">Type
         <!---->
-      </label><select class="fr-select" id="select_74" aria-label="Type" name="select_74">
+      </label><select class="fr-select" id="titre_type" aria-label="Type" name="titre_type">
         <option value="ar">autorisation de recherches</option>
         <option value="ax">autorisation d'exploitation</option>
         <option selected="" disabled="" hidden="" value="">Selectionnez une option</option>
diff --git a/packages/ui/src/components/titre-creation.stories_snapshots_OnlyOneEntrepriseUserSuper.html b/packages/ui/src/components/titre-creation.stories_snapshots_OnlyOneEntrepriseUserSuper.html
index 5749e5f082f8e7f5ca5c6490116d0ec3e557bcc4..d19cb4c05b9c14fe061006fbd73105ee884174ef 100644
--- a/packages/ui/src/components/titre-creation.stories_snapshots_OnlyOneEntrepriseUserSuper.html
+++ b/packages/ui/src/components/titre-creation.stories_snapshots_OnlyOneEntrepriseUserSuper.html
@@ -2,9 +2,9 @@
   <h1>Demande de titre</h1>
   <form>
     <!---->
-    <div class="fr-select-group"><label class="fr-label" for="select_271">Domaine
+    <div class="fr-select-group"><label class="fr-label" for="titre_domaine">Domaine
         <!---->
-      </label><select class="fr-select" id="select_271" aria-label="Domaine" name="select_271">
+      </label><select class="fr-select" id="titre_domaine" aria-label="Domaine" name="titre_domaine">
         <option value="c">carrières</option>
         <option value="f">combustibles fossiles</option>
         <option value="r">éléments radioactifs</option>
diff --git a/packages/ui/src/components/titre-creation.tsx b/packages/ui/src/components/titre-creation.tsx
index ed64aa6078d091b767596b702818eb449639cd3f..14c4027c1ac41cb4d7274f0b4353a2e26e553a22 100644
--- a/packages/ui/src/components/titre-creation.tsx
+++ b/packages/ui/src/components/titre-creation.tsx
@@ -207,7 +207,7 @@ export const PureTitreCreation = defineComponent<Props>(props => {
         ) : null}
 
         {isNotNullNorUndefined(titreDemande.value.titreTypeId) ? (
-          <DsfrInput required={true} initialValue={titreDemande.value.nom} legend={{ main: 'Nom du titre' }} type={{ type: 'text' }} valueChanged={onTitreNomChanged} />
+          <DsfrInput id="titre_nom" required={true} initialValue={titreDemande.value.nom} legend={{ main: 'Nom du titre' }} type={{ type: 'text' }} valueChanged={onTitreNomChanged} />
         ) : null}
 
         {isNotNullNorUndefined(titreDemande.value.titreTypeId) && !entrepriseOuBureauDEtudeCheck.value ? (
diff --git a/packages/ui/src/components/titre.stories_snapshots_AbattisKoticaOctroi.html b/packages/ui/src/components/titre.stories_snapshots_AbattisKoticaOctroi.html
index 923a3a2104e05e0385cdbb453f859124796693b3..41bf88518eb332293414c4113d08206c68fae14e 100644
--- a/packages/ui/src/components/titre.stories_snapshots_AbattisKoticaOctroi.html
+++ b/packages/ui/src/components/titre.stories_snapshots_AbattisKoticaOctroi.html
@@ -125,85 +125,85 @@
       <div class="fr-pt-3w">
         <div class="fr-tabs" style="--tabs-height: 0px;">
           <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-            <li role="presentation"><button id="tabpanel-carte-271" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-271-panel">Carte</button></li>
-            <li role="presentation"><button id="tabpanel-points-271" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-271-panel">Tableau</button></li>
+            <li role="presentation"><button id="tabpanel-carte-m-ar-abattis-kotika-2006-oct01" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-m-ar-abattis-kotika-2006-oct01-panel">Carte</button></li>
+            <li role="presentation"><button id="tabpanel-points-m-ar-abattis-kotika-2006-oct01" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-m-ar-abattis-kotika-2006-oct01-panel">Tableau</button></li>
           </ul>
-          <div id="tabpanel-carte-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-271" tabindex="0">
+          <div id="tabpanel-carte-m-ar-abattis-kotika-2006-oct01-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-m-ar-abattis-kotika-2006-oct01" tabindex="0">
             <!---->
           </div>
-          <div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
+          <div id="tabpanel-points-m-ar-abattis-kotika-2006-oct01-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-m-ar-abattis-kotika-2006-oct01" tabindex="0">
             <div style="display: flex; flex-direction: column;">
-              <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_670">Système géographique</label>
-                <div id="typeahead_geosysteme_670_wrapper" class="_typeahead_8eddf1">
-                  <div class="flex"><input id="typeahead_geosysteme_670" type="text" title="" name="typeahead_geosysteme_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_670-control" aria-activedescendant="typeahead_geosysteme_670-control" aria-expanded="false" aria-autocomplete="list" value="RGFG95 / UTM zone 22N - (2972)"></div>
-                  <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_670-control" role="listbox">
-                    <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_670-control-0">
+              <div class="fr-select-group"><label class="fr-label" for="2972">Système géographique</label>
+                <div id="2972_wrapper" class="_typeahead_8eddf1">
+                  <div class="flex"><input id="2972" type="text" title="" name="2972" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="2972-control" aria-activedescendant="2972-control" aria-expanded="false" aria-autocomplete="list" value="RGFG95 / UTM zone 22N - (2972)"></div>
+                  <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="2972-control" role="listbox">
+                    <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="2972-control-0">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-1">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-1">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-2">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-2">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-3">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-3">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-4">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-4">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-5">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-5">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">WGS84 - (4326)</span><span class="fr-text">Monde</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-6">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-6">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-7">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-7">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-8">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-8">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-9">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-9">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-10">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-10">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-11">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-11">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-12">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-12">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-13">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-13">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-14">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-14">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-15">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-15">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-16">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-16">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-17">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-17">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-18">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-18">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-19">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-19">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-20">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-20">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-21">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-21">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-22">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-22">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                     </li>
                   </ul>
@@ -359,85 +359,85 @@
               <div class="fr-pt-2w">
                 <div class="fr-tabs" style="--tabs-height: 0px;">
                   <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-                    <li role="presentation"><button id="tabpanel-carte-74" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-74-panel">Carte</button></li>
-                    <li role="presentation"><button id="tabpanel-points-74" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-74-panel">Tableau</button></li>
+                    <li role="presentation"><button id="tabpanel-carte-1iF8kbcg0oGaEMAJxgUZYk8W" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-1iF8kbcg0oGaEMAJxgUZYk8W-panel">Carte</button></li>
+                    <li role="presentation"><button id="tabpanel-points-1iF8kbcg0oGaEMAJxgUZYk8W" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-1iF8kbcg0oGaEMAJxgUZYk8W-panel">Tableau</button></li>
                   </ul>
-                  <div id="tabpanel-carte-74-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-74" tabindex="0">
+                  <div id="tabpanel-carte-1iF8kbcg0oGaEMAJxgUZYk8W-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-1iF8kbcg0oGaEMAJxgUZYk8W" tabindex="0">
                     <!---->
                   </div>
-                  <div id="tabpanel-points-74-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-74" tabindex="0">
+                  <div id="tabpanel-points-1iF8kbcg0oGaEMAJxgUZYk8W-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-1iF8kbcg0oGaEMAJxgUZYk8W" tabindex="0">
                     <div style="display: flex; flex-direction: column;">
-                      <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_878">Système géographique</label>
-                        <div id="typeahead_geosysteme_878_wrapper" class="_typeahead_8eddf1">
-                          <div class="flex"><input id="typeahead_geosysteme_878" type="text" title="" name="typeahead_geosysteme_878" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_878-control" aria-activedescendant="typeahead_geosysteme_878-control" aria-expanded="false" aria-autocomplete="list" value="RGFG95 / UTM zone 22N - (2972)"></div>
-                          <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_878-control" role="listbox">
-                            <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_878-control-0">
+                      <div class="fr-select-group"><label class="fr-label" for="2972">Système géographique</label>
+                        <div id="2972_wrapper" class="_typeahead_8eddf1">
+                          <div class="flex"><input id="2972" type="text" title="" name="2972" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="2972-control" aria-activedescendant="2972-control" aria-expanded="false" aria-autocomplete="list" value="RGFG95 / UTM zone 22N - (2972)"></div>
+                          <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="2972-control" role="listbox">
+                            <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="2972-control-0">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-1">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-1">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-2">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-2">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-3">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-3">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-4">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-4">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-5">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-5">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">WGS84 - (4326)</span><span class="fr-text">Monde</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-6">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-6">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-7">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-7">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-8">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-8">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-9">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-9">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-10">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-10">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-11">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-11">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-12">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-12">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-13">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-13">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-14">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-14">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-15">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-15">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-16">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-16">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-17">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-17">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-18">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-18">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-19">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-19">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-20">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-20">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-21">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-21">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-22">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-22">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                             </li>
                           </ul>
diff --git a/packages/ui/src/components/titre.stories_snapshots_BasseManaMod.html b/packages/ui/src/components/titre.stories_snapshots_BasseManaMod.html
index 2683a25b34704ee3fa90b531e13be8c23535c002..ea2c7743a3cd10966509d4f3d179b12e60698706 100644
--- a/packages/ui/src/components/titre.stories_snapshots_BasseManaMod.html
+++ b/packages/ui/src/components/titre.stories_snapshots_BasseManaMod.html
@@ -138,85 +138,85 @@
       <div class="fr-pt-3w">
         <div class="fr-tabs" style="--tabs-height: 0px;">
           <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-            <li role="presentation"><button id="tabpanel-carte-271" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-271-panel">Carte</button></li>
-            <li role="presentation"><button id="tabpanel-points-271" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-271-panel">Tableau</button></li>
+            <li role="presentation"><button id="tabpanel-carte-m-pr-basse-mana-2018-pr101" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-m-pr-basse-mana-2018-pr101-panel">Carte</button></li>
+            <li role="presentation"><button id="tabpanel-points-m-pr-basse-mana-2018-pr101" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-m-pr-basse-mana-2018-pr101-panel">Tableau</button></li>
           </ul>
-          <div id="tabpanel-carte-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-271" tabindex="0">
+          <div id="tabpanel-carte-m-pr-basse-mana-2018-pr101-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-m-pr-basse-mana-2018-pr101" tabindex="0">
             <!---->
           </div>
-          <div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
+          <div id="tabpanel-points-m-pr-basse-mana-2018-pr101-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-m-pr-basse-mana-2018-pr101" tabindex="0">
             <div style="display: flex; flex-direction: column;">
-              <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_670">Système géographique</label>
-                <div id="typeahead_geosysteme_670_wrapper" class="_typeahead_8eddf1">
-                  <div class="flex"><input id="typeahead_geosysteme_670" type="text" title="" name="typeahead_geosysteme_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_670-control" aria-activedescendant="typeahead_geosysteme_670-control" aria-expanded="false" aria-autocomplete="list" value="RGFG95 / UTM zone 22N - (2972)"></div>
-                  <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_670-control" role="listbox">
-                    <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_670-control-0">
+              <div class="fr-select-group"><label class="fr-label" for="2972">Système géographique</label>
+                <div id="2972_wrapper" class="_typeahead_8eddf1">
+                  <div class="flex"><input id="2972" type="text" title="" name="2972" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="2972-control" aria-activedescendant="2972-control" aria-expanded="false" aria-autocomplete="list" value="RGFG95 / UTM zone 22N - (2972)"></div>
+                  <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="2972-control" role="listbox">
+                    <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="2972-control-0">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-1">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-1">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-2">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-2">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-3">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-3">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-4">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-4">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-5">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-5">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">WGS84 - (4326)</span><span class="fr-text">Monde</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-6">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-6">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-7">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-7">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-8">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-8">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-9">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-9">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-10">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-10">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-11">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-11">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-12">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-12">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-13">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-13">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-14">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-14">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-15">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-15">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-16">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-16">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-17">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-17">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-18">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-18">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-19">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-19">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-20">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-20">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-21">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-21">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-22">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-22">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                     </li>
                   </ul>
@@ -556,85 +556,85 @@
               <div class="fr-pt-2w">
                 <div class="fr-tabs" style="--tabs-height: 0px;">
                   <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-                    <li role="presentation"><button id="tabpanel-carte-74" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-74-panel">Carte</button></li>
-                    <li role="presentation"><button id="tabpanel-points-74" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-74-panel">Tableau</button></li>
+                    <li role="presentation"><button id="tabpanel-carte-NKW0jIKc5cPBIp2dwu2VceCG" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-NKW0jIKc5cPBIp2dwu2VceCG-panel">Carte</button></li>
+                    <li role="presentation"><button id="tabpanel-points-NKW0jIKc5cPBIp2dwu2VceCG" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-NKW0jIKc5cPBIp2dwu2VceCG-panel">Tableau</button></li>
                   </ul>
-                  <div id="tabpanel-carte-74-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-74" tabindex="0">
+                  <div id="tabpanel-carte-NKW0jIKc5cPBIp2dwu2VceCG-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-NKW0jIKc5cPBIp2dwu2VceCG" tabindex="0">
                     <!---->
                   </div>
-                  <div id="tabpanel-points-74-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-74" tabindex="0">
+                  <div id="tabpanel-points-NKW0jIKc5cPBIp2dwu2VceCG-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-NKW0jIKc5cPBIp2dwu2VceCG" tabindex="0">
                     <div style="display: flex; flex-direction: column;">
-                      <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_878">Système géographique</label>
-                        <div id="typeahead_geosysteme_878_wrapper" class="_typeahead_8eddf1">
-                          <div class="flex"><input id="typeahead_geosysteme_878" type="text" title="" name="typeahead_geosysteme_878" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_878-control" aria-activedescendant="typeahead_geosysteme_878-control" aria-expanded="false" aria-autocomplete="list" value="RGFG95 / UTM zone 22N - (2972)"></div>
-                          <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_878-control" role="listbox">
-                            <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_878-control-0">
+                      <div class="fr-select-group"><label class="fr-label" for="2972">Système géographique</label>
+                        <div id="2972_wrapper" class="_typeahead_8eddf1">
+                          <div class="flex"><input id="2972" type="text" title="" name="2972" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="2972-control" aria-activedescendant="2972-control" aria-expanded="false" aria-autocomplete="list" value="RGFG95 / UTM zone 22N - (2972)"></div>
+                          <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="2972-control" role="listbox">
+                            <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="2972-control-0">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-1">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-1">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-2">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-2">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-3">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-3">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-4">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-4">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-5">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-5">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">WGS84 - (4326)</span><span class="fr-text">Monde</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-6">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-6">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-7">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-7">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-8">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-8">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-9">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-9">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-10">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-10">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-11">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-11">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-12">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-12">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-13">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-13">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-14">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-14">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-15">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-15">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-16">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-16">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-17">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-17">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-18">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-18">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-19">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-19">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-20">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-20">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-21">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-21">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-22">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-22">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                             </li>
                           </ul>
diff --git a/packages/ui/src/components/titre.stories_snapshots_BonEspoirOctroi.html b/packages/ui/src/components/titre.stories_snapshots_BonEspoirOctroi.html
index ace1dffe2591257da7900417309ee2e7671ef67a..08b59b349ce63977469d14e6518d754df2c3a218 100644
--- a/packages/ui/src/components/titre.stories_snapshots_BonEspoirOctroi.html
+++ b/packages/ui/src/components/titre.stories_snapshots_BonEspoirOctroi.html
@@ -156,85 +156,85 @@
       <div class="fr-pt-3w">
         <div class="fr-tabs" style="--tabs-height: 0px;">
           <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-            <li role="presentation"><button id="tabpanel-carte-271" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-271-panel">Carte</button></li>
-            <li role="presentation"><button id="tabpanel-points-271" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-271-panel">Tableau</button></li>
+            <li role="presentation"><button id="tabpanel-carte-m-pr-bon-espoir-2001-oct01" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-m-pr-bon-espoir-2001-oct01-panel">Carte</button></li>
+            <li role="presentation"><button id="tabpanel-points-m-pr-bon-espoir-2001-oct01" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-m-pr-bon-espoir-2001-oct01-panel">Tableau</button></li>
           </ul>
-          <div id="tabpanel-carte-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-271" tabindex="0">
+          <div id="tabpanel-carte-m-pr-bon-espoir-2001-oct01-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-m-pr-bon-espoir-2001-oct01" tabindex="0">
             <!---->
           </div>
-          <div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
+          <div id="tabpanel-points-m-pr-bon-espoir-2001-oct01-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-m-pr-bon-espoir-2001-oct01" tabindex="0">
             <div style="display: flex; flex-direction: column;">
-              <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_670">Système géographique</label>
-                <div id="typeahead_geosysteme_670_wrapper" class="_typeahead_8eddf1">
-                  <div class="flex"><input id="typeahead_geosysteme_670" type="text" title="" name="typeahead_geosysteme_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_670-control" aria-activedescendant="typeahead_geosysteme_670-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
-                  <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_670-control" role="listbox">
-                    <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_670-control-0">
+              <div class="fr-select-group"><label class="fr-label" for="4326">Système géographique</label>
+                <div id="4326_wrapper" class="_typeahead_8eddf1">
+                  <div class="flex"><input id="4326" type="text" title="" name="4326" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="4326-control" aria-activedescendant="4326-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+                  <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="4326-control" role="listbox">
+                    <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="4326-control-0">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-1">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-1">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-2">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-2">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-3">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-3">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-4">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-4">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-5">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-5">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-6">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-6">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-7">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-7">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-8">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-8">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-9">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-9">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-10">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-10">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-11">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-11">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-12">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-12">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-13">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-13">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-14">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-14">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-15">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-15">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-16">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-16">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-17">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-17">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-18">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-18">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-19">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-19">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-20">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-20">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-21">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-21">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-22">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-22">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                     </li>
                   </ul>
@@ -444,85 +444,85 @@
               <div class="fr-pt-2w">
                 <div class="fr-tabs" style="--tabs-height: 0px;">
                   <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-                    <li role="presentation"><button id="tabpanel-carte-74" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-74-panel">Carte</button></li>
-                    <li role="presentation"><button id="tabpanel-points-74" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-74-panel">Tableau</button></li>
+                    <li role="presentation"><button id="tabpanel-carte-CRVhvEIQAc319vUd8BfZoH5W" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-CRVhvEIQAc319vUd8BfZoH5W-panel">Carte</button></li>
+                    <li role="presentation"><button id="tabpanel-points-CRVhvEIQAc319vUd8BfZoH5W" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-CRVhvEIQAc319vUd8BfZoH5W-panel">Tableau</button></li>
                   </ul>
-                  <div id="tabpanel-carte-74-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-74" tabindex="0">
+                  <div id="tabpanel-carte-CRVhvEIQAc319vUd8BfZoH5W-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-CRVhvEIQAc319vUd8BfZoH5W" tabindex="0">
                     <!---->
                   </div>
-                  <div id="tabpanel-points-74-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-74" tabindex="0">
+                  <div id="tabpanel-points-CRVhvEIQAc319vUd8BfZoH5W-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-CRVhvEIQAc319vUd8BfZoH5W" tabindex="0">
                     <div style="display: flex; flex-direction: column;">
-                      <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_878">Système géographique</label>
-                        <div id="typeahead_geosysteme_878_wrapper" class="_typeahead_8eddf1">
-                          <div class="flex"><input id="typeahead_geosysteme_878" type="text" title="" name="typeahead_geosysteme_878" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_878-control" aria-activedescendant="typeahead_geosysteme_878-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
-                          <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_878-control" role="listbox">
-                            <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_878-control-0">
+                      <div class="fr-select-group"><label class="fr-label" for="4326">Système géographique</label>
+                        <div id="4326_wrapper" class="_typeahead_8eddf1">
+                          <div class="flex"><input id="4326" type="text" title="" name="4326" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="4326-control" aria-activedescendant="4326-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+                          <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="4326-control" role="listbox">
+                            <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="4326-control-0">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-1">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-1">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-2">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-2">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-3">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-3">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-4">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-4">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-5">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-5">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-6">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-6">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-7">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-7">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-8">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-8">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-9">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-9">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-10">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-10">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-11">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-11">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-12">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-12">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-13">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-13">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-14">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-14">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-15">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-15">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-16">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-16">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-17">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-17">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-18">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-18">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-19">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-19">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-20">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-20">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-21">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-21">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-22">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-22">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                             </li>
                           </ul>
diff --git a/packages/ui/src/components/titre.stories_snapshots_BonEspoirProlongation2.html b/packages/ui/src/components/titre.stories_snapshots_BonEspoirProlongation2.html
index 3a21ca9b5efa9fec3203eb534086e6be8958d065..4a874407bb086f6281d14e07332e5aeb70e34b9a 100644
--- a/packages/ui/src/components/titre.stories_snapshots_BonEspoirProlongation2.html
+++ b/packages/ui/src/components/titre.stories_snapshots_BonEspoirProlongation2.html
@@ -163,85 +163,85 @@
       <div class="fr-pt-3w">
         <div class="fr-tabs" style="--tabs-height: 0px;">
           <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-            <li role="presentation"><button id="tabpanel-carte-271" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-271-panel">Carte</button></li>
-            <li role="presentation"><button id="tabpanel-points-271" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-271-panel">Tableau</button></li>
+            <li role="presentation"><button id="tabpanel-carte-m-pr-bon-espoir-2001-pr201" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-m-pr-bon-espoir-2001-pr201-panel">Carte</button></li>
+            <li role="presentation"><button id="tabpanel-points-m-pr-bon-espoir-2001-pr201" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-m-pr-bon-espoir-2001-pr201-panel">Tableau</button></li>
           </ul>
-          <div id="tabpanel-carte-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-271" tabindex="0">
+          <div id="tabpanel-carte-m-pr-bon-espoir-2001-pr201-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-m-pr-bon-espoir-2001-pr201" tabindex="0">
             <!---->
           </div>
-          <div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
+          <div id="tabpanel-points-m-pr-bon-espoir-2001-pr201-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-m-pr-bon-espoir-2001-pr201" tabindex="0">
             <div style="display: flex; flex-direction: column;">
-              <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_670">Système géographique</label>
-                <div id="typeahead_geosysteme_670_wrapper" class="_typeahead_8eddf1">
-                  <div class="flex"><input id="typeahead_geosysteme_670" type="text" title="" name="typeahead_geosysteme_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_670-control" aria-activedescendant="typeahead_geosysteme_670-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
-                  <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_670-control" role="listbox">
-                    <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_670-control-0">
+              <div class="fr-select-group"><label class="fr-label" for="4326">Système géographique</label>
+                <div id="4326_wrapper" class="_typeahead_8eddf1">
+                  <div class="flex"><input id="4326" type="text" title="" name="4326" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="4326-control" aria-activedescendant="4326-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+                  <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="4326-control" role="listbox">
+                    <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="4326-control-0">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-1">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-1">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-2">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-2">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-3">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-3">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-4">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-4">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-5">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-5">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-6">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-6">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-7">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-7">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-8">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-8">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-9">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-9">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-10">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-10">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-11">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-11">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-12">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-12">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-13">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-13">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-14">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-14">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-15">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-15">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-16">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-16">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-17">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-17">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-18">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-18">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-19">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-19">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-20">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-20">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-21">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-21">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-22">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-22">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                     </li>
                   </ul>
diff --git a/packages/ui/src/components/titre.stories_snapshots_ChantepieMutation.html b/packages/ui/src/components/titre.stories_snapshots_ChantepieMutation.html
index 9a42d2ce1c64df06321fcda45a7def3127f62f49..5c62a9e7515828fd3f31dd2b7ae9ad1517a17e49 100644
--- a/packages/ui/src/components/titre.stories_snapshots_ChantepieMutation.html
+++ b/packages/ui/src/components/titre.stories_snapshots_ChantepieMutation.html
@@ -121,85 +121,85 @@
       <div class="fr-pt-3w">
         <div class="fr-tabs" style="--tabs-height: 0px;">
           <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-            <li role="presentation"><button id="tabpanel-carte-271" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-271-panel">Carte</button></li>
-            <li role="presentation"><button id="tabpanel-points-271" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-271-panel">Tableau</button></li>
+            <li role="presentation"><button id="tabpanel-carte-m-cx-chantepie-1988-mut01" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-m-cx-chantepie-1988-mut01-panel">Carte</button></li>
+            <li role="presentation"><button id="tabpanel-points-m-cx-chantepie-1988-mut01" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-m-cx-chantepie-1988-mut01-panel">Tableau</button></li>
           </ul>
-          <div id="tabpanel-carte-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-271" tabindex="0">
+          <div id="tabpanel-carte-m-cx-chantepie-1988-mut01-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-m-cx-chantepie-1988-mut01" tabindex="0">
             <!---->
           </div>
-          <div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
+          <div id="tabpanel-points-m-cx-chantepie-1988-mut01-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-m-cx-chantepie-1988-mut01" tabindex="0">
             <div style="display: flex; flex-direction: column;">
-              <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_670">Système géographique</label>
-                <div id="typeahead_geosysteme_670_wrapper" class="_typeahead_8eddf1">
-                  <div class="flex"><input id="typeahead_geosysteme_670" type="text" title="" name="typeahead_geosysteme_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_670-control" aria-activedescendant="typeahead_geosysteme_670-control" aria-expanded="false" aria-autocomplete="list" value="NTF (Paris) / Lambert zone I - (27571)"></div>
-                  <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_670-control" role="listbox">
-                    <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_670-control-0">
+              <div class="fr-select-group"><label class="fr-label" for="27571">Système géographique</label>
+                <div id="27571_wrapper" class="_typeahead_8eddf1">
+                  <div class="flex"><input id="27571" type="text" title="" name="27571" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="27571-control" aria-activedescendant="27571-control" aria-expanded="false" aria-autocomplete="list" value="NTF (Paris) / Lambert zone I - (27571)"></div>
+                  <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="27571-control" role="listbox">
+                    <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="27571-control-0">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-1">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-1">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-2">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-2">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-3">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-3">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-4">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-4">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-5">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-5">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-6">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-6">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">WGS84 - (4326)</span><span class="fr-text">Monde</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-7">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-7">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-8">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-8">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-9">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-9">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-10">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-10">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-11">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-11">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-12">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-12">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-13">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-13">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-14">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-14">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-15">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-15">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-16">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-16">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-17">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-17">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-18">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-18">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-19">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-19">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-20">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-20">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-21">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-21">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-22">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-22">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                     </li>
                   </ul>
diff --git a/packages/ui/src/components/titre.stories_snapshots_ChantepieOctroi.html b/packages/ui/src/components/titre.stories_snapshots_ChantepieOctroi.html
index 9123509e06ec0ba81f096fe1ef526ebfc3d7adc6..7a1f582641428123eecd26e71f12d23d7e72e982 100644
--- a/packages/ui/src/components/titre.stories_snapshots_ChantepieOctroi.html
+++ b/packages/ui/src/components/titre.stories_snapshots_ChantepieOctroi.html
@@ -121,85 +121,85 @@
       <div class="fr-pt-3w">
         <div class="fr-tabs" style="--tabs-height: 0px;">
           <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-            <li role="presentation"><button id="tabpanel-carte-271" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-271-panel">Carte</button></li>
-            <li role="presentation"><button id="tabpanel-points-271" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-271-panel">Tableau</button></li>
+            <li role="presentation"><button id="tabpanel-carte-m-cx-chantepie-1988-oct01" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-m-cx-chantepie-1988-oct01-panel">Carte</button></li>
+            <li role="presentation"><button id="tabpanel-points-m-cx-chantepie-1988-oct01" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-m-cx-chantepie-1988-oct01-panel">Tableau</button></li>
           </ul>
-          <div id="tabpanel-carte-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-271" tabindex="0">
+          <div id="tabpanel-carte-m-cx-chantepie-1988-oct01-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-m-cx-chantepie-1988-oct01" tabindex="0">
             <!---->
           </div>
-          <div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
+          <div id="tabpanel-points-m-cx-chantepie-1988-oct01-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-m-cx-chantepie-1988-oct01" tabindex="0">
             <div style="display: flex; flex-direction: column;">
-              <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_670">Système géographique</label>
-                <div id="typeahead_geosysteme_670_wrapper" class="_typeahead_8eddf1">
-                  <div class="flex"><input id="typeahead_geosysteme_670" type="text" title="" name="typeahead_geosysteme_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_670-control" aria-activedescendant="typeahead_geosysteme_670-control" aria-expanded="false" aria-autocomplete="list" value="NTF (Paris) / Lambert zone I - (27571)"></div>
-                  <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_670-control" role="listbox">
-                    <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_670-control-0">
+              <div class="fr-select-group"><label class="fr-label" for="27571">Système géographique</label>
+                <div id="27571_wrapper" class="_typeahead_8eddf1">
+                  <div class="flex"><input id="27571" type="text" title="" name="27571" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="27571-control" aria-activedescendant="27571-control" aria-expanded="false" aria-autocomplete="list" value="NTF (Paris) / Lambert zone I - (27571)"></div>
+                  <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="27571-control" role="listbox">
+                    <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="27571-control-0">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-1">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-1">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-2">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-2">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-3">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-3">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-4">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-4">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-5">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-5">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-6">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-6">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">WGS84 - (4326)</span><span class="fr-text">Monde</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-7">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-7">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-8">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-8">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-9">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-9">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-10">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-10">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-11">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-11">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-12">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-12">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-13">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-13">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-14">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-14">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-15">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-15">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-16">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-16">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-17">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-17">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-18">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-18">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-19">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-19">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-20">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-20">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-21">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-21">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-22">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-22">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                     </li>
                   </ul>
@@ -344,85 +344,85 @@
               <div class="fr-pt-2w">
                 <div class="fr-tabs" style="--tabs-height: 0px;">
                   <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-                    <li role="presentation"><button id="tabpanel-carte-74" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-74-panel">Carte</button></li>
-                    <li role="presentation"><button id="tabpanel-points-74" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-74-panel">Tableau</button></li>
+                    <li role="presentation"><button id="tabpanel-carte-OxqtxQwW0B3AUIHFR7k32Ycl" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-OxqtxQwW0B3AUIHFR7k32Ycl-panel">Carte</button></li>
+                    <li role="presentation"><button id="tabpanel-points-OxqtxQwW0B3AUIHFR7k32Ycl" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-OxqtxQwW0B3AUIHFR7k32Ycl-panel">Tableau</button></li>
                   </ul>
-                  <div id="tabpanel-carte-74-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-74" tabindex="0">
+                  <div id="tabpanel-carte-OxqtxQwW0B3AUIHFR7k32Ycl-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-OxqtxQwW0B3AUIHFR7k32Ycl" tabindex="0">
                     <!---->
                   </div>
-                  <div id="tabpanel-points-74-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-74" tabindex="0">
+                  <div id="tabpanel-points-OxqtxQwW0B3AUIHFR7k32Ycl-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-OxqtxQwW0B3AUIHFR7k32Ycl" tabindex="0">
                     <div style="display: flex; flex-direction: column;">
-                      <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_878">Système géographique</label>
-                        <div id="typeahead_geosysteme_878_wrapper" class="_typeahead_8eddf1">
-                          <div class="flex"><input id="typeahead_geosysteme_878" type="text" title="" name="typeahead_geosysteme_878" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_878-control" aria-activedescendant="typeahead_geosysteme_878-control" aria-expanded="false" aria-autocomplete="list" value="NTF (Paris) / Lambert zone I - (27571)"></div>
-                          <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_878-control" role="listbox">
-                            <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_878-control-0">
+                      <div class="fr-select-group"><label class="fr-label" for="27571">Système géographique</label>
+                        <div id="27571_wrapper" class="_typeahead_8eddf1">
+                          <div class="flex"><input id="27571" type="text" title="" name="27571" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="27571-control" aria-activedescendant="27571-control" aria-expanded="false" aria-autocomplete="list" value="NTF (Paris) / Lambert zone I - (27571)"></div>
+                          <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="27571-control" role="listbox">
+                            <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="27571-control-0">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-1">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-1">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-2">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-2">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-3">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-3">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-4">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-4">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-5">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-5">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-6">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-6">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">WGS84 - (4326)</span><span class="fr-text">Monde</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-7">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-7">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-8">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-8">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-9">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-9">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-10">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-10">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-11">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-11">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-12">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-12">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-13">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-13">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-14">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-14">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-15">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-15">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-16">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-16">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-17">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-17">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-18">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-18">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-19">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-19">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-20">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-20">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-21">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-21">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-22">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-22">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                             </li>
                           </ul>
@@ -550,85 +550,85 @@
               <div class="fr-pt-2w">
                 <div class="fr-tabs" style="--tabs-height: 0px;">
                   <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-                    <li role="presentation"><button id="tabpanel-carte-967" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-967-panel">Carte</button></li>
-                    <li role="presentation"><button id="tabpanel-points-967" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-967-panel">Tableau</button></li>
+                    <li role="presentation"><button id="tabpanel-carte-XkNmBmjc6YYY6OEncdCAldnU" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-XkNmBmjc6YYY6OEncdCAldnU-panel">Carte</button></li>
+                    <li role="presentation"><button id="tabpanel-points-XkNmBmjc6YYY6OEncdCAldnU" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-XkNmBmjc6YYY6OEncdCAldnU-panel">Tableau</button></li>
                   </ul>
-                  <div id="tabpanel-carte-967-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-967" tabindex="0">
+                  <div id="tabpanel-carte-XkNmBmjc6YYY6OEncdCAldnU-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-XkNmBmjc6YYY6OEncdCAldnU" tabindex="0">
                     <!---->
                   </div>
-                  <div id="tabpanel-points-967-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-967" tabindex="0">
+                  <div id="tabpanel-points-XkNmBmjc6YYY6OEncdCAldnU-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-XkNmBmjc6YYY6OEncdCAldnU" tabindex="0">
                     <div style="display: flex; flex-direction: column;">
-                      <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_25">Système géographique</label>
-                        <div id="typeahead_geosysteme_25_wrapper" class="_typeahead_8eddf1">
-                          <div class="flex"><input id="typeahead_geosysteme_25" type="text" title="" name="typeahead_geosysteme_25" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_25-control" aria-activedescendant="typeahead_geosysteme_25-control" aria-expanded="false" aria-autocomplete="list" value="NTF (Paris) / Lambert zone I - (27571)"></div>
-                          <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_25-control" role="listbox">
-                            <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_25-control-0">
+                      <div class="fr-select-group"><label class="fr-label" for="27571">Système géographique</label>
+                        <div id="27571_wrapper" class="_typeahead_8eddf1">
+                          <div class="flex"><input id="27571" type="text" title="" name="27571" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="27571-control" aria-activedescendant="27571-control" aria-expanded="false" aria-autocomplete="list" value="NTF (Paris) / Lambert zone I - (27571)"></div>
+                          <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="27571-control" role="listbox">
+                            <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="27571-control-0">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-1">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-1">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-2">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-2">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-3">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-3">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-4">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-4">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-5">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-5">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-6">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-6">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">WGS84 - (4326)</span><span class="fr-text">Monde</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-7">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-7">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-8">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-8">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-9">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-9">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-10">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-10">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-11">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-11">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-12">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-12">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-13">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-13">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-14">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-14">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-15">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-15">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-16">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-16">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-17">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-17">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-18">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-18">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-19">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-19">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-20">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-20">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-21">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-21">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-22">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-22">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                             </li>
                           </ul>
diff --git a/packages/ui/src/components/titre.stories_snapshots_ChantepieOctroiAsEntreprise.html b/packages/ui/src/components/titre.stories_snapshots_ChantepieOctroiAsEntreprise.html
index 2cbdeeac105c0745c8630f0854f7fa145e910135..9d179060bdecd9b029369a1f9ac0a39da5c9bf01 100644
--- a/packages/ui/src/components/titre.stories_snapshots_ChantepieOctroiAsEntreprise.html
+++ b/packages/ui/src/components/titre.stories_snapshots_ChantepieOctroiAsEntreprise.html
@@ -121,85 +121,85 @@
       <div class="fr-pt-3w">
         <div class="fr-tabs" style="--tabs-height: 0px;">
           <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-            <li role="presentation"><button id="tabpanel-carte-271" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-271-panel">Carte</button></li>
-            <li role="presentation"><button id="tabpanel-points-271" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-271-panel">Tableau</button></li>
+            <li role="presentation"><button id="tabpanel-carte-m-cx-chantepie-1988-oct01" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-m-cx-chantepie-1988-oct01-panel">Carte</button></li>
+            <li role="presentation"><button id="tabpanel-points-m-cx-chantepie-1988-oct01" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-m-cx-chantepie-1988-oct01-panel">Tableau</button></li>
           </ul>
-          <div id="tabpanel-carte-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-271" tabindex="0">
+          <div id="tabpanel-carte-m-cx-chantepie-1988-oct01-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-m-cx-chantepie-1988-oct01" tabindex="0">
             <!---->
           </div>
-          <div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
+          <div id="tabpanel-points-m-cx-chantepie-1988-oct01-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-m-cx-chantepie-1988-oct01" tabindex="0">
             <div style="display: flex; flex-direction: column;">
-              <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_670">Système géographique</label>
-                <div id="typeahead_geosysteme_670_wrapper" class="_typeahead_8eddf1">
-                  <div class="flex"><input id="typeahead_geosysteme_670" type="text" title="" name="typeahead_geosysteme_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_670-control" aria-activedescendant="typeahead_geosysteme_670-control" aria-expanded="false" aria-autocomplete="list" value="NTF (Paris) / Lambert zone I - (27571)"></div>
-                  <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_670-control" role="listbox">
-                    <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_670-control-0">
+              <div class="fr-select-group"><label class="fr-label" for="27571">Système géographique</label>
+                <div id="27571_wrapper" class="_typeahead_8eddf1">
+                  <div class="flex"><input id="27571" type="text" title="" name="27571" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="27571-control" aria-activedescendant="27571-control" aria-expanded="false" aria-autocomplete="list" value="NTF (Paris) / Lambert zone I - (27571)"></div>
+                  <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="27571-control" role="listbox">
+                    <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="27571-control-0">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-1">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-1">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-2">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-2">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-3">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-3">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-4">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-4">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-5">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-5">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-6">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-6">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">WGS84 - (4326)</span><span class="fr-text">Monde</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-7">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-7">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-8">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-8">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-9">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-9">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-10">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-10">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-11">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-11">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-12">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-12">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-13">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-13">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-14">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-14">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-15">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-15">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-16">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-16">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-17">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-17">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-18">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-18">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-19">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-19">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-20">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-20">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-21">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-21">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-22">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-22">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                     </li>
                   </ul>
@@ -343,85 +343,85 @@
               <div class="fr-pt-2w">
                 <div class="fr-tabs" style="--tabs-height: 0px;">
                   <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-                    <li role="presentation"><button id="tabpanel-carte-74" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-74-panel">Carte</button></li>
-                    <li role="presentation"><button id="tabpanel-points-74" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-74-panel">Tableau</button></li>
+                    <li role="presentation"><button id="tabpanel-carte-OxqtxQwW0B3AUIHFR7k32Ycl" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-OxqtxQwW0B3AUIHFR7k32Ycl-panel">Carte</button></li>
+                    <li role="presentation"><button id="tabpanel-points-OxqtxQwW0B3AUIHFR7k32Ycl" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-OxqtxQwW0B3AUIHFR7k32Ycl-panel">Tableau</button></li>
                   </ul>
-                  <div id="tabpanel-carte-74-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-74" tabindex="0">
+                  <div id="tabpanel-carte-OxqtxQwW0B3AUIHFR7k32Ycl-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-OxqtxQwW0B3AUIHFR7k32Ycl" tabindex="0">
                     <!---->
                   </div>
-                  <div id="tabpanel-points-74-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-74" tabindex="0">
+                  <div id="tabpanel-points-OxqtxQwW0B3AUIHFR7k32Ycl-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-OxqtxQwW0B3AUIHFR7k32Ycl" tabindex="0">
                     <div style="display: flex; flex-direction: column;">
-                      <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_878">Système géographique</label>
-                        <div id="typeahead_geosysteme_878_wrapper" class="_typeahead_8eddf1">
-                          <div class="flex"><input id="typeahead_geosysteme_878" type="text" title="" name="typeahead_geosysteme_878" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_878-control" aria-activedescendant="typeahead_geosysteme_878-control" aria-expanded="false" aria-autocomplete="list" value="NTF (Paris) / Lambert zone I - (27571)"></div>
-                          <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_878-control" role="listbox">
-                            <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_878-control-0">
+                      <div class="fr-select-group"><label class="fr-label" for="27571">Système géographique</label>
+                        <div id="27571_wrapper" class="_typeahead_8eddf1">
+                          <div class="flex"><input id="27571" type="text" title="" name="27571" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="27571-control" aria-activedescendant="27571-control" aria-expanded="false" aria-autocomplete="list" value="NTF (Paris) / Lambert zone I - (27571)"></div>
+                          <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="27571-control" role="listbox">
+                            <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="27571-control-0">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-1">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-1">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-2">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-2">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-3">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-3">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-4">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-4">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-5">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-5">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-6">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-6">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">WGS84 - (4326)</span><span class="fr-text">Monde</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-7">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-7">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-8">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-8">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-9">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-9">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-10">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-10">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-11">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-11">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-12">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-12">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-13">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-13">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-14">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-14">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-15">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-15">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-16">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-16">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-17">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-17">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-18">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-18">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-19">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-19">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-20">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-20">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-21">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-21">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-22">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-22">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                             </li>
                           </ul>
@@ -547,85 +547,85 @@
               <div class="fr-pt-2w">
                 <div class="fr-tabs" style="--tabs-height: 0px;">
                   <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-                    <li role="presentation"><button id="tabpanel-carte-967" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-967-panel">Carte</button></li>
-                    <li role="presentation"><button id="tabpanel-points-967" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-967-panel">Tableau</button></li>
+                    <li role="presentation"><button id="tabpanel-carte-XkNmBmjc6YYY6OEncdCAldnU" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-XkNmBmjc6YYY6OEncdCAldnU-panel">Carte</button></li>
+                    <li role="presentation"><button id="tabpanel-points-XkNmBmjc6YYY6OEncdCAldnU" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-XkNmBmjc6YYY6OEncdCAldnU-panel">Tableau</button></li>
                   </ul>
-                  <div id="tabpanel-carte-967-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-967" tabindex="0">
+                  <div id="tabpanel-carte-XkNmBmjc6YYY6OEncdCAldnU-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-XkNmBmjc6YYY6OEncdCAldnU" tabindex="0">
                     <!---->
                   </div>
-                  <div id="tabpanel-points-967-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-967" tabindex="0">
+                  <div id="tabpanel-points-XkNmBmjc6YYY6OEncdCAldnU-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-XkNmBmjc6YYY6OEncdCAldnU" tabindex="0">
                     <div style="display: flex; flex-direction: column;">
-                      <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_25">Système géographique</label>
-                        <div id="typeahead_geosysteme_25_wrapper" class="_typeahead_8eddf1">
-                          <div class="flex"><input id="typeahead_geosysteme_25" type="text" title="" name="typeahead_geosysteme_25" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_25-control" aria-activedescendant="typeahead_geosysteme_25-control" aria-expanded="false" aria-autocomplete="list" value="NTF (Paris) / Lambert zone I - (27571)"></div>
-                          <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_25-control" role="listbox">
-                            <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_25-control-0">
+                      <div class="fr-select-group"><label class="fr-label" for="27571">Système géographique</label>
+                        <div id="27571_wrapper" class="_typeahead_8eddf1">
+                          <div class="flex"><input id="27571" type="text" title="" name="27571" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="27571-control" aria-activedescendant="27571-control" aria-expanded="false" aria-autocomplete="list" value="NTF (Paris) / Lambert zone I - (27571)"></div>
+                          <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="27571-control" role="listbox">
+                            <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="27571-control-0">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-1">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-1">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-2">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-2">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-3">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-3">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-4">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-4">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-5">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-5">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-6">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-6">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">WGS84 - (4326)</span><span class="fr-text">Monde</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-7">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-7">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-8">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-8">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-9">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-9">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-10">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-10">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-11">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-11">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-12">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-12">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-13">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-13">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-14">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-14">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-15">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-15">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-16">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-16">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-17">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-17">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-18">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-18">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-19">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-19">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-20">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-20">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-21">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-21">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_25-control-22">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="27571-control-22">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                             </li>
                           </ul>
diff --git a/packages/ui/src/components/titre.stories_snapshots_CriqueAdolpheOctroi.html b/packages/ui/src/components/titre.stories_snapshots_CriqueAdolpheOctroi.html
index 0567823e50b8df925fdc483f5d306dbdc059e31c..95925172dbb2847a3613f6c6fd9b9c5927442222 100644
--- a/packages/ui/src/components/titre.stories_snapshots_CriqueAdolpheOctroi.html
+++ b/packages/ui/src/components/titre.stories_snapshots_CriqueAdolpheOctroi.html
@@ -127,85 +127,85 @@
       <div class="fr-pt-3w">
         <div class="fr-tabs" style="--tabs-height: 0px;">
           <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-            <li role="presentation"><button id="tabpanel-carte-271" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-271-panel">Carte</button></li>
-            <li role="presentation"><button id="tabpanel-points-271" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-271-panel">Tableau</button></li>
+            <li role="presentation"><button id="tabpanel-carte-m-ar-crique-adolphe-2023-oct01" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-m-ar-crique-adolphe-2023-oct01-panel">Carte</button></li>
+            <li role="presentation"><button id="tabpanel-points-m-ar-crique-adolphe-2023-oct01" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-m-ar-crique-adolphe-2023-oct01-panel">Tableau</button></li>
           </ul>
-          <div id="tabpanel-carte-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-271" tabindex="0">
+          <div id="tabpanel-carte-m-ar-crique-adolphe-2023-oct01-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-m-ar-crique-adolphe-2023-oct01" tabindex="0">
             <!---->
           </div>
-          <div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
+          <div id="tabpanel-points-m-ar-crique-adolphe-2023-oct01-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-m-ar-crique-adolphe-2023-oct01" tabindex="0">
             <div style="display: flex; flex-direction: column;">
-              <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_670">Système géographique</label>
-                <div id="typeahead_geosysteme_670_wrapper" class="_typeahead_8eddf1">
-                  <div class="flex"><input id="typeahead_geosysteme_670" type="text" title="" name="typeahead_geosysteme_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_670-control" aria-activedescendant="typeahead_geosysteme_670-control" aria-expanded="false" aria-autocomplete="list" value="RGFG95 / UTM zone 22N - (2972)"></div>
-                  <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_670-control" role="listbox">
-                    <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_670-control-0">
+              <div class="fr-select-group"><label class="fr-label" for="2972">Système géographique</label>
+                <div id="2972_wrapper" class="_typeahead_8eddf1">
+                  <div class="flex"><input id="2972" type="text" title="" name="2972" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="2972-control" aria-activedescendant="2972-control" aria-expanded="false" aria-autocomplete="list" value="RGFG95 / UTM zone 22N - (2972)"></div>
+                  <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="2972-control" role="listbox">
+                    <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="2972-control-0">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-1">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-1">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-2">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-2">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-3">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-3">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-4">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-4">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-5">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-5">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">WGS84 - (4326)</span><span class="fr-text">Monde</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-6">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-6">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-7">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-7">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-8">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-8">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-9">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-9">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-10">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-10">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-11">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-11">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-12">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-12">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-13">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-13">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-14">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-14">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-15">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-15">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-16">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-16">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-17">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-17">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-18">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-18">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-19">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-19">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-20">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-20">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-21">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-21">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-22">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-22">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                     </li>
                   </ul>
@@ -573,85 +573,85 @@
               <div class="fr-pt-2w">
                 <div class="fr-tabs" style="--tabs-height: 0px;">
                   <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-                    <li role="presentation"><button id="tabpanel-carte-74" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-74-panel">Carte</button></li>
-                    <li role="presentation"><button id="tabpanel-points-74" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-74-panel">Tableau</button></li>
+                    <li role="presentation"><button id="tabpanel-carte-pwqOEAsAmaWi0o24QiVeVZ40" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-pwqOEAsAmaWi0o24QiVeVZ40-panel">Carte</button></li>
+                    <li role="presentation"><button id="tabpanel-points-pwqOEAsAmaWi0o24QiVeVZ40" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-pwqOEAsAmaWi0o24QiVeVZ40-panel">Tableau</button></li>
                   </ul>
-                  <div id="tabpanel-carte-74-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-74" tabindex="0">
+                  <div id="tabpanel-carte-pwqOEAsAmaWi0o24QiVeVZ40-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-pwqOEAsAmaWi0o24QiVeVZ40" tabindex="0">
                     <!---->
                   </div>
-                  <div id="tabpanel-points-74-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-74" tabindex="0">
+                  <div id="tabpanel-points-pwqOEAsAmaWi0o24QiVeVZ40-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-pwqOEAsAmaWi0o24QiVeVZ40" tabindex="0">
                     <div style="display: flex; flex-direction: column;">
-                      <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_878">Système géographique</label>
-                        <div id="typeahead_geosysteme_878_wrapper" class="_typeahead_8eddf1">
-                          <div class="flex"><input id="typeahead_geosysteme_878" type="text" title="" name="typeahead_geosysteme_878" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_878-control" aria-activedescendant="typeahead_geosysteme_878-control" aria-expanded="false" aria-autocomplete="list" value="RGFG95 / UTM zone 22N - (2972)"></div>
-                          <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_878-control" role="listbox">
-                            <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_878-control-0">
+                      <div class="fr-select-group"><label class="fr-label" for="2972">Système géographique</label>
+                        <div id="2972_wrapper" class="_typeahead_8eddf1">
+                          <div class="flex"><input id="2972" type="text" title="" name="2972" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="2972-control" aria-activedescendant="2972-control" aria-expanded="false" aria-autocomplete="list" value="RGFG95 / UTM zone 22N - (2972)"></div>
+                          <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="2972-control" role="listbox">
+                            <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="2972-control-0">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-1">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-1">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-2">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-2">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-3">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-3">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-4">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-4">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-5">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-5">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">WGS84 - (4326)</span><span class="fr-text">Monde</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-6">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-6">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-7">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-7">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-8">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-8">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-9">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-9">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-10">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-10">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-11">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-11">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-12">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-12">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-13">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-13">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-14">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-14">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-15">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-15">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-16">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-16">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-17">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-17">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-18">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-18">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-19">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-19">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-20">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-20">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-21">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-21">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-22">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="2972-control-22">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                             </li>
                           </ul>
diff --git a/packages/ui/src/components/titre.stories_snapshots_Full.html b/packages/ui/src/components/titre.stories_snapshots_Full.html
index 60d4c6b8635a9768fec7b6b0ccf3343fdbbf5a0f..d3be05d16d24725bc23e0519884ac501be1002c5 100644
--- a/packages/ui/src/components/titre.stories_snapshots_Full.html
+++ b/packages/ui/src/components/titre.stories_snapshots_Full.html
@@ -85,85 +85,85 @@
       <div class="fr-pt-3w">
         <div class="fr-tabs" style="--tabs-height: 0px;">
           <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-            <li role="presentation"><button id="tabpanel-carte-271" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-271-panel">Carte</button></li>
-            <li role="presentation"><button id="tabpanel-points-271" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-271-panel">Tableau</button></li>
+            <li role="presentation"><button id="tabpanel-carte-slug-demarche-1" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-slug-demarche-1-panel">Carte</button></li>
+            <li role="presentation"><button id="tabpanel-points-slug-demarche-1" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-slug-demarche-1-panel">Tableau</button></li>
           </ul>
-          <div id="tabpanel-carte-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-271" tabindex="0">
+          <div id="tabpanel-carte-slug-demarche-1-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-slug-demarche-1" tabindex="0">
             <!---->
           </div>
-          <div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
+          <div id="tabpanel-points-slug-demarche-1-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-slug-demarche-1" tabindex="0">
             <div style="display: flex; flex-direction: column;">
-              <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_670">Système géographique</label>
-                <div id="typeahead_geosysteme_670_wrapper" class="_typeahead_8eddf1">
-                  <div class="flex"><input id="typeahead_geosysteme_670" type="text" title="" name="typeahead_geosysteme_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_670-control" aria-activedescendant="typeahead_geosysteme_670-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
-                  <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_670-control" role="listbox">
-                    <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_670-control-0">
+              <div class="fr-select-group"><label class="fr-label" for="4326">Système géographique</label>
+                <div id="4326_wrapper" class="_typeahead_8eddf1">
+                  <div class="flex"><input id="4326" type="text" title="" name="4326" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="4326-control" aria-activedescendant="4326-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+                  <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="4326-control" role="listbox">
+                    <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="4326-control-0">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-1">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-1">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-2">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-2">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-3">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-3">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-4">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-4">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-5">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-5">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-6">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-6">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-7">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-7">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-8">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-8">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-9">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-9">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-10">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-10">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-11">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-11">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-12">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-12">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-13">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-13">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-14">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-14">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-15">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-15">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-16">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-16">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-17">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-17">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-18">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-18">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-19">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-19">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-20">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-20">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-21">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-21">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-22">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-22">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                     </li>
                   </ul>
@@ -288,85 +288,85 @@
               <div class="fr-pt-2w">
                 <div class="fr-tabs" style="--tabs-height: 0px;">
                   <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-                    <li role="presentation"><button id="tabpanel-carte-74" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-74-panel">Carte</button></li>
-                    <li role="presentation"><button id="tabpanel-points-74" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-74-panel">Tableau</button></li>
+                    <li role="presentation"><button id="tabpanel-carte-etapeId" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-etapeId-panel">Carte</button></li>
+                    <li role="presentation"><button id="tabpanel-points-etapeId" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-etapeId-panel">Tableau</button></li>
                   </ul>
-                  <div id="tabpanel-carte-74-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-74" tabindex="0">
+                  <div id="tabpanel-carte-etapeId-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-etapeId" tabindex="0">
                     <!---->
                   </div>
-                  <div id="tabpanel-points-74-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-74" tabindex="0">
+                  <div id="tabpanel-points-etapeId-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-etapeId" tabindex="0">
                     <div style="display: flex; flex-direction: column;">
-                      <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_878">Système géographique</label>
-                        <div id="typeahead_geosysteme_878_wrapper" class="_typeahead_8eddf1">
-                          <div class="flex"><input id="typeahead_geosysteme_878" type="text" title="" name="typeahead_geosysteme_878" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_878-control" aria-activedescendant="typeahead_geosysteme_878-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
-                          <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_878-control" role="listbox">
-                            <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_878-control-0">
+                      <div class="fr-select-group"><label class="fr-label" for="4326">Système géographique</label>
+                        <div id="4326_wrapper" class="_typeahead_8eddf1">
+                          <div class="flex"><input id="4326" type="text" title="" name="4326" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="4326-control" aria-activedescendant="4326-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+                          <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="4326-control" role="listbox">
+                            <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="4326-control-0">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-1">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-1">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-2">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-2">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-3">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-3">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-4">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-4">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-5">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-5">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-6">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-6">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-7">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-7">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-8">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-8">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-9">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-9">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-10">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-10">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-11">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-11">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-12">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-12">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-13">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-13">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-14">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-14">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-15">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-15">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-16">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-16">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-17">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-17">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-18">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-18">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-19">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-19">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-20">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-20">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-21">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-21">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-22">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-22">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                             </li>
                           </ul>
diff --git a/packages/ui/src/components/titre.stories_snapshots_Lenoncourt.html b/packages/ui/src/components/titre.stories_snapshots_Lenoncourt.html
index 95cb2a4374c1caac3d2f50037a4ad0fe9e5065cc..547b48a9e2394ce90e2d5e3d49776407e9ed38b4 100644
--- a/packages/ui/src/components/titre.stories_snapshots_Lenoncourt.html
+++ b/packages/ui/src/components/titre.stories_snapshots_Lenoncourt.html
@@ -141,85 +141,85 @@
       <div class="fr-pt-3w">
         <div class="fr-tabs" style="--tabs-height: 0px;">
           <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-            <li role="presentation"><button id="tabpanel-carte-271" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-271-panel">Carte</button></li>
-            <li role="presentation"><button id="tabpanel-points-271" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-271-panel">Tableau</button></li>
+            <li role="presentation"><button id="tabpanel-carte-m-cx-lenoncourt-1968-exp02" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-m-cx-lenoncourt-1968-exp02-panel">Carte</button></li>
+            <li role="presentation"><button id="tabpanel-points-m-cx-lenoncourt-1968-exp02" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-m-cx-lenoncourt-1968-exp02-panel">Tableau</button></li>
           </ul>
-          <div id="tabpanel-carte-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-271" tabindex="0">
+          <div id="tabpanel-carte-m-cx-lenoncourt-1968-exp02-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-m-cx-lenoncourt-1968-exp02" tabindex="0">
             <!---->
           </div>
-          <div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
+          <div id="tabpanel-points-m-cx-lenoncourt-1968-exp02-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-m-cx-lenoncourt-1968-exp02" tabindex="0">
             <div style="display: flex; flex-direction: column;">
-              <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_670">Système géographique</label>
-                <div id="typeahead_geosysteme_670_wrapper" class="_typeahead_8eddf1">
-                  <div class="flex"><input id="typeahead_geosysteme_670" type="text" title="" name="typeahead_geosysteme_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_670-control" aria-activedescendant="typeahead_geosysteme_670-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
-                  <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_670-control" role="listbox">
-                    <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_670-control-0">
+              <div class="fr-select-group"><label class="fr-label" for="4326">Système géographique</label>
+                <div id="4326_wrapper" class="_typeahead_8eddf1">
+                  <div class="flex"><input id="4326" type="text" title="" name="4326" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="4326-control" aria-activedescendant="4326-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+                  <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="4326-control" role="listbox">
+                    <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="4326-control-0">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-1">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-1">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-2">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-2">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-3">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-3">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-4">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-4">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-5">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-5">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-6">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-6">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-7">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-7">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-8">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-8">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-9">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-9">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-10">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-10">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-11">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-11">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-12">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-12">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-13">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-13">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-14">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-14">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-15">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-15">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-16">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-16">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-17">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-17">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-18">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-18">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-19">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-19">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-20">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-20">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-21">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-21">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-22">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-22">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                     </li>
                   </ul>
@@ -481,85 +481,85 @@
               <div class="fr-pt-2w">
                 <div class="fr-tabs" style="--tabs-height: 0px;">
                   <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-                    <li role="presentation"><button id="tabpanel-carte-74" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-74-panel">Carte</button></li>
-                    <li role="presentation"><button id="tabpanel-points-74" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-74-panel">Tableau</button></li>
+                    <li role="presentation"><button id="tabpanel-carte-c15f4ceaa62a6298a2f8e117" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-c15f4ceaa62a6298a2f8e117-panel">Carte</button></li>
+                    <li role="presentation"><button id="tabpanel-points-c15f4ceaa62a6298a2f8e117" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-c15f4ceaa62a6298a2f8e117-panel">Tableau</button></li>
                   </ul>
-                  <div id="tabpanel-carte-74-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-74" tabindex="0">
+                  <div id="tabpanel-carte-c15f4ceaa62a6298a2f8e117-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-c15f4ceaa62a6298a2f8e117" tabindex="0">
                     <!---->
                   </div>
-                  <div id="tabpanel-points-74-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-74" tabindex="0">
+                  <div id="tabpanel-points-c15f4ceaa62a6298a2f8e117-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-c15f4ceaa62a6298a2f8e117" tabindex="0">
                     <div style="display: flex; flex-direction: column;">
-                      <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_878">Système géographique</label>
-                        <div id="typeahead_geosysteme_878_wrapper" class="_typeahead_8eddf1">
-                          <div class="flex"><input id="typeahead_geosysteme_878" type="text" title="" name="typeahead_geosysteme_878" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_878-control" aria-activedescendant="typeahead_geosysteme_878-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
-                          <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_878-control" role="listbox">
-                            <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_878-control-0">
+                      <div class="fr-select-group"><label class="fr-label" for="4326">Système géographique</label>
+                        <div id="4326_wrapper" class="_typeahead_8eddf1">
+                          <div class="flex"><input id="4326" type="text" title="" name="4326" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="4326-control" aria-activedescendant="4326-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+                          <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="4326-control" role="listbox">
+                            <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="4326-control-0">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-1">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-1">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-2">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-2">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-3">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-3">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-4">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-4">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-5">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-5">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-6">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-6">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-7">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-7">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-8">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-8">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-9">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-9">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-10">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-10">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-11">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-11">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-12">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-12">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-13">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-13">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-14">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-14">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-15">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-15">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-16">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-16">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-17">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-17">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-18">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-18">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-19">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-19">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-20">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-20">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-21">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-21">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-22">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-22">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                             </li>
                           </ul>
diff --git a/packages/ui/src/components/titre.stories_snapshots_TitreAvecUnOctroiEnConstructionEtUnTravaux.html b/packages/ui/src/components/titre.stories_snapshots_TitreAvecUnOctroiEnConstructionEtUnTravaux.html
index 60d4c6b8635a9768fec7b6b0ccf3343fdbbf5a0f..d3be05d16d24725bc23e0519884ac501be1002c5 100644
--- a/packages/ui/src/components/titre.stories_snapshots_TitreAvecUnOctroiEnConstructionEtUnTravaux.html
+++ b/packages/ui/src/components/titre.stories_snapshots_TitreAvecUnOctroiEnConstructionEtUnTravaux.html
@@ -85,85 +85,85 @@
       <div class="fr-pt-3w">
         <div class="fr-tabs" style="--tabs-height: 0px;">
           <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-            <li role="presentation"><button id="tabpanel-carte-271" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-271-panel">Carte</button></li>
-            <li role="presentation"><button id="tabpanel-points-271" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-271-panel">Tableau</button></li>
+            <li role="presentation"><button id="tabpanel-carte-slug-demarche-1" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-slug-demarche-1-panel">Carte</button></li>
+            <li role="presentation"><button id="tabpanel-points-slug-demarche-1" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-slug-demarche-1-panel">Tableau</button></li>
           </ul>
-          <div id="tabpanel-carte-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-271" tabindex="0">
+          <div id="tabpanel-carte-slug-demarche-1-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-slug-demarche-1" tabindex="0">
             <!---->
           </div>
-          <div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
+          <div id="tabpanel-points-slug-demarche-1-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-slug-demarche-1" tabindex="0">
             <div style="display: flex; flex-direction: column;">
-              <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_670">Système géographique</label>
-                <div id="typeahead_geosysteme_670_wrapper" class="_typeahead_8eddf1">
-                  <div class="flex"><input id="typeahead_geosysteme_670" type="text" title="" name="typeahead_geosysteme_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_670-control" aria-activedescendant="typeahead_geosysteme_670-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
-                  <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_670-control" role="listbox">
-                    <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_670-control-0">
+              <div class="fr-select-group"><label class="fr-label" for="4326">Système géographique</label>
+                <div id="4326_wrapper" class="_typeahead_8eddf1">
+                  <div class="flex"><input id="4326" type="text" title="" name="4326" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="4326-control" aria-activedescendant="4326-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+                  <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="4326-control" role="listbox">
+                    <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="4326-control-0">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-1">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-1">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-2">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-2">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-3">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-3">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-4">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-4">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-5">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-5">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-6">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-6">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-7">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-7">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-8">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-8">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-9">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-9">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-10">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-10">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-11">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-11">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-12">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-12">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-13">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-13">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-14">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-14">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-15">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-15">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-16">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-16">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-17">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-17">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-18">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-18">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-19">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-19">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-20">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-20">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-21">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-21">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-22">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-22">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                     </li>
                   </ul>
@@ -288,85 +288,85 @@
               <div class="fr-pt-2w">
                 <div class="fr-tabs" style="--tabs-height: 0px;">
                   <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-                    <li role="presentation"><button id="tabpanel-carte-74" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-74-panel">Carte</button></li>
-                    <li role="presentation"><button id="tabpanel-points-74" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-74-panel">Tableau</button></li>
+                    <li role="presentation"><button id="tabpanel-carte-etapeId" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-etapeId-panel">Carte</button></li>
+                    <li role="presentation"><button id="tabpanel-points-etapeId" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-etapeId-panel">Tableau</button></li>
                   </ul>
-                  <div id="tabpanel-carte-74-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-74" tabindex="0">
+                  <div id="tabpanel-carte-etapeId-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-etapeId" tabindex="0">
                     <!---->
                   </div>
-                  <div id="tabpanel-points-74-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-74" tabindex="0">
+                  <div id="tabpanel-points-etapeId-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-etapeId" tabindex="0">
                     <div style="display: flex; flex-direction: column;">
-                      <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_878">Système géographique</label>
-                        <div id="typeahead_geosysteme_878_wrapper" class="_typeahead_8eddf1">
-                          <div class="flex"><input id="typeahead_geosysteme_878" type="text" title="" name="typeahead_geosysteme_878" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_878-control" aria-activedescendant="typeahead_geosysteme_878-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
-                          <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_878-control" role="listbox">
-                            <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_878-control-0">
+                      <div class="fr-select-group"><label class="fr-label" for="4326">Système géographique</label>
+                        <div id="4326_wrapper" class="_typeahead_8eddf1">
+                          <div class="flex"><input id="4326" type="text" title="" name="4326" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="4326-control" aria-activedescendant="4326-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+                          <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="4326-control" role="listbox">
+                            <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="4326-control-0">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-1">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-1">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-2">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-2">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-3">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-3">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-4">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-4">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-5">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-5">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-6">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-6">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-7">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-7">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-8">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-8">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-9">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-9">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-10">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-10">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-11">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-11">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-12">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-12">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-13">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-13">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-14">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-14">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-15">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-15">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-16">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-16">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-17">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-17">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-18">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-18">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-19">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-19">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-20">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-20">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-21">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-21">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-22">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-22">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                             </li>
                           </ul>
diff --git a/packages/ui/src/components/titre.stories_snapshots_TitreAvecUneSeuleDemarcheEnConstruction.html b/packages/ui/src/components/titre.stories_snapshots_TitreAvecUneSeuleDemarcheEnConstruction.html
index f5ad9e463127e58fc58fd1810585d91d86b8b9db..7b68214d09ba9f1885a2dc579be165362639b0f6 100644
--- a/packages/ui/src/components/titre.stories_snapshots_TitreAvecUneSeuleDemarcheEnConstruction.html
+++ b/packages/ui/src/components/titre.stories_snapshots_TitreAvecUneSeuleDemarcheEnConstruction.html
@@ -86,85 +86,85 @@
       <div class="fr-pt-3w">
         <div class="fr-tabs" style="--tabs-height: 0px;">
           <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-            <li role="presentation"><button id="tabpanel-carte-271" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-271-panel">Carte</button></li>
-            <li role="presentation"><button id="tabpanel-points-271" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-271-panel">Tableau</button></li>
+            <li role="presentation"><button id="tabpanel-carte-slug-demarche-1" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-slug-demarche-1-panel">Carte</button></li>
+            <li role="presentation"><button id="tabpanel-points-slug-demarche-1" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-slug-demarche-1-panel">Tableau</button></li>
           </ul>
-          <div id="tabpanel-carte-271-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-271" tabindex="0">
+          <div id="tabpanel-carte-slug-demarche-1-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-slug-demarche-1" tabindex="0">
             <!---->
           </div>
-          <div id="tabpanel-points-271-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-271" tabindex="0">
+          <div id="tabpanel-points-slug-demarche-1-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-slug-demarche-1" tabindex="0">
             <div style="display: flex; flex-direction: column;">
-              <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_670">Système géographique</label>
-                <div id="typeahead_geosysteme_670_wrapper" class="_typeahead_8eddf1">
-                  <div class="flex"><input id="typeahead_geosysteme_670" type="text" title="" name="typeahead_geosysteme_670" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_670-control" aria-activedescendant="typeahead_geosysteme_670-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
-                  <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_670-control" role="listbox">
-                    <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_670-control-0">
+              <div class="fr-select-group"><label class="fr-label" for="4326">Système géographique</label>
+                <div id="4326_wrapper" class="_typeahead_8eddf1">
+                  <div class="flex"><input id="4326" type="text" title="" name="4326" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="4326-control" aria-activedescendant="4326-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+                  <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="4326-control" role="listbox">
+                    <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="4326-control-0">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-1">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-1">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-2">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-2">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-3">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-3">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-4">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-4">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-5">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-5">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-6">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-6">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-7">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-7">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-8">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-8">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-9">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-9">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-10">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-10">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-11">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-11">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-12">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-12">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-13">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-13">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-14">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-14">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-15">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-15">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-16">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-16">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-17">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-17">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-18">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-18">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-19">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-19">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-20">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-20">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-21">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-21">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                     </li>
-                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_670-control-22">
+                    <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-22">
                       <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                     </li>
                   </ul>
@@ -289,85 +289,85 @@
               <div class="fr-pt-2w">
                 <div class="fr-tabs" style="--tabs-height: 0px;">
                   <ul class="fr-tabs__list" role="tablist" aria-label="Affichage des titres en vue carte ou tableau">
-                    <li role="presentation"><button id="tabpanel-carte-74" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-74-panel">Carte</button></li>
-                    <li role="presentation"><button id="tabpanel-points-74" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-74-panel">Tableau</button></li>
+                    <li role="presentation"><button id="tabpanel-carte-etapeId" class="fr-tabs__tab fr-icon-earth-fill fr-tabs__tab--icon-left" tabindex="-1" role="tab" aria-label="Carte" aria-selected="false" aria-controls="tabpanel-carte-etapeId-panel">Carte</button></li>
+                    <li role="presentation"><button id="tabpanel-points-etapeId" class="fr-tabs__tab fr-icon-list-unordered fr-tabs__tab--icon-left" tabindex="0" role="tab" aria-label="Tableau" aria-selected="true" aria-controls="tabpanel-points-etapeId-panel">Tableau</button></li>
                   </ul>
-                  <div id="tabpanel-carte-74-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-74" tabindex="0">
+                  <div id="tabpanel-carte-etapeId-panel" class="fr-tabs__panel fr-tabs__panel--direction-start" role="tabpanel" aria-labelledby="tabpanel-carte-etapeId" tabindex="0">
                     <!---->
                   </div>
-                  <div id="tabpanel-points-74-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-74" tabindex="0">
+                  <div id="tabpanel-points-etapeId-panel" class="fr-tabs__panel fr-tabs__panel--selected" role="tabpanel" aria-labelledby="tabpanel-points-etapeId" tabindex="0">
                     <div style="display: flex; flex-direction: column;">
-                      <div class="fr-select-group"><label class="fr-label" for="typeahead_geosysteme_878">Système géographique</label>
-                        <div id="typeahead_geosysteme_878_wrapper" class="_typeahead_8eddf1">
-                          <div class="flex"><input id="typeahead_geosysteme_878" type="text" title="" name="typeahead_geosysteme_878" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="typeahead_geosysteme_878-control" aria-activedescendant="typeahead_geosysteme_878-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
-                          <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="typeahead_geosysteme_878-control" role="listbox">
-                            <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="typeahead_geosysteme_878-control-0">
+                      <div class="fr-select-group"><label class="fr-label" for="4326">Système géographique</label>
+                        <div id="4326_wrapper" class="_typeahead_8eddf1">
+                          <div class="flex"><input id="4326" type="text" title="" name="4326" disabled="" class="fr-input" placeholder="" autocomplete="off" role="combobox" aria-controls="4326-control" aria-activedescendant="4326-control" aria-expanded="false" aria-autocomplete="list" value="WGS84 - (4326)"></div>
+                          <ul class="_typeahead-list_8eddf1 " tabindex="-1" id="4326-control" role="listbox">
+                            <li class="_typeahead-list-item_8eddf1 _typeahead-list-item-active_8eddf1" aria-selected="false" id="4326-control-0">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Mayotte 2004 / UTM zone 38S - (4471)</span><span class="fr-text">Mayotte - à terre et extraterritorial</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-1">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-1">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">Réunion / UTM zone 40S - (2975)</span><span class="fr-text">Réunion</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-2">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-2">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGAF09 / UTM zone 20N - (5490)</span><span class="fr-text">Antilles françaises à terre et extraterritorial à l'ouest du méridien 60° Ouest - Guadeloupe (incluant Grande Terre, Basse Terre, Marie Galante, Les Saintes, Iles de la Petite Terre, La Desirade, St Barthélemy, partie nord de St Martin) et Martinique.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-3">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-3">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGF93 / Lambert-93 - (2154)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-4">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-4">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">RGFG95 / UTM zone 22N - (2972)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-5">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-5">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="fr-text--bold">St Pierre et Miquelon / UTM zone 21N - (4467)</span><span class="fr-text">St Pierre et Miquelon à terre et extraterritorial</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-6">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-6">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">ED50 - (4230)</span><span class="fr-text">Europe</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-7">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-7">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">Guadeloupe 1948 / UTM zone 20N - (2970)</span><span class="fr-text">Guadeloupe - à terre - Basse-Terre, Grande-Terre, La Desirade, Marie-Galante, Les Saintes.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-8">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-8">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Greenwich) - (4275)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-9">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-9">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) - (4807)</span><span class="fr-text">France - à terre - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-10">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-10">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Nord France - (27561)</span><span class="fr-text">France - continentale au nord de  53,5 grades North (48°09'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-11">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-11">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert Sud france - (27563)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-12">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-12">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone I - (27571)</span><span class="fr-text">France - continentale au nord de 53,5 grades nord (48°09'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-13">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-13">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone II - (27572)</span><span class="fr-text">France - continentale entre 45°27'N et 48°09'N.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-14">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-14">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">NTF (Paris) / Lambert zone III - (27573)</span><span class="fr-text">France - continentale au sud de 50,5 grades nord (45°27'N).</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-15">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-15">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 - (4171)</span><span class="fr-text">France - à terre et extraterritorial - continentale et Corse.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-16">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-16">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGF93 / CC49 - (3949)</span><span class="fr-text">France - continentale entre 48°N et 50°N.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-17">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-17">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 - (4624)</span><span class="fr-text">Guyane Française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-18">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-18">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">RGFG95 / UTM zone 21N - (3313)</span><span class="fr-text">Guyane française - à terre et extraterritorial.</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-19">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-19">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 20N - (32620)</span><span class="fr-text">Hémisphère Nord - entre 66°W et 60°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-20">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-20">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 21N - (32621)</span><span class="fr-text">Hémisphère Nord - entre 60°W et 54°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-21">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-21">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 22N - (32622)</span><span class="fr-text">Hémisphère Nord - entre 54°W et 48°W</span></div>
                             </li>
-                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="typeahead_geosysteme_878-control-22">
+                            <li class="_typeahead-list-item_8eddf1 " aria-selected="false" id="4326-control-22">
                               <div style="display: flex; flex-direction: column;" class="fr-pl-2w"><span class="">WGS84 / UTM zone 30N - (32630)</span><span class="fr-text">Hémisphère Nord - entre 6°W et 0°W</span></div>
                             </li>
                           </ul>
diff --git a/packages/ui/src/components/titre/demarche-edit-popup.stories_snapshots_Create.html b/packages/ui/src/components/titre/demarche-edit-popup.stories_snapshots_Create.html
index b2ce099352d43811ab97aa70087392abfe815e69..4b906d0753e269d5ddabbea799a66d0adcb77695 100644
--- a/packages/ui/src/components/titre/demarche-edit-popup.stories_snapshots_Create.html
+++ b/packages/ui/src/components/titre/demarche-edit-popup.stories_snapshots_Create.html
@@ -10,19 +10,19 @@
               <h1 id="monId-title" class="fr-modal__title"><span class="fr-icon-arrow-right-line fr-icon--lg" aria-hidden="true"></span>Ajout d'une démarche </h1>
               <div class="fr-container">
                 <form>
-                  <div class="fr-select-group"><label class="fr-label" for="select_271">Type de la démarche
+                  <div class="fr-select-group"><label class="fr-label" for="demarche_type">Type de la démarche
                       <!---->
-                    </label><select class="fr-select" id="select_271" aria-label="Type de la démarche" name="select_271">
+                    </label><select class="fr-select" id="demarche_type" aria-label="Type de la démarche" name="demarche_type">
                       <option value="oct">octroi</option>
                       <option value="rep">renonciation partielle</option>
                       <option value="rec">renonciation totale</option>
                       <option value="ret">retrait</option>
                       <option selected="" disabled="" hidden="" value="">Selectionnez une option</option>
                     </select></div>
-                  <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Description (optionnel)
+                  <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="demarche_description">Description (optionnel)
                       <!---->
                       <!---->
-                    </label><input class="fr-input" name="input_670" id="input_670" type="text" value="">
+                    </label><input class="fr-input" name="demarche_description" id="demarche_description" type="text" value="">
                     <!---->
                   </div>
                   <!---->
diff --git a/packages/ui/src/components/titre/demarche-edit-popup.stories_snapshots_DisplayErrorMessage.html b/packages/ui/src/components/titre/demarche-edit-popup.stories_snapshots_DisplayErrorMessage.html
index d9cb4511040f7ebf89ba5bd9c8eb8a18e0b9a1b3..88b737ff5fc565c4c5b5157ad228c46f3acb036a 100644
--- a/packages/ui/src/components/titre/demarche-edit-popup.stories_snapshots_DisplayErrorMessage.html
+++ b/packages/ui/src/components/titre/demarche-edit-popup.stories_snapshots_DisplayErrorMessage.html
@@ -10,9 +10,9 @@
               <h1 id="monId-title" class="fr-modal__title"><span class="fr-icon-arrow-right-line fr-icon--lg" aria-hidden="true"></span>Ajout d'une démarche </h1>
               <div class="fr-container">
                 <form>
-                  <div class="fr-select-group"><label class="fr-label" for="select_271">Type de la démarche
+                  <div class="fr-select-group"><label class="fr-label" for="demarche_type">Type de la démarche
                       <!---->
-                    </label><select class="fr-select" id="select_271" aria-label="Type de la démarche" name="select_271" value="oct">
+                    </label><select class="fr-select" id="demarche_type" aria-label="Type de la démarche" name="demarche_type" value="oct">
                       <option value="amo">amodiation</option>
                       <option value="exp">extension de périmètre</option>
                       <option value="mut">mutation</option>
@@ -24,10 +24,10 @@
                       <option value="ret">retrait</option>
                       <option disabled="" hidden="" value="">Selectionnez une option</option>
                     </select></div>
-                  <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Description (optionnel)
+                  <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="demarche_description">Description (optionnel)
                       <!---->
                       <!---->
-                    </label><input class="fr-input" name="input_670" id="input_670" type="text" value="">
+                    </label><input class="fr-input" name="demarche_description" id="demarche_description" type="text" value="">
                     <!---->
                   </div>
                   <!---->
diff --git a/packages/ui/src/components/titre/demarche-edit-popup.stories_snapshots_Edit.html b/packages/ui/src/components/titre/demarche-edit-popup.stories_snapshots_Edit.html
index 97a1f59e11f79b35c04a4bc6331d59010b20c9a7..cbc9779d560be6072269ad8de2fdff80225b94e2 100644
--- a/packages/ui/src/components/titre/demarche-edit-popup.stories_snapshots_Edit.html
+++ b/packages/ui/src/components/titre/demarche-edit-popup.stories_snapshots_Edit.html
@@ -10,9 +10,9 @@
               <h1 id="monId-title" class="fr-modal__title"><span class="fr-icon-arrow-right-line fr-icon--lg" aria-hidden="true"></span>Modification de la démarche </h1>
               <div class="fr-container">
                 <form>
-                  <div class="fr-select-group fr-select-group--disabled"><label class="fr-label" for="select_271">Type de la démarche
+                  <div class="fr-select-group fr-select-group--disabled"><label class="fr-label" for="demarche_type">Type de la démarche
                       <!---->
-                    </label><select class="fr-select" id="select_271" aria-label="Type de la démarche" disabled="" name="select_271" value="amo">
+                    </label><select class="fr-select" id="demarche_type" aria-label="Type de la démarche" disabled="" name="demarche_type" value="amo">
                       <option selected="" value="amo">amodiation</option>
                       <option value="exp">extension de périmètre</option>
                       <option value="mut">mutation</option>
@@ -24,10 +24,10 @@
                       <option value="ret">retrait</option>
                       <option disabled="" hidden="" value="">Selectionnez une option</option>
                     </select></div>
-                  <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="input_670">Description (optionnel)
+                  <div class="fr-input-group" style="margin-bottom: 0px;"><label class="fr-label" for="demarche_description">Description (optionnel)
                       <!---->
                       <!---->
-                    </label><input class="fr-input" name="input_670" id="input_670" type="text" value="description">
+                    </label><input class="fr-input" name="demarche_description" id="demarche_description" type="text" value="description">
                     <!---->
                   </div>
                   <!---->
diff --git a/packages/ui/src/components/titre/demarche-edit-popup.tsx b/packages/ui/src/components/titre/demarche-edit-popup.tsx
index d205d893fabc1ccdf424d3d7f8040d40d8fe6bcf..d59c55c8806050a20872819eae34a551a55c5192 100644
--- a/packages/ui/src/components/titre/demarche-edit-popup.tsx
+++ b/packages/ui/src/components/titre/demarche-edit-popup.tsx
@@ -53,9 +53,17 @@ export const DemarcheEditPopup = defineComponent<Props>(props => {
   const content = () => (
     <form>
       {isNonEmptyArray(typesLabel.value) ? (
-        <DsfrSelect legend={{ main: 'Type de la démarche' }} required={true} disabled={!!props.demarche.id} items={typesLabel.value} initialValue={typeId.value} valueChanged={selectDemarcheTypeId} />
+        <DsfrSelect
+          id="demarche_type"
+          legend={{ main: 'Type de la démarche' }}
+          required={true}
+          disabled={!!props.demarche.id}
+          items={typesLabel.value}
+          initialValue={typeId.value}
+          valueChanged={selectDemarcheTypeId}
+        />
       ) : null}
-      <DsfrInput required={false} legend={{ main: 'Description' }} type={{ type: 'text' }} valueChanged={descriptionChange} initialValue={description.value} />
+      <DsfrInput id="demarche_description" required={false} legend={{ main: 'Description' }} type={{ type: 'text' }} valueChanged={descriptionChange} initialValue={description.value} />
 
       {error.value !== null ? <CaminoApiAlert class="fr-mt-2w" caminoApiError={error.value} /> : null}
     </form>
diff --git a/packages/ui/src/components/titre/demarche-mise-en-concurrence.stories_snapshots_OctroiTitresFromLoading.html b/packages/ui/src/components/titre/demarche-mise-en-concurrence.stories_snapshots_OctroiTitresFromLoading.html
index a3ef9f153e3d85e7cee9bee07fa7e245eba4da0b..c5f6bb573b32886f6379bf1c5b391015fac5acbe 100644
--- a/packages/ui/src/components/titre/demarche-mise-en-concurrence.stories_snapshots_OctroiTitresFromLoading.html
+++ b/packages/ui/src/components/titre/demarche-mise-en-concurrence.stories_snapshots_OctroiTitresFromLoading.html
@@ -1,4 +1,4 @@
-<div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+<div class="_top-level_3306d0" style="display: flex; justify-content: center;">
   <!---->
   <!---->
   <div class="_spinner_3306d0"></div>
diff --git a/packages/ui/src/components/titre/demarche-mise-en-concurrence.stories_snapshots_PivotAvantMECLoading.html b/packages/ui/src/components/titre/demarche-mise-en-concurrence.stories_snapshots_PivotAvantMECLoading.html
index a3ef9f153e3d85e7cee9bee07fa7e245eba4da0b..c5f6bb573b32886f6379bf1c5b391015fac5acbe 100644
--- a/packages/ui/src/components/titre/demarche-mise-en-concurrence.stories_snapshots_PivotAvantMECLoading.html
+++ b/packages/ui/src/components/titre/demarche-mise-en-concurrence.stories_snapshots_PivotAvantMECLoading.html
@@ -1,4 +1,4 @@
-<div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+<div class="_top-level_3306d0" style="display: flex; justify-content: center;">
   <!---->
   <!---->
   <div class="_spinner_3306d0"></div>
diff --git a/packages/ui/src/components/titre/demarche-mise-en-concurrence.stories_snapshots_PivotPendantMECLoading.html b/packages/ui/src/components/titre/demarche-mise-en-concurrence.stories_snapshots_PivotPendantMECLoading.html
index 171d7dca421dbd333f88e01edad2c75a9b6a94fb..396695e7f6632497aaeeb7662385d1d60b3a464c 100644
--- a/packages/ui/src/components/titre/demarche-mise-en-concurrence.stories_snapshots_PivotPendantMECLoading.html
+++ b/packages/ui/src/components/titre/demarche-mise-en-concurrence.stories_snapshots_PivotPendantMECLoading.html
@@ -1,6 +1,6 @@
 <div class="fr-alert fr-alert--warning fr-mt-2w">
   <p class="fr-alert__title fr-h4">Mise en concurrence en cours</p>
-  <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+  <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
     <!---->
     <!---->
     <div class="_spinner_3306d0"></div>
diff --git a/packages/ui/src/components/titre/resultat-mise-en-concurrence.stories_snapshots_Default.html b/packages/ui/src/components/titre/resultat-mise-en-concurrence.stories_snapshots_Default.html
index c648ffde28619a0c8461b6c843d6adeea905313d..113ce3a7e266f8ba13ba0109d4971a2e9534daa7 100644
--- a/packages/ui/src/components/titre/resultat-mise-en-concurrence.stories_snapshots_Default.html
+++ b/packages/ui/src/components/titre/resultat-mise-en-concurrence.stories_snapshots_Default.html
@@ -1,44 +1,44 @@
 <div>
   <div><a href="/mocked-href" title="Pivot" class="fr-link" aria-label="Pivot">Pivot</a><span> &gt; </span><a href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi">Octroi</a></div>
   <h1 class="fr-mt-4w">Résultat final de la mise en concurrence</h1>
-  <div class="fr-input-group fr-pb-2w" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Date
+  <div class="fr-input-group fr-pb-2w" style="margin-bottom: 0px;"><label class="fr-label" for="mise_en_concurrence_date">Date
       <!----><span class="fr-hint-text">au format jj/mm/aaaa</span>
       <!---->
-    </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2024-10-16">
+    </label><input class="fr-input" name="mise_en_concurrence_date" id="mise_en_concurrence_date" required="" type="date" value="2024-10-16">
     <!---->
   </div><span>Pour la demande Pivot&nbsp;du titulaire Titulaire&nbsp;Pivot quelle est la décision ?</span>
-  <fieldset class="fr-fieldset" id="radio_670" aria-labelledby="radio_670-legend" style="flex-direction: column; align-items: flex-start;">
-    <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_670-legend">Décision
+  <fieldset class="fr-fieldset" id="mise_en_concurrence_decision" aria-labelledby="mise_en_concurrence_decision-legend" style="flex-direction: column; align-items: flex-start;">
+    <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="mise_en_concurrence_decision-legend">Décision
       <!---->
     </legend>
     <div class="fr-fieldset__element">
-      <div class="fr-radio-group"><input type="radio" id="radio_670-0" checked="" name="radio_670"><label class="fr-label" for="radio_670-0">Accepté
+      <div class="fr-radio-group"><input type="radio" id="mise_en_concurrence_decision-0" checked="" name="mise_en_concurrence_decision"><label class="fr-label" for="mise_en_concurrence_decision-0">Accepté
           <!---->
         </label></div>
     </div>
     <div class="fr-fieldset__element">
-      <div class="fr-radio-group"><input type="radio" id="radio_670-1" name="radio_670"><label class="fr-label" for="radio_670-1">Rejeté
+      <div class="fr-radio-group"><input type="radio" id="mise_en_concurrence_decision-1" name="mise_en_concurrence_decision"><label class="fr-label" for="mise_en_concurrence_decision-1">Rejeté
           <!---->
         </label></div>
     </div>
   </fieldset>
   <div>
-    <fieldset class="fr-fieldset" id="radio_74" aria-labelledby="radio_74-legend" style="flex-direction: column; align-items: flex-start;">
-      <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_74-legend">Quel périmètre acceptez-vous ?
+    <fieldset class="fr-fieldset" id="mise_en_concurrence_perimetre" aria-labelledby="mise_en_concurrence_perimetre-legend" style="flex-direction: column; align-items: flex-start;">
+      <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="mise_en_concurrence_perimetre-legend">Quel périmètre acceptez-vous ?
         <!---->
       </legend>
       <div class="fr-fieldset__element">
-        <div class="fr-radio-group"><input type="radio" id="radio_74-0" name="radio_74"><label class="fr-label" for="radio_74-0">Celui de la demande
+        <div class="fr-radio-group"><input type="radio" id="mise_en_concurrence_perimetre-0" name="mise_en_concurrence_perimetre"><label class="fr-label" for="mise_en_concurrence_perimetre-0">Celui de la demande
             <!---->
           </label></div>
       </div>
       <div class="fr-fieldset__element">
-        <div class="fr-radio-group"><input type="radio" id="radio_74-1" name="radio_74"><label class="fr-label" for="radio_74-1">Celui de la demande en excluant celui des concurrents
+        <div class="fr-radio-group"><input type="radio" id="mise_en_concurrence_perimetre-1" name="mise_en_concurrence_perimetre"><label class="fr-label" for="mise_en_concurrence_perimetre-1">Celui de la demande en excluant celui des concurrents
             <!---->
           </label></div>
       </div>
       <div class="fr-fieldset__element">
-        <div class="fr-radio-group"><input type="radio" id="radio_74-2" name="radio_74"><label class="fr-label" for="radio_74-2">Personnalisé
+        <div class="fr-radio-group"><input type="radio" id="mise_en_concurrence_perimetre-2" name="mise_en_concurrence_perimetre"><label class="fr-label" for="mise_en_concurrence_perimetre-2">Personnalisé
             <!---->
           </label></div>
       </div>
diff --git a/packages/ui/src/components/titre/resultat-mise-en-concurrence.stories_snapshots_Loading.html b/packages/ui/src/components/titre/resultat-mise-en-concurrence.stories_snapshots_Loading.html
index ef68976a18dc8cf99b43c769f9a4777518aa7ca8..d3388970c6b42fa07f3b22b7926ebd4b780cd10d 100644
--- a/packages/ui/src/components/titre/resultat-mise-en-concurrence.stories_snapshots_Loading.html
+++ b/packages/ui/src/components/titre/resultat-mise-en-concurrence.stories_snapshots_Loading.html
@@ -1,13 +1,13 @@
 <div>
   <div><a href="/mocked-href" title="Pivot" class="fr-link" aria-label="Pivot">Pivot</a><span> &gt; </span><a href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi">Octroi</a></div>
   <h1 class="fr-mt-4w">Résultat final de la mise en concurrence</h1>
-  <div class="fr-input-group fr-pb-2w" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Date
+  <div class="fr-input-group fr-pb-2w" style="margin-bottom: 0px;"><label class="fr-label" for="mise_en_concurrence_date">Date
       <!----><span class="fr-hint-text">au format jj/mm/aaaa</span>
       <!---->
-    </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2024-10-16">
+    </label><input class="fr-input" name="mise_en_concurrence_date" id="mise_en_concurrence_date" required="" type="date" value="2024-10-16">
     <!---->
   </div>
-  <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+  <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
     <!---->
     <!---->
     <div class="_spinner_3306d0"></div>
diff --git a/packages/ui/src/components/titre/resultat-mise-en-concurrence.stories_snapshots_PerimetreAvecSatelliteEquivalent.html b/packages/ui/src/components/titre/resultat-mise-en-concurrence.stories_snapshots_PerimetreAvecSatelliteEquivalent.html
index bdd3d6c3711b7a6dafd5fe5bea61607db66c1e50..1b77eef2106b12c5dd5aaab19135b3eccaf3b3b3 100644
--- a/packages/ui/src/components/titre/resultat-mise-en-concurrence.stories_snapshots_PerimetreAvecSatelliteEquivalent.html
+++ b/packages/ui/src/components/titre/resultat-mise-en-concurrence.stories_snapshots_PerimetreAvecSatelliteEquivalent.html
@@ -1,44 +1,44 @@
 <div>
   <div><a href="/mocked-href" title="Pivot" class="fr-link" aria-label="Pivot">Pivot</a><span> &gt; </span><a href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi">Octroi</a></div>
   <h1 class="fr-mt-4w">Résultat final de la mise en concurrence</h1>
-  <div class="fr-input-group fr-pb-2w" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Date
+  <div class="fr-input-group fr-pb-2w" style="margin-bottom: 0px;"><label class="fr-label" for="mise_en_concurrence_date">Date
       <!----><span class="fr-hint-text">au format jj/mm/aaaa</span>
       <!---->
-    </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2024-10-16">
+    </label><input class="fr-input" name="mise_en_concurrence_date" id="mise_en_concurrence_date" required="" type="date" value="2024-10-16">
     <!---->
   </div><span>Pour la demande Pivot&nbsp;du titulaire Titulaire&nbsp;Pivot quelle est la décision ?</span>
-  <fieldset class="fr-fieldset" id="radio_670" aria-labelledby="radio_670-legend" style="flex-direction: column; align-items: flex-start;">
-    <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_670-legend">Décision
+  <fieldset class="fr-fieldset" id="mise_en_concurrence_decision" aria-labelledby="mise_en_concurrence_decision-legend" style="flex-direction: column; align-items: flex-start;">
+    <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="mise_en_concurrence_decision-legend">Décision
       <!---->
     </legend>
     <div class="fr-fieldset__element">
-      <div class="fr-radio-group"><input type="radio" id="radio_670-0" checked="" name="radio_670"><label class="fr-label" for="radio_670-0">Accepté
+      <div class="fr-radio-group"><input type="radio" id="mise_en_concurrence_decision-0" checked="" name="mise_en_concurrence_decision"><label class="fr-label" for="mise_en_concurrence_decision-0">Accepté
           <!---->
         </label></div>
     </div>
     <div class="fr-fieldset__element">
-      <div class="fr-radio-group"><input type="radio" id="radio_670-1" name="radio_670"><label class="fr-label" for="radio_670-1">Rejeté
+      <div class="fr-radio-group"><input type="radio" id="mise_en_concurrence_decision-1" name="mise_en_concurrence_decision"><label class="fr-label" for="mise_en_concurrence_decision-1">Rejeté
           <!---->
         </label></div>
     </div>
   </fieldset>
   <div>
-    <fieldset class="fr-fieldset" id="radio_74" aria-labelledby="radio_74-legend" style="flex-direction: column; align-items: flex-start;">
-      <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_74-legend">Quel périmètre acceptez-vous ?
+    <fieldset class="fr-fieldset" id="mise_en_concurrence_perimetre" aria-labelledby="mise_en_concurrence_perimetre-legend" style="flex-direction: column; align-items: flex-start;">
+      <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="mise_en_concurrence_perimetre-legend">Quel périmètre acceptez-vous ?
         <!---->
       </legend>
       <div class="fr-fieldset__element">
-        <div class="fr-radio-group"><input type="radio" id="radio_74-0" name="radio_74"><label class="fr-label" for="radio_74-0">Celui de la demande
+        <div class="fr-radio-group"><input type="radio" id="mise_en_concurrence_perimetre-0" name="mise_en_concurrence_perimetre"><label class="fr-label" for="mise_en_concurrence_perimetre-0">Celui de la demande
             <!---->
           </label></div>
       </div>
       <div class="fr-fieldset__element">
-        <div class="fr-radio-group"><input disabled="" type="radio" id="radio_74-1" name="radio_74"><label class="fr-label" for="radio_74-1">Celui de la demande en excluant celui des concurrents
+        <div class="fr-radio-group"><input disabled="" type="radio" id="mise_en_concurrence_perimetre-1" name="mise_en_concurrence_perimetre"><label class="fr-label" for="mise_en_concurrence_perimetre-1">Celui de la demande en excluant celui des concurrents
             <!---->
           </label></div>
       </div>
       <div class="fr-fieldset__element">
-        <div class="fr-radio-group"><input type="radio" id="radio_74-2" name="radio_74"><label class="fr-label" for="radio_74-2">Personnalisé
+        <div class="fr-radio-group"><input type="radio" id="mise_en_concurrence_perimetre-2" name="mise_en_concurrence_perimetre"><label class="fr-label" for="mise_en_concurrence_perimetre-2">Personnalisé
             <!---->
           </label></div>
       </div>
diff --git a/packages/ui/src/components/titre/resultat-mise-en-concurrence.stories_snapshots_PerimetreSansSatellite.html b/packages/ui/src/components/titre/resultat-mise-en-concurrence.stories_snapshots_PerimetreSansSatellite.html
index bdd3d6c3711b7a6dafd5fe5bea61607db66c1e50..1b77eef2106b12c5dd5aaab19135b3eccaf3b3b3 100644
--- a/packages/ui/src/components/titre/resultat-mise-en-concurrence.stories_snapshots_PerimetreSansSatellite.html
+++ b/packages/ui/src/components/titre/resultat-mise-en-concurrence.stories_snapshots_PerimetreSansSatellite.html
@@ -1,44 +1,44 @@
 <div>
   <div><a href="/mocked-href" title="Pivot" class="fr-link" aria-label="Pivot">Pivot</a><span> &gt; </span><a href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi">Octroi</a></div>
   <h1 class="fr-mt-4w">Résultat final de la mise en concurrence</h1>
-  <div class="fr-input-group fr-pb-2w" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Date
+  <div class="fr-input-group fr-pb-2w" style="margin-bottom: 0px;"><label class="fr-label" for="mise_en_concurrence_date">Date
       <!----><span class="fr-hint-text">au format jj/mm/aaaa</span>
       <!---->
-    </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2024-10-16">
+    </label><input class="fr-input" name="mise_en_concurrence_date" id="mise_en_concurrence_date" required="" type="date" value="2024-10-16">
     <!---->
   </div><span>Pour la demande Pivot&nbsp;du titulaire Titulaire&nbsp;Pivot quelle est la décision ?</span>
-  <fieldset class="fr-fieldset" id="radio_670" aria-labelledby="radio_670-legend" style="flex-direction: column; align-items: flex-start;">
-    <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_670-legend">Décision
+  <fieldset class="fr-fieldset" id="mise_en_concurrence_decision" aria-labelledby="mise_en_concurrence_decision-legend" style="flex-direction: column; align-items: flex-start;">
+    <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="mise_en_concurrence_decision-legend">Décision
       <!---->
     </legend>
     <div class="fr-fieldset__element">
-      <div class="fr-radio-group"><input type="radio" id="radio_670-0" checked="" name="radio_670"><label class="fr-label" for="radio_670-0">Accepté
+      <div class="fr-radio-group"><input type="radio" id="mise_en_concurrence_decision-0" checked="" name="mise_en_concurrence_decision"><label class="fr-label" for="mise_en_concurrence_decision-0">Accepté
           <!---->
         </label></div>
     </div>
     <div class="fr-fieldset__element">
-      <div class="fr-radio-group"><input type="radio" id="radio_670-1" name="radio_670"><label class="fr-label" for="radio_670-1">Rejeté
+      <div class="fr-radio-group"><input type="radio" id="mise_en_concurrence_decision-1" name="mise_en_concurrence_decision"><label class="fr-label" for="mise_en_concurrence_decision-1">Rejeté
           <!---->
         </label></div>
     </div>
   </fieldset>
   <div>
-    <fieldset class="fr-fieldset" id="radio_74" aria-labelledby="radio_74-legend" style="flex-direction: column; align-items: flex-start;">
-      <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="radio_74-legend">Quel périmètre acceptez-vous ?
+    <fieldset class="fr-fieldset" id="mise_en_concurrence_perimetre" aria-labelledby="mise_en_concurrence_perimetre-legend" style="flex-direction: column; align-items: flex-start;">
+      <legend class="fr-fieldset__legend--regular fr-fieldset__legend" id="mise_en_concurrence_perimetre-legend">Quel périmètre acceptez-vous ?
         <!---->
       </legend>
       <div class="fr-fieldset__element">
-        <div class="fr-radio-group"><input type="radio" id="radio_74-0" name="radio_74"><label class="fr-label" for="radio_74-0">Celui de la demande
+        <div class="fr-radio-group"><input type="radio" id="mise_en_concurrence_perimetre-0" name="mise_en_concurrence_perimetre"><label class="fr-label" for="mise_en_concurrence_perimetre-0">Celui de la demande
             <!---->
           </label></div>
       </div>
       <div class="fr-fieldset__element">
-        <div class="fr-radio-group"><input disabled="" type="radio" id="radio_74-1" name="radio_74"><label class="fr-label" for="radio_74-1">Celui de la demande en excluant celui des concurrents
+        <div class="fr-radio-group"><input disabled="" type="radio" id="mise_en_concurrence_perimetre-1" name="mise_en_concurrence_perimetre"><label class="fr-label" for="mise_en_concurrence_perimetre-1">Celui de la demande en excluant celui des concurrents
             <!---->
           </label></div>
       </div>
       <div class="fr-fieldset__element">
-        <div class="fr-radio-group"><input type="radio" id="radio_74-2" name="radio_74"><label class="fr-label" for="radio_74-2">Personnalisé
+        <div class="fr-radio-group"><input type="radio" id="mise_en_concurrence_perimetre-2" name="mise_en_concurrence_perimetre"><label class="fr-label" for="mise_en_concurrence_perimetre-2">Personnalisé
             <!---->
           </label></div>
       </div>
diff --git a/packages/ui/src/components/titre/resultat-mise-en-concurrence.stories_snapshots_WithError.html b/packages/ui/src/components/titre/resultat-mise-en-concurrence.stories_snapshots_WithError.html
index 602b84dbc76806559aad7fe26a719be16f4f62c7..0c2de1b0c6cc82e746c028b2174d1bd55808840e 100644
--- a/packages/ui/src/components/titre/resultat-mise-en-concurrence.stories_snapshots_WithError.html
+++ b/packages/ui/src/components/titre/resultat-mise-en-concurrence.stories_snapshots_WithError.html
@@ -1,13 +1,13 @@
 <div>
   <div><a href="/mocked-href" title="Pivot" class="fr-link" aria-label="Pivot">Pivot</a><span> &gt; </span><a href="/mocked-href" title="Octroi" class="fr-link" aria-label="Octroi">Octroi</a></div>
   <h1 class="fr-mt-4w">Résultat final de la mise en concurrence</h1>
-  <div class="fr-input-group fr-pb-2w" style="margin-bottom: 0px;"><label class="fr-label" for="input_271">Date
+  <div class="fr-input-group fr-pb-2w" style="margin-bottom: 0px;"><label class="fr-label" for="mise_en_concurrence_date">Date
       <!----><span class="fr-hint-text">au format jj/mm/aaaa</span>
       <!---->
-    </label><input class="fr-input" name="input_271" id="input_271" required="" type="date" value="2024-10-16">
+    </label><input class="fr-input" name="mise_en_concurrence_date" id="mise_en_concurrence_date" required="" type="date" value="2024-10-16">
     <!---->
   </div>
-  <div class=" undefined" style="display: flex; justify-content: center;">
+  <div class="" style="display: flex; justify-content: center;">
     <!---->
     <div class="fr-alert fr-alert--error fr-alert--sm" role="alert">
       <p>Message d'erreur</p>
diff --git a/packages/ui/src/components/titre/resultat-mise-en-concurrence.tsx b/packages/ui/src/components/titre/resultat-mise-en-concurrence.tsx
index 6dbcd6c67b6afe18a176e2874833ee2380accead..ae442dba8281184aa13c03923baad4f1fc884113 100644
--- a/packages/ui/src/components/titre/resultat-mise-en-concurrence.tsx
+++ b/packages/ui/src/components/titre/resultat-mise-en-concurrence.tsx
@@ -168,7 +168,15 @@ export const ResultatMiseEnConcurrence = defineComponent<Props>(props => {
 
       <h1 class="fr-mt-4w">{capitalize(EtapesTypes[ETAPES_TYPES.resultatMiseEnConcurrence].nom)}</h1>
 
-      <DsfrInput required={true} class="fr-pb-2w" legend={{ main: 'Date' }} type={{ type: 'date' }} initialValue={date.value} valueChanged={(newDate: CaminoDate | null) => setDate(newDate)} />
+      <DsfrInput
+        id="mise_en_concurrence_date"
+        required={true}
+        class="fr-pb-2w"
+        legend={{ main: 'Date' }}
+        type={{ type: 'date' }}
+        initialValue={date.value}
+        valueChanged={(newDate: CaminoDate | null) => setDate(newDate)}
+      />
       <LoadingElement
         data={possibleEtapes.value}
         renderItem={() => (
@@ -177,6 +185,7 @@ export const ResultatMiseEnConcurrence = defineComponent<Props>(props => {
               Pour la demande {props.pivot.titreNom} du titulaire {entreprisesIndex[props.pivot.titulaireId]} quelle est la décision ?
             </span>
             <DsfrInputRadio
+              id="mise_en_concurrence_decision"
               legend={{ main: 'Décision' }}
               initialValue={decision.value}
               required={true}
@@ -187,6 +196,7 @@ export const ResultatMiseEnConcurrence = defineComponent<Props>(props => {
               {decision.value === 'acc' ? (
                 <div>
                   <DsfrInputRadio
+                    id="mise_en_concurrence_perimetre"
                     required={true}
                     legend={{ main: 'Quel périmètre acceptez-vous ?' }}
                     elements={[
@@ -209,6 +219,7 @@ export const ResultatMiseEnConcurrence = defineComponent<Props>(props => {
                         class="fr-mt-2w"
                         calculateNeighbours={false}
                         perimetre={perimetre.value}
+                        id="perimetre_final"
                         titreSlug={props.pivot.titreSlug}
                         titreTypeId={props.pivot.titreTypeId}
                         initTab={props.initTab ?? 'carte'}
diff --git a/packages/ui/src/components/titre/titre-abonner-button.stories_snapshots_Loading.html b/packages/ui/src/components/titre/titre-abonner-button.stories_snapshots_Loading.html
index a3ef9f153e3d85e7cee9bee07fa7e245eba4da0b..c5f6bb573b32886f6379bf1c5b391015fac5acbe 100644
--- a/packages/ui/src/components/titre/titre-abonner-button.stories_snapshots_Loading.html
+++ b/packages/ui/src/components/titre/titre-abonner-button.stories_snapshots_Loading.html
@@ -1,4 +1,4 @@
-<div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+<div class="_top-level_3306d0" style="display: flex; justify-content: center;">
   <!---->
   <!---->
   <div class="_spinner_3306d0"></div>
diff --git a/packages/ui/src/components/titre/titre-abonner-button.stories_snapshots_WithError.html b/packages/ui/src/components/titre/titre-abonner-button.stories_snapshots_WithError.html
index 1581df2f5625237870f316caea15a3943a794bbe..5cd6a49518801e7d551131667e88a40de522a282 100644
--- a/packages/ui/src/components/titre/titre-abonner-button.stories_snapshots_WithError.html
+++ b/packages/ui/src/components/titre/titre-abonner-button.stories_snapshots_WithError.html
@@ -1,4 +1,4 @@
-<div class=" undefined" style="display: flex; justify-content: center;">
+<div class="" style="display: flex; justify-content: center;">
   <div class="fr-alert fr-alert--error fr-alert--sm">
     <p>Une erreur est survenue</p>
   </div>
diff --git a/packages/ui/src/components/titre/titre-demarche.tsx b/packages/ui/src/components/titre/titre-demarche.tsx
index 954ef9c55cd2aee54ca3b32b7f864a42082f8514..248de2416ac310fd584c2651bc47b269214eacda 100644
--- a/packages/ui/src/components/titre/titre-demarche.tsx
+++ b/packages/ui/src/components/titre/titre-demarche.tsx
@@ -215,6 +215,7 @@ export const TitreDemarche = defineComponent<Props>(props => {
               class="fr-pt-3w"
               titreSlug={props.titre.slug}
               titreTypeId={props.titre.titre_type_id}
+              id={props.currentDemarcheSlug}
               apiClient={props.apiClient}
               calculateNeighbours={true}
               perimetre={{ ...perimetre.value }}
diff --git a/packages/ui/src/components/titre/titres-link-form.stories_snapshots_TitreWithTitreLinksLoading.html b/packages/ui/src/components/titre/titres-link-form.stories_snapshots_TitreWithTitreLinksLoading.html
index b0633d844861e2860a689f377673e47581d48522..e3387ed783456c0271d6424e9d9580a0222a2f39 100644
--- a/packages/ui/src/components/titre/titres-link-form.stories_snapshots_TitreWithTitreLinksLoading.html
+++ b/packages/ui/src/components/titre/titres-link-form.stories_snapshots_TitreWithTitreLinksLoading.html
@@ -1,5 +1,5 @@
 <div>
-  <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+  <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
     <!---->
     <!---->
     <div class="_spinner_3306d0"></div>
diff --git a/packages/ui/src/components/titre/titres-link.stories_snapshots_Loading.html b/packages/ui/src/components/titre/titres-link.stories_snapshots_Loading.html
index a3ef9f153e3d85e7cee9bee07fa7e245eba4da0b..c5f6bb573b32886f6379bf1c5b391015fac5acbe 100644
--- a/packages/ui/src/components/titre/titres-link.stories_snapshots_Loading.html
+++ b/packages/ui/src/components/titre/titres-link.stories_snapshots_Loading.html
@@ -1,4 +1,4 @@
-<div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+<div class="_top-level_3306d0" style="display: flex; justify-content: center;">
   <!---->
   <!---->
   <div class="_spinner_3306d0"></div>
diff --git a/packages/ui/src/components/titre/titres-link.stories_snapshots_WithError.html b/packages/ui/src/components/titre/titres-link.stories_snapshots_WithError.html
index 7fe9b71c58cc02ad66135a217280f030b47ba819..79d1a04f8855ec705aefd1ffbd393b1a37b7dc43 100644
--- a/packages/ui/src/components/titre/titres-link.stories_snapshots_WithError.html
+++ b/packages/ui/src/components/titre/titres-link.stories_snapshots_WithError.html
@@ -1,4 +1,4 @@
-<div class=" undefined" style="display: flex; justify-content: center;">
+<div class="" style="display: flex; justify-content: center;">
   <div class="fr-alert fr-alert--error fr-alert--sm">
     <p>Because reasons</p>
   </div>
diff --git a/packages/ui/src/components/titres.tsx b/packages/ui/src/components/titres.tsx
index 88c9e625a0d25e48497310b3b30d588405365fa8..544e6cd3ee60b8deb328aa9bfeeebce9afce9920 100644
--- a/packages/ui/src/components/titres.tsx
+++ b/packages/ui/src/components/titres.tsx
@@ -217,6 +217,7 @@ export const Titres = defineComponent({
             />{' '}
             {tabId.value ? (
               <Tabs
+                id="titres_vues"
                 initTab={tabId.value}
                 tabs={vues}
                 tabsTitle={'Affichage des titres en vue carte ou tableau'}
diff --git a/packages/ui/src/components/utilisateur.stories_snapshots_Loading.html b/packages/ui/src/components/utilisateur.stories_snapshots_Loading.html
index b9bcc5b2f20b60a5b6ca72ca3629394f8762ede3..4d8d9f2cb496f1c269df8d3f0996d25ed3385d77 100644
--- a/packages/ui/src/components/utilisateur.stories_snapshots_Loading.html
+++ b/packages/ui/src/components/utilisateur.stories_snapshots_Loading.html
@@ -1,5 +1,5 @@
 <div><a href="/mocked-href" title="Utilisateurs" class="fr-link" aria-label="Utilisateurs">Utilisateurs</a>
-  <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+  <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
     <!---->
     <!---->
     <div class="_spinner_3306d0"></div>
diff --git a/packages/ui/src/components/utilisateur.stories_snapshots_error.html b/packages/ui/src/components/utilisateur.stories_snapshots_error.html
index e479b898a289a64d07e17384d6ac7e736922a3f5..53bf3fb6706ef861c625291b69fed6d072ec72ae 100644
--- a/packages/ui/src/components/utilisateur.stories_snapshots_error.html
+++ b/packages/ui/src/components/utilisateur.stories_snapshots_error.html
@@ -1,5 +1,5 @@
 <div><a href="/mocked-href" title="Utilisateurs" class="fr-link" aria-label="Utilisateurs">Utilisateurs</a>
-  <div class=" undefined" style="display: flex; justify-content: center;">
+  <div class="" style="display: flex; justify-content: center;">
     <!---->
     <div class="fr-alert fr-alert--error fr-alert--sm" role="alert">
       <p>Cassé</p>
diff --git a/packages/ui/src/components/utilisateur/permission-edit.tsx b/packages/ui/src/components/utilisateur/permission-edit.tsx
index 50afcf30ae538fb72f98f4519f2819b8bf6d732a..1b9114bf16ca25d4d73bd8b6624a18f6cd25970d 100644
--- a/packages/ui/src/components/utilisateur/permission-edit.tsx
+++ b/packages/ui/src/components/utilisateur/permission-edit.tsx
@@ -186,6 +186,7 @@ const PermissionEdit = defineComponent<PermissionEditProps>(props => {
               title="Administration"
               item={
                 <DsfrSelect
+                  id="administration_utilisateur"
                   required={true}
                   items={map(sortedAdministrations, admin => ({ id: admin.id, label: admin.abreviation }))}
                   initialValue={updatingUtilisateur.value.administrationId}
diff --git a/packages/ui/src/components/utilisateurs.stories_snapshots_Loading.html b/packages/ui/src/components/utilisateurs.stories_snapshots_Loading.html
index ecbca5e0340edda80cd7243359cf04eb21d3c203..5a48c5e18813153f9030ae43f2b9585827c7d66c 100644
--- a/packages/ui/src/components/utilisateurs.stories_snapshots_Loading.html
+++ b/packages/ui/src/components/utilisateurs.stories_snapshots_Loading.html
@@ -107,7 +107,7 @@
             </div>
           </div>
         </div>
-        <div class="_top-level_3306d0 undefined" style="display: flex; justify-content: center;">
+        <div class="_top-level_3306d0" style="display: flex; justify-content: center;">
           <!---->
           <!---->
           <div class="_spinner_3306d0"></div>
diff --git a/packages/ui/src/components/utilisateurs.stories_snapshots_WithError.html b/packages/ui/src/components/utilisateurs.stories_snapshots_WithError.html
index 9df7abdd75ab7b13ad4b8d57fc46a00490d9ef52..d9119e92d28dd8d052c4856c43f3bcff125ceac2 100644
--- a/packages/ui/src/components/utilisateurs.stories_snapshots_WithError.html
+++ b/packages/ui/src/components/utilisateurs.stories_snapshots_WithError.html
@@ -107,7 +107,7 @@
             </div>
           </div>
         </div>
-        <div class=" undefined" style="display: flex; justify-content: center;">
+        <div class="" style="display: flex; justify-content: center;">
           <div class="fr-alert fr-alert--error fr-alert--sm">
             <p>Cassé</p>
           </div>
diff --git a/packages/ui/src/storybook.spec.ts b/packages/ui/src/storybook.spec.ts
index a7795dfd5524bf18efa9f61625a9becec6343ca4..5b7b4097e6a85ecea61745bd33e5afe7f46b1795 100644
--- a/packages/ui/src/storybook.spec.ts
+++ b/packages/ui/src/storybook.spec.ts
@@ -3,7 +3,6 @@ import type { Meta, StoryFn } from '@storybook/vue3'
 import { render } from '@testing-library/vue'
 import { composeStories } from '@storybook/vue3'
 import { h } from 'vue'
-import { setSeed } from './utils/vue-tsx-utils'
 import { sleep } from 'camino-common/src/typescript-tools'
 
 type StoryFile = {
@@ -47,7 +46,6 @@ describe('Storybook Tests', async () => {
         .map(([name, story]) => ({ name, story }))
         .filter(env => (name ?? '').includes('NoStoryshots') || !(env.name ?? '').includes('NoSnapshot'))
     )('$name', async value => {
-      setSeed(12)
       let html: string | undefined = undefined
       try {
         // @ts-ignore
diff --git a/packages/ui/src/utils/vue-tsx-utils.ts b/packages/ui/src/utils/vue-tsx-utils.ts
index d22f32857707998257b08d09a28fe19b9ab57dd1..92e41bb1d92af5ee20cad77b81ebc653d6fc17d5 100644
--- a/packages/ui/src/utils/vue-tsx-utils.ts
+++ b/packages/ui/src/utils/vue-tsx-utils.ts
@@ -2,17 +2,6 @@ import { readonly, ref, Ref } from 'vue'
 
 export const isEventWithTarget = (event: Event): event is FocusEvent & { target: HTMLInputElement } => 'target' in event
 
-let seed = Math.random()
-// USED Only for testing
-export const setSeed = (value: number): void => {
-  seed = value
-}
-export const random = (): number => {
-  const x = Math.sin(seed++) * 10000
-
-  return x - Math.floor(x)
-}
-
 export function useState<T>(initialState: T): [Ref<T>, (value: T) => void] {
   const state = ref<T>(initialState) as Ref<T>
   const setState = (newState: T) => {