packages/ui/src/components/etape-edition.stories.tsx

@@ -167,7 +167,7 @@ const apiClient: Props['apiClient'] = {
 
     return Promise.resolve({
       mfr: { etapeStatutIds: ['fai'], mainStep: true },
-      mdp: { etapeStatutIds: ['fai'], mainStep: true },
+      men: { etapeStatutIds: ['fai'], mainStep: true },
       mod: { etapeStatutIds: ['fai'], mainStep: true },
     })
   },

packages/ui/src/components/etape/date-type-edit.stories.tsx

@@ -20,7 +20,7 @@ const apiClient: Props['apiClient'] = {
 
     return Promise.resolve({
       mfr: { etapeStatutIds: ['fai'], mainStep: true },
-      mdp: { etapeStatutIds: ['fai'], mainStep: true },
+      men: { etapeStatutIds: ['fai'], mainStep: true },
     })
   },
 }

packages/ui/src/components/etape/etape-edit-form.stories.tsx

@@ -148,7 +148,7 @@ const etapeEditFormApiClient: Props['apiClient'] = {
 
     return Promise.resolve({
       mfr: { etapeStatutIds: ['fai'], mainStep: true },
-      mdp: { etapeStatutIds: ['fai'], mainStep: true },
+      men: { etapeStatutIds: ['fai'], mainStep: true },
       asc: { etapeStatutIds: ['fai'], mainStep: true },
       aca: { etapeStatutIds: ['fav', 'def'], mainStep: true },
       cac: { etapeStatutIds: ['fai'], mainStep: true },

packages/ui/src/components/etape/type-edit.stories.tsx

@@ -20,7 +20,7 @@ const apiClientMock: Pick<EtapeApiClient, 'getEtapesTypesEtapesStatuts'> = {
     return Promise.resolve({
       [ETAPES_TYPES.demande]: { etapeStatutIds: [ETAPES_STATUTS.FAIT], mainStep: false },
       css: { etapeStatutIds: [ETAPES_STATUTS.FAIT], mainStep: false },
-      mdp: { etapeStatutIds: [ETAPES_STATUTS.FAIT], mainStep: true },
+      men: { etapeStatutIds: [ETAPES_STATUTS.FAIT], mainStep: true },
       apd: { etapeStatutIds: [ETAPES_STATUTS.FAIT], mainStep: true },
     })
   },

packages/ui/src/components/statistiques/globales.tsx

@@ -156,63 +156,63 @@ export const PureGlobales: FunctionalComponent<Props> = props => {
 
   return (
     <div>
-      <div id="utilisateurs" class="mb-xxl content">
+      <div id="utilisateurs" class="fr-container--fluid">
         <h2>Les différents profils des utilisateurs de Camino</h2>
         <span class="separator" />
-        <div class="tablet-float-blobs clearfix">
-          <div class="tablet-float-blob-1-3">
-            <div class="mb-xl mt">
+        <div class="fr-grid-row">
+          <div class="fr-col-12 fr-col-md-4">
+            <div class="fr-mb-6w fr-mt-3w">
               <p class={['fr-display--xs', styles['donnee-importante']]}>{numberFormat(totalUtilisateurs)}</p>
-              <p class="bold text-center">utilisateurs sur la plateforme</p>
+              <p class="text-center">utilisateurs sur la plateforme</p>
             </div>
-            <div class="mb-xl mt">
+            <div class="fr-mb-6w fr-mt-3w">
               <p class={['fr-display--xs', styles['donnee-importante']]}>{numberFormat(props.statistiques["Nombre d'utilisateurs affiliés à une entreprise"])}</p>
-              <p class="bold text-center">utilisateurs affiliés à une Entreprise</p>
+              <p class="text-center">utilisateurs affiliés à une Entreprise</p>
             </div>
 
-            <div class="mb-xl mt">
+            <div class="fr-mb-6w fr-mt-3w">
               <p class={['fr-display--xs', styles['donnee-importante']]}>{numberFormat(utilisateursAdmin)}</p>
-              <p class="bold text-center">utilisateurs rattachés à un compte Administration</p>
+              <p class="text-center">utilisateurs rattachés à un compte Administration</p>
             </div>
           </div>
-          <div class="tablet-float-blob-2-3 mb-xxl flex" style="justify-content: center">
+          <div class="fr-col-12 fr-col-md-8 flex" style="justify-content: center">
             <div style="width: 70%">
               <ConfigurableChart chartConfiguration={pieConfiguration(utilisateurs)} />
             </div>
           </div>
         </div>
       </div>
-      <div id="administrations" class="mb-xxl content">
+      <div id="administrations" class="fr-mb-6w content">
         <h2>Répartition des différentes administrations sur Camino</h2>
         <span class="separator" />
-        <div class="tablet-float-blobs clearfix">
-          <div class="tablet-float-blob-1-3">
-            <div class="mb-xl mt">
+        <div class="fr-grid-row">
+          <div class="fr-col-12 fr-col-md-4">
+            <div class="fr-mb-6w fr-mt-3w">
               <p class={['fr-display--xs', styles['donnee-importante']]}>{numberFormat(utilisateursAdmin)}</p>
-              <p class="bold text-center">utilisateurs rattachés à un compte Administration</p>
+              <p class="text-center">utilisateurs rattachés à un compte Administration</p>
             </div>
           </div>
-          <div class="tablet-float-blob-2-3 flex" style="justify-content: center">
+          <div class="fr-col-12 fr-col-md-8 flex" style="justify-content: center">
             <div style="width: 70%">
               <ConfigurableChart chartConfiguration={pieConfiguration(utilisateursAdminChart)} />
             </div>
           </div>
         </div>
       </div>
-      <div id="amelioration" class="mb-xxl content">
+      <div id="amelioration" class="fr-mb-6w content">
         <h2>Amélioration continue et accès aux données publiques</h2>
         <span class="separator" />
-        <p class="mb-xl">En tant que secteur régulé par l'État, la publication en ligne des données minières doit permettre leur amélioration et leur utilisation par la communauté</p>
-        <div class="tablet-float-blobs clearfix">
-          <div class="tablet-float-blob-1-3 mb-xl">
+        <p class="fr-mb-3w">En tant que secteur régulé par l'État, la publication en ligne des données minières doit permettre leur amélioration et leur utilisation par la communauté</p>
+        <div class="fr-grid-row">
+          <div class="fr-col-12 fr-col-md-4 fr-mb-3w">
             <p class={['fr-display--xs', styles['donnee-importante']]}>{titresModifies}</p>
-            <p class="bold text-center">mise à jour de titres miniers par l'administration et les entreprises du secteur le mois dernier</p>
+            <p class="text-center">mise à jour de titres miniers par l'administration et les entreprises du secteur le mois dernier</p>
             <p>
               Le nombre de mises à jour mensuelles du cadastre par les différents services de l'administration ou par les professionnels du secteur reflète l'intensité de l'activité d'instruction et
               administrative sur le domaine minier en France. Une mise à jour peut être l'ajout d'un titre, une modification de son statut ou des documents concernant son instruction.
             </p>
           </div>
-          <div class="tablet-float-blob-2-3 mb-xxl">
+          <div class="fr-col-12 fr-col-md-8 fr-mb-6w">
             <ConfigurableChart
               chartConfiguration={lineConfiguration(
                 statsLineFormat({
@@ -225,26 +225,26 @@ export const PureGlobales: FunctionalComponent<Props> = props => {
         </div>
       </div>
 
-      <div id="gains" class="mb-xxl">
+      <div id="gains" class="fr-mb-6w">
         <h2>Gains de la dématérialisation sur l'instruction minière</h2>
         <span class="separator" />
         <p>La dématérialisation des démarches relatives à l'instruction minière doit permettre un gain de temps pour ceux qui les effectuent et ceux qui les instruisent</p>
-        <div class="desktop-blobs">
-          <div class="desktop-blob-1-3 mb-xl">
+        <div class="fr-grid-row">
+          <div class="fr-col-12 fr-col-md-4 fr-mb-3w">
             <p class={['fr-display--xs', styles['donnee-importante']]}>{props.statistiques.demarches}</p>
-            <p class="bold text-center">démarches effectuées en ligne cette année</p>
+            <p class="text-center">démarches effectuées en ligne cette année</p>
           </div>
-          <div class="desktop-blob-1-3 mb-xl">
+          <div class="fr-col-12 fr-col-md-4 fr-mb-3w">
             <p class={['fr-display--xs', styles['donnee-importante']]}>{props.statistiques.titresActivitesBeneficesEntreprise}</p>
-            <p class="bold text-center">jours de travail sans valeur ajoutée économisés par les entreprises en Guyane</p>
+            <p class="text-center">jours de travail sans valeur ajoutée économisés par les entreprises en Guyane</p>
             <p>
               La dématérialisation d’un rapport trimestriel d’activité de production d’or en Guyane permet en moyenne l’économie de 2 heures de travail de saisie ou de déplacement pour son dépôt
               physique à l’administration.
             </p>
           </div>
-          <div class="desktop-blob-1-3 mb-xl">
+          <div class="fr-col-12 fr-col-md-4 fr-mb-3w">
             <p class={['fr-display--xs', styles['donnee-importante']]}>{props.statistiques.titresActivitesBeneficesAdministration}</p>
-            <p class="bold text-center">jours de travail à faible valeur ajoutée économisés par l’administration</p>
+            <p class="text-center">jours de travail à faible valeur ajoutée économisés par l’administration</p>
             <p>
               La dématérialisation d’un rapport trimestriel d’activité de production d’or en Guyane permet en moyenne l’économie d’une heure de travail de traitement et re-saisie de données par un
               agent de l’administration. Le gain de temps est réinvesti sur l’accompagnement et le contrôle de l’activité.

packages/ui/src/components/statistiques/granulats-marins-activite.tsx

@@ -13,8 +13,8 @@ export const GranulatsMarinsActivite: FunctionalComponent<Props> = props => (
   <div id="indicateurs" class="mb-xxl">
     {(props.enConstruction ?? false) ? <Alert class="fr-mb-2v" type="warning" title="Données en cours de collecte et consolidation." /> : null}
 
-    <div class="tablet-blobs">
-      <div class="tablet-blob-1-2 mb-xl">
+    <div class="fr-grid-row">
+      <div class="fr-col-12 fr-col-md-6 fr-mb-3w">
         <h4 class="text-center">Production nette en volume</h4>
         {props.statistiqueGranulatsMarins.activitesDeposesQuantite > 3 ? (
           <div>
@@ -26,7 +26,7 @@ export const GranulatsMarinsActivite: FunctionalComponent<Props> = props => (
           </div>
         )}
       </div>
-      <div class="tablet-blob-1-2 mb-xl">
+      <div class="fr-col-12 fr-col-md-6 fr-mb-3w">
         <h4 class="text-center">Production nette en masse</h4>
         {props.statistiqueGranulatsMarins.activitesDeposesQuantite > 3 ? (
           <div>
@@ -39,13 +39,13 @@ export const GranulatsMarinsActivite: FunctionalComponent<Props> = props => (
         )}
       </div>
     </div>
-    <div class="tablet-blobs">
-      <div class="tablet-blob-1-2 mb-xl">
+    <div class="fr-grid-row">
+      <div class="fr-col-12 fr-col-md-6 fr-mb-3w">
         <h4 class="text-center">Sources des données</h4>
         <p class={['fr-display--xs', styles['donnee-importante']]}>{numberFormat(props.statistiqueGranulatsMarins.activitesDeposesQuantite)}</p>
         <p>Rapports d’activité de production collectés via Camino utilisés pour consolider ces statistiques.</p>
       </div>
-      <div class="tablet-blob-1-2 mb-xl">
+      <div class="fr-col-12 fr-col-md-6 fr-mb-3w">
         <h4 class="text-center">Taux de collecte</h4>
         <p class={['fr-display--xs', styles['donnee-importante']]}>{props.statistiqueGranulatsMarins.activitesDeposesRatio} %</p>
         <p>Des rapports d’activité de production attendus ont été déposés par les opérateurs miniers pour consolider ces statistiques.</p>

packages/ui/src/components/statistiques/granulats-marins.stories_snapshots_Loading.html

-<div class="content">
-  <div id="etat" class="mb-xxl mt">
+<div class="fr-container--fluid">
+  <div id="etat">
     <h2>État du domaine minier en temps réel</h2><span class="separator"></span>
     <p>Les données affichées ici sont celles contenues dans la base de donnée Camino. Elles sont susceptibles d’évoluer chaque jour au grès des décisions et de la fin de validité des titres et autorisations.</p>
     <p>Les surfaces cumulées concernées par un titre ou une autorisation n’impliquent pas qu’elles sont effectivement explorées ou exploitées sur tout ou partie de l'année. Les travaux miniers font l’objet de déclarations ou d’autorisations distinctes portant sur une partie seulement de la surface des titres miniers.</p>
-    <div class="mb-xxl">
-      <h3>Titres d’exploration</h3>
+    <div class="fr-mb-2w">
+      <h3>Titres d'exploration</h3>
       <hr>
-      <div class="tablet-blobs">
-        <div class="tablet-blob-1-3">
+      <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;">
             <!---->
@@ -22,7 +22,7 @@
           </div>
           <p class="h6 text-center"><a to="{name:titres,query:{domainesIds:w,typesIds:ar,ap,pr,statutsIds:dmi,mod,sup,vueId:table}}" type="primary">Voir les titres</a></p>
         </div>
-        <div class="tablet-blob-1-3">
+        <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;">
             <!---->
@@ -30,10 +30,10 @@
             <div class="_spinner_3306d0"></div>
           </div>
           </p>
-          <p class="bold text-center">Permis exclusifs de recherches</p>
+          <p class="text-center">Permis exclusifs de recherches</p>
           <p class="h6 text-center"><a to="{name:titres,query:{domainesIds:w,typesIds:pr,statutsIds:val,vueId:table}}" type="primary">Voir les titres</a></p>
         </div>
-        <div class="tablet-blob-1-3">
+        <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;">
             <!---->
@@ -41,15 +41,15 @@
             <div class="_spinner_3306d0"></div>
           </div>
           </p>
-          <p class="bold text-center">Surfaces cumulées des titres pouvant faire l'objet d'une activité d’exploration</p>
+          <p class="text-center">Surfaces cumulées des titres pouvant faire l'objet d'une activité d’exploration</p>
         </div>
       </div>
     </div>
-    <div class="mb-xxl">
+    <div class="fr-mb-2w">
       <h3>Titres d’exploitation</h3>
       <hr>
-      <div class="tablet-blobs">
-        <div class="tablet-blob-1-3">
+      <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;">
             <!---->
@@ -64,7 +64,7 @@
           </div>
           <p class="h6 text-center"><a to="{name:titres,query:{domainesIds:w,typesIds:ax,cx,px,statutsIds:dmi,mod,sup,vueId:table}}" type="primary">Voir les titres</a></p>
         </div>
-        <div class="tablet-blob-1-3">
+        <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;">
             <!---->
@@ -79,7 +79,7 @@
           </div>
           <p class="h6 text-center"><a to="{name:titres,query:{domainesIds:w,typesIds:cx,statutsIds:val,vueId:table}}" type="primary">Voir les titres</a></p>
         </div>
-        <div class="tablet-blob-1-3">
+        <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;">
             <!---->
@@ -87,15 +87,15 @@
             <div class="_spinner_3306d0"></div>
           </div>
           </p>
-          <p class="bold text-center">Surfaces cumulées des titres pouvant faire l'objet d'une activité d’exploitation</p>
+          <p class="text-center">Surfaces cumulées des titres pouvant faire l'objet d'une activité d’exploitation</p>
         </div>
       </div>
     </div>
   </div>
-  <div class="line-neutral width-full mb"></div>
+  <div class="fr-mb-3w fr-mt-3w" style="height: 1px; width: 100%;"></div>
   <h2>Production annuelle</h2><span class="separator"></span>
-  <p class="mb-xl">Données contenues dans la base de données Camino, stabilisées pour l’année n-1.</p>
-  <div class="tablet-pt-s pb-s">
+  <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;">
       <!---->
       <!---->
@@ -108,14 +108,14 @@
     <!---->
     <div class="_spinner_3306d0"></div>
   </div>
-  <div class="line-neutral width-full mb-xl"></div>
+  <div class="fr-mb-3w fr-mt-3w" style="height: 1px; width: 100%;"></div>
   <div id="evolution" class="mb-xxl">
     <h2>Titres octroyés et surface</h2><span class="separator"></span>
     <p>Données contenues dans la base de données Camino, concernant exclusivement le territoire français.</p>
     <h3>Permis exclusif de recherche (PER) octroyés</h3>
     <hr>
-    <div class="tablet-float-blobs clearfix">
-      <div class="tablet-float-blob-1-3 mb-xl mt">
+    <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;">
           <!---->
@@ -125,7 +125,7 @@
         </p>
         <p>Permis exclusifs de recherches octroyés l’an dernier</p>
       </div>
-      <div class="tablet-float-blob-2-3 relative mb-xl">
+      <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;">
           <!---->
           <!---->
@@ -140,8 +140,8 @@
     </div>
     <h3>Concessions octroyées</h3>
     <hr>
-    <div class="tablet-float-blobs clearfix">
-      <div class="tablet-float-blob-1-3 mb-xl mt">
+    <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;">
           <!---->
@@ -151,7 +151,7 @@
         </p>
         <p>Concessions octroyées l’an dernier</p>
       </div>
-      <div class="tablet-float-blob-2-3 relative mb-xl">
+      <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;">
           <!---->
           <!---->
@@ -161,8 +161,8 @@
     </div>
     <h3>Concessions valides</h3>
     <hr>
-    <div class="tablet-float-blobs clearfix">
-      <div class="tablet-float-blob-1-3 mb-xl mt">
+    <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;">
           <!---->
@@ -172,7 +172,7 @@
         </p>
         <p>Concessions valides l’an dernier</p>
       </div>
-      <div class="tablet-float-blob-2-3 relative mb-xl">
+      <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;">
           <!---->
           <!---->

packages/ui/src/components/statistiques/granulats-marins.stories_snapshots_WithError.html

-<div class="content">
-  <div id="etat" class="mb-xxl mt">
+<div class="fr-container--fluid">
+  <div id="etat">
     <h2>État du domaine minier en temps réel</h2><span class="separator"></span>
     <p>Les données affichées ici sont celles contenues dans la base de donnée Camino. Elles sont susceptibles d’évoluer chaque jour au grès des décisions et de la fin de validité des titres et autorisations.</p>
     <p>Les surfaces cumulées concernées par un titre ou une autorisation n’impliquent pas qu’elles sont effectivement explorées ou exploitées sur tout ou partie de l'année. Les travaux miniers font l’objet de déclarations ou d’autorisations distinctes portant sur une partie seulement de la surface des titres miniers.</p>
-    <div class="mb-xxl">
-      <h3>Titres d’exploration</h3>
+    <div class="fr-mb-2w">
+      <h3>Titres d'exploration</h3>
       <hr>
-      <div class="tablet-blobs">
-        <div class="tablet-blob-1-3">
+      <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="fr-alert fr-alert--error fr-alert--sm">
@@ -26,7 +26,7 @@
           </div>
           <p class="h6 text-center"><a to="{name:titres,query:{domainesIds:w,typesIds:ar,ap,pr,statutsIds:dmi,mod,sup,vueId:table}}" type="primary">Voir les titres</a></p>
         </div>
-        <div class="tablet-blob-1-3">
+        <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="fr-alert fr-alert--error fr-alert--sm">
@@ -36,10 +36,10 @@
             <!---->
           </div>
           </p>
-          <p class="bold text-center">Permis exclusifs de recherches</p>
+          <p class="text-center">Permis exclusifs de recherches</p>
           <p class="h6 text-center"><a to="{name:titres,query:{domainesIds:w,typesIds:pr,statutsIds:val,vueId:table}}" type="primary">Voir les titres</a></p>
         </div>
-        <div class="tablet-blob-1-3">
+        <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="fr-alert fr-alert--error fr-alert--sm">
@@ -49,15 +49,15 @@
             <!---->
           </div>
           </p>
-          <p class="bold text-center">Surfaces cumulées des titres pouvant faire l'objet d'une activité d’exploration</p>
+          <p class="text-center">Surfaces cumulées des titres pouvant faire l'objet d'une activité d’exploration</p>
         </div>
       </div>
     </div>
-    <div class="mb-xxl">
+    <div class="fr-mb-2w">
       <h3>Titres d’exploitation</h3>
       <hr>
-      <div class="tablet-blobs">
-        <div class="tablet-blob-1-3">
+      <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="fr-alert fr-alert--error fr-alert--sm">
@@ -76,7 +76,7 @@
           </div>
           <p class="h6 text-center"><a to="{name:titres,query:{domainesIds:w,typesIds:ax,cx,px,statutsIds:dmi,mod,sup,vueId:table}}" type="primary">Voir les titres</a></p>
         </div>
-        <div class="tablet-blob-1-3">
+        <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="fr-alert fr-alert--error fr-alert--sm">
@@ -95,7 +95,7 @@
           </div>
           <p class="h6 text-center"><a to="{name:titres,query:{domainesIds:w,typesIds:cx,statutsIds:val,vueId:table}}" type="primary">Voir les titres</a></p>
         </div>
-        <div class="tablet-blob-1-3">
+        <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="fr-alert fr-alert--error fr-alert--sm">
@@ -105,15 +105,15 @@
             <!---->
           </div>
           </p>
-          <p class="bold text-center">Surfaces cumulées des titres pouvant faire l'objet d'une activité d’exploitation</p>
+          <p class="text-center">Surfaces cumulées des titres pouvant faire l'objet d'une activité d’exploitation</p>
         </div>
       </div>
     </div>
   </div>
-  <div class="line-neutral width-full mb"></div>
+  <div class="fr-mb-3w fr-mt-3w" style="height: 1px; width: 100%;"></div>
   <h2>Production annuelle</h2><span class="separator"></span>
-  <p class="mb-xl">Données contenues dans la base de données Camino, stabilisées pour l’année n-1.</p>
-  <div class="tablet-pt-s pb-s">
+  <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="fr-alert fr-alert--error fr-alert--sm">
         <p>because reasons</p>
@@ -130,14 +130,14 @@
     <!---->
     <!---->
   </div>
-  <div class="line-neutral width-full mb-xl"></div>
+  <div class="fr-mb-3w fr-mt-3w" style="height: 1px; width: 100%;"></div>
   <div id="evolution" class="mb-xxl">
     <h2>Titres octroyés et surface</h2><span class="separator"></span>
     <p>Données contenues dans la base de données Camino, concernant exclusivement le territoire français.</p>
     <h3>Permis exclusif de recherche (PER) octroyés</h3>
     <hr>
-    <div class="tablet-float-blobs clearfix">
-      <div class="tablet-float-blob-1-3 mb-xl mt">
+    <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="fr-alert fr-alert--error fr-alert--sm">
@@ -149,7 +149,7 @@
         </p>
         <p>Permis exclusifs de recherches octroyés l’an dernier</p>
       </div>
-      <div class="tablet-float-blob-2-3 relative mb-xl">
+      <div class="fr-col-12 fr-col-md-9 relative fr-mb-3w">
         <div class=" undefined" style="display: flex; justify-content: center;">
           <div class="fr-alert fr-alert--error fr-alert--sm">
             <p>because reasons</p>
@@ -168,8 +168,8 @@
     </div>
     <h3>Concessions octroyées</h3>
     <hr>
-    <div class="tablet-float-blobs clearfix">
-      <div class="tablet-float-blob-1-3 mb-xl mt">
+    <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="fr-alert fr-alert--error fr-alert--sm">
@@ -181,7 +181,7 @@
         </p>
         <p>Concessions octroyées l’an dernier</p>
       </div>
-      <div class="tablet-float-blob-2-3 relative mb-xl">
+      <div class="fr-col-12 fr-col-md-9 relative fr-mb-3w">
         <div class=" undefined" style="display: flex; justify-content: center;">
           <div class="fr-alert fr-alert--error fr-alert--sm">
             <p>because reasons</p>
@@ -193,8 +193,8 @@
     </div>
     <h3>Concessions valides</h3>
     <hr>
-    <div class="tablet-float-blobs clearfix">
-      <div class="tablet-float-blob-1-3 mb-xl mt">
+    <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="fr-alert fr-alert--error fr-alert--sm">
@@ -206,7 +206,7 @@
         </p>
         <p>Concessions valides l’an dernier</p>
       </div>
-      <div class="tablet-float-blob-2-3 relative mb-xl">
+      <div class="fr-col-12 fr-col-md-9 relative fr-mb-3w">
         <div class=" undefined" style="display: flex; justify-content: center;">
           <div class="fr-alert fr-alert--error fr-alert--sm">
             <p>because reasons</p>

packages/ui/src/components/statistiques/guyane-activite.tsx

@@ -11,26 +11,26 @@ export const GuyaneActivite: FunctionalComponent<Props> = props => (
   <div id="indicateurs">
     {props.enConstruction ? <Alert class="fr-mb-2v" type="warning" title="Données en cours de collecte et consolidation." /> : null}
 
-    <div class="tablet-blobs">
-      <div class="tablet-blob-1-3 mb-xl">
+    <div class="fr-grid-row">
+      <div class="fr-col-12 fr-col-md-4 fr-mb-3w">
         <h4 class="text-center">Production d'or nette</h4>
         <p class={['fr-display--xs', styles['donnee-importante']]}>{numberFormat(props.statistiqueGuyane.orNet)} kg</p>
         <p>Production d’or nette (après affinage) issue des mines en Guyane.</p>
       </div>
-      <div class="tablet-blob-1-3 mb-xl">
+      <div class="fr-col-12 fr-col-md-4 fr-mb-3w">
         <h4 class="text-center">Energie consommée</h4>
         <p class={['fr-display--xs', styles['donnee-importante']]}>{numberFormat(props.statistiqueGuyane.carburantConventionnel + props.statistiqueGuyane.carburantDetaxe)} kl</p>
-        <p class="bold text-center">dont {numberFormat(props.statistiqueGuyane.carburantDetaxe)} kl détaxés</p>
+        <p class="text-center">dont {numberFormat(props.statistiqueGuyane.carburantDetaxe)} kl détaxés</p>
         <p>Volume de carburant consommé par les activités extractives.</p>
       </div>
-      <div class="tablet-blob-1-3 mb-xl">
+      <div class="fr-col-12 fr-col-md-4 fr-mb-3w">
         <h4 class="text-center">Mercure collecté</h4>
         <p class={['fr-display--xs', styles['donnee-importante']]}>{numberFormat(props.statistiqueGuyane.mercure)} kg</p>
         <p>Masse de mercure d’origine anthropique historique ou illégale récupéré lors de l’exploitation.</p>
       </div>
     </div>
-    <div class="tablet-blobs">
-      <div class="tablet-blob-1-2 mb-xl">
+    <div class="fr-grid-row">
+      <div class="fr-col-12 fr-col-md-6 fr-mb-3w">
         <h4 class="text-center">Protection de l'environnement</h4>
         <p class={['fr-display--xs', styles['donnee-importante']]}>{numberFormat(props.statistiqueGuyane.environnementCout)} €</p>
         <p>Montant en euros des investissements * déclarés contribuant à la protection de l’environnement.</p>
@@ -38,19 +38,19 @@ export const GuyaneActivite: FunctionalComponent<Props> = props => (
           <small>* listés à l’article 318 C de l’annexe II du code général des impôts.</small>
         </p>
       </div>
-      <div class="tablet-blob-1-2 mb-xl">
+      <div class="fr-col-12 fr-col-md-6 fr-mb-3w">
         <h4 class="text-center">Emplois</h4>
         <p class={['fr-display--xs', styles['donnee-importante']]}>{numberFormat(props.statistiqueGuyane.effectifs)}</p>
         <p>Salariés mobilisés sur les exploitations minières (équivalent temps plein).</p>
       </div>
     </div>
-    <div class="tablet-blobs">
-      <div class="tablet-blob-1-2">
+    <div class="fr-grid-row">
+      <div class="fr-col-12 fr-col-md-6">
         <h4 class="text-center">Sources des données</h4>
         <p class={['fr-display--xs', styles['donnee-importante']]}>{numberFormat(props.statistiqueGuyane.activitesDeposesQuantite)}</p>
         <p>Rapports d’activité de production collectés via Camino utilisés pour consolider ces statistiques.</p>
       </div>
-      <div class="tablet-blob-1-2">
+      <div class="fr-col-12 fr-col-md-6">
         <h4 class="text-center">Taux de collecte</h4>
         <p class={['fr-display--xs', styles['donnee-importante']]}>{props.statistiqueGuyane.activitesDeposesRatio} %</p>
         <p>Des rapports d’activité de production attendus ont été déposés par les opérateurs miniers pour consolider ces statistiques.</p>

packages/ui/src/components/titre.stories_snapshots_BasseManaMod.html

@@ -16,7 +16,7 @@
       <div style="font-weight: 500;">DEB : 2016-0010-MI</div>
     </div>
     <div class="fr-grid-row fr-grid-row--middle fr-mt-4w">
-      <div><span class="fr-icon-calendar-line fr-icon--sm fr-mr-1w" aria-hidden="true"></span>Modifié le 19-12-2023</div>
+      <!---->
       <!---->
     </div>
     <div>
@@ -396,7 +396,7 @@
               <div class="_sticky_964a6e fr-pt-1w">
                 <div style="display: flex; justify-content: space-between; align-items: center;">
                   <div style="display: flex;">
-                    <div class="fr-text--lg fr-mb-0" style="font-weight: 500;">Dépôt de la demande</div>
+                    <div class="fr-text--lg fr-mb-0" style="font-weight: 500;">Enregistrement de la demande</div>
                     <!---->
                   </div>
                   <div style="display: flex;">